@font-face {
    font-family: manrope;
    src: url("Stempel.ttf");
    /*stempel
    ESATHNRML.ttf 
    typetype
    */
}

@font-face {
    font-family: punktype;
    src: url("Misdemeanor.ttf");
    /* rubberstamp.otf 
    misdemeanor.ttf (su chrome è illeggibile)
    punkkid.ttf*/
}



@font-face {
    font-family: broken15;
    src: url("font/retroteam.otf");
}

@font-face {
    font-family: porcodio;
    src: url("howdoyousleep.ttf");
}


body {
    background-image: url(season1bg.jpg);
    background-size: 8%;
    color: white;
    font-family: manrope;
    
}

p {
font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
font-family: punktype;
    color: red;
}

.title {
    font-size: 70px;
position: absolute;
    right: 230px;
    top: 5px;
    transform: rotate(15deg);
        text-shadow: 5px 5px 5px black;
}

.div {
    border-radius: 0px 0px 130px 130px;
    width:900px;
    height: 750px;
    background-color: rgba(0, 0, 0, 0.7);
    border-style: double;
    border-width: 5px;
    border-color: darkred; /*white o red???? */
   box-shadow:
      0 0 5px red,
      0 0 25px red,
          0 0 50px red;
}

.letsgoski {
    width: 297px;
    margin-bottom: 0;
    margin-top: -14px;
    
}

.main {
    border-style: double none none none;
    border-color: darkred;
    border-width: 5px;
}

a {
color: red;
}

.text {
margin: 20px;
    margin-left: 20px;
    overflow: scroll;
    overflow-x: hidden;
     height: 630px;
    
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #9a3842 #000000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #000000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #9a3842;
    border-radius: 10px;
    border: 3px none #ffffff;
  }


.sidebar {
    height: 677px;
    float: left;
    width: 300px;
    border-style: none double none none; 
     border-width: 5px;
    border-color: darkred;
    clear: both;
    content: "";
    
}

 .boh {
width: 500px;
    position: absolute;
    top: 500px;
} 

.destra {
font-size: 50px;
    position: absolute;
    right: 50px;
} 

.right {
    position: absolute;
    width: 400px;
    right: 100px;
}

.right:hover {
  content: url(rightseason1-2hoverrr.png);
}


.marquee-horizontal2 {
  display: flex;
  overflow: hidden;
 height: 50px;
  white-space: nowrap;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}

.track-horizontal2 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-horizontal 20s linear infinite;
}

.marquee-text {
    font-family: broken15;
  -webkit-text-size-adjust: 100%;
  -webkit-box-direction: normal;
  white-space: nowrap;
  box-sizing: border-box;
/*  padding-right: 0.3em;
  padding-left: 0.3em; */
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  color: white;
  font-size: 2em;

}

@keyframes marquee-horizontal {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}











@media screen and (max-width: 1300px) {
    .title {
        transform: rotate(10deg);
        top: -40px;
        right: 100px;
    }
    .boh {
        width: 450px;
        top: 600px;
        left: -30px;
    }
    .right {
        right: 20px;
    }
}

@media screen and (max-width: 1400px) {
    .title {
        transform: rotate(10deg);
        top: -20px;
        right: 80px;
    }
    .boh {
        width: 500px;
        top: 600px;
        left: -30px;
    }
    .right {
        bottom: -390px;
        right: 90px;
    }
}

@media screen and (min-width: 1600px) {
    .div {
        width:1000px;
    height: 800px;
    }
    .text {
     height: 690px;
        margin-right: 40px;
    
}
    .sidebar {
    height: 730px;
    float: left;
    width: 300px;
    }
    .boh {
        top: 590px;
       
    }
}

@media screen and (min-width: 1700px) {
    .div {
        width:1000px;
    height: 800px;
    }
    .text {
     height: 690px;
        margin-right: 40px;
    
}
    .sidebar {
    height: 730px;
    float: left;
    width: 300px;
    }
    .boh {
        width: 550px;
       top: 590px;
    }
    .right {
        width: 500px;
    }
}

@media screen and (min-width: 1800px) {
    .div {
        width:1100px;
    height: 800px;
    }
    .text {
     height: 690px;
        margin-right: 40px;
    
}
    .sidebar {
    height: 730px;
    float: left;
    width: 300px;
    }
    .boh {
        width: 550px;
       top: 590px;
    }
    .right {
        width: 500px;
    }
}

@media screen and (min-width: 1900px) {
    .div {
        width:1100px;
    height: 800px;
    }
    .text {
     height: 690px;
        margin-right: 40px;
    
}
    .sidebar {
    height: 730px;
    float: left;
    width: 300px;
    }
    .boh {
        width: 550px;
       top: 590px;
    }
    .right {
        width: 500px;
    }
}