@import url('https://fonts.googleapis.com/css2?family=Workbench&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');

body {
  background:#000!important;
}

.main {
  max-width:80%;
  margin:0px 10%;
  padding-top:25px;
  background:url(https://wallpapers.com/images/hd/jail-cell-background-7d8q3m1l7atzy727.jpg);
  background-size:cover;
  box-shadow:inset 130em 0em rgba(0,0,0,0.6);
}

.decorside {
  width:400px!important;
  height:60px!important;
  background:#000;
  margin-top:3%!important;
  font-family:"Workbench", sans-serif;
  font-size:45px;
  text-align:center;
}

.logo {
  background:url(/projects/sscf/sscf_transparent.png);
  width:150px!important;
  height:150px;
  background-size:contain;
}


.snippet {
  width:130px!important;
  height:400px!important;
  border:3px solid #000;
}

.chap1 {
  background:url(/projects/sscf/lozano_chap1.png);
  background-size:cover;
  background-position:50% 50%;
  transition:1s ease-in-out;
}

.chap2 {
  background:url(/projects/sscf/gorgi_chap2.png);
  background-size:cover;
  background-position:7% 50%;
  transition:1s ease-in-out;
}

.chap3, .chap4, .chap5, .chap6, .chap7 {
  background:url(/projects/sscf/paused_static-chapter.png);
  background-size:cover;
}

.chap3:hover, .chap4:hover, .chap5:hover, .chap6:hover, .chap7:hover {
  background:url(/projects/sscf/static-chapter.gif);
}

.chap1:hover, .chap2:hover {
  filter:grayscale(1);
}

.aboutsscf {
  background:#000;
  width:740px!important;
  height:330px;
  padding:20px;
  color:#484848;
  font-family:"Red Hat Text", sans-serif;
}

.footer {
  width:740px;
  background:#000;
  padding:10px;
  margin-left:-12px;
  margin-top:20px;
  text-align:center;
}

.footer a {
  color:#484848;
}

.aboutsscf h3 {
  font-family:"Workbench", sans-serif;
  margin-left:20px;
  margin-top:10px;
  color:#676767;
}

.members {
  background:transparent;
  width:250px!important;
}

.member {
  background:#fff;
  width:100px;
  height:100px;
  border-radius:100%;
  display:inline-block;
  margin-bottom:5px;
}

.parysbox {
    width:200px!important;
    height:200px;
}

.parysicon {
  background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/29290358?1738958965);
  background-size:cover;
  width:200px!important;
  height:200px;
}

.parysdescription {
  background:#000;
  width:740px!important;
}

#parysname {
  font-family:"Workbench", sans-serif;
  font-size:35px;
  background:#000;
  color:#333333;
  margin-top:10px;
  height:50px;
}

#parysdesc {
  color:#484848;
  background:#000;
  padding-bottom:20px;
  padding-top:10px;
  margin-left:10px;
  font-family:"Red Hat Text", sans-serif;
}

.paryslink {
  background:#000;
  color:#484848;
  font-family:"Workbench", sans-serif;
  text-decoration:none;
  transition:1s ease-in-out;
}

.paryslink:hover {
  letter-spacing:1.5px;
}



/* MUSIC PLAYER */

.buttondiv {
  cursor: pointer;
  position: fixed;
  height: 35px;
  top: 15px;
  width: 45px;
  right: 5px;
  color: white;
  z-index: 1;
}

.autoplayer button {
  background: #000;
  border-radius:100%;
  margin-top:6px;
  cursor: pointer;
  color: white;
  border: none;
  padding: 2px 5px 1px 5px;
  font-size: 18px;
  position: fixed;
  height: 45px;
  top: 10px;
  width: 45px;
  right: 5px;
  order:2;
}

.autoplayer a {
  background:linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
  width:250px;
  border-radius:20px;
  color: white;
  text-decoration: none;
  cursor:help;
  padding: 5px 20px;
  position: fixed;
  font-size: 16px;
  top: 10px;
  z-index: 1;
  right: 50px;
  margin-right:10px;
  color: white;
  order:1;
  font-weight:300;
  color:#333333;
  font-family:'Red Hat Text', sans-serif;
}

.autoplayer span {
  font-weight:600;
  font-family:'Red Hat Text', sans-serif;
  letter-spacing:1px;
  color:#989898;
}