@font-face {
  font-family: 'Gotham';
  src: url('/fonts/gothamthin.OTF') format('opentype');
  font-weight: 100; /* Thin */
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/gothamblack.OTF') format('opentype');
  font-weight: 900; /* Black */
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/gothammedium.TTF') format('truetype');
  font-weight: 500; /* Medium */
  font-style: normal;
}


* {
    color:white;
    font-weight:100;
   }

   body {
    font-family:"Gotham" !important;   

   }

   h1 {
    font-weight:600;
    font-size:30px;
   }
   
   body {
       display:flex;
       flex-direction:column;
       align-items:center;
       height:100vh;
       justify-content: center;
       background-color:black;
       background-image:url(/images/BGIMG.png);
       background-size:cover;
   }
   
   .headersection, .middle {
       width:100%;
       display:flex;
       flex-direction:row;
       flex-wrap:nowrap;
       align-items:center;
   }
   .middle {
       padding-top:50px;
       padding-bottom:50px;
   }

   .bottom {
    display:flex;
    flex-direction:column;
    align-items:center;
   }

   
   #movieContainer {
        display:flex;
       width:50%;
       justify-content:center;
       align-items:center;
       gap:25px;
   }

   
   #tryAgainBtn {
       visibility:hidden;
   }


   
   
   .movie {
    position:relative;
    display:flex;
    flex-direction:column-reverse;
    padding:25px;
   cursor:pointer;
   border-radius:15px;
   border-color:white;
   border-style:solid;
   border-width:1px;

   transition:0.3s;

   background-color:black;

   }

   .movie::before {
    content: "";
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    transition: height 0.5s ease;
    z-index: -1;
    border-radius:15px;
   }

   .movie.active:before {
    height: 100%;
    position:absolute;
    z-index:9;
    top: 0;
    left: 0;
  }

  
  .movie.correct.active:before {
    background-color: green;
  }

  .movie.incorrect.active:before {
    background-color: rgb(164, 0, 0);
  }

  .movie.tie.active:before {
    background-color: #e5aa3b;
  }


  .moviescore {
    position:absolute;
    top:25px;
    left:25px;
    font-size:50px;
    font-weight:900;
    z-index:10;
  }
  
  .moviescore {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
  
  

   #moviePoster1, #moviePoster2 {
    width:100%;
    height:45vh;
    object-fit:contain;
   }


   .movie:hover {
       filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.954));

   }
   .movie#movie1:hover {
       transform:rotateZ(-2deg) translateX(-20px) translateY(5px);
       transition:0.5s;

   
   }

   .movie#movie2:hover {
    transform:rotateZ(2deg) translateX(20px) translateY(5px);
    transition:0.5s;


}
   
   .movie-item img {
       border-radius:10px;
       width:400px;
   }
   
   .movie-item p {
       text-align:center;
       font-size:25px;
   }
   
   .footer {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
   }

   #bottomtext {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;

    
   }
   
   
    /* The switch - the box around the slider */
    .switch {
       position: relative;
       display: inline-block;
       width: 60px;
       height: 34px;
     }
     
     /* Hide default HTML checkbox */
     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }
     
     /* The slider */
     .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
     }
     
     .slider:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: white;
       -webkit-transition: .4s;
       transition: .4s;
     }
     
     input:checked + .slider {
       background-color: #e5aa3b;
     }
     
     input:focus + .slider {
       box-shadow: 0 0 1px #e5aa3b;
     }
     
     input:checked + .slider:before {
       -webkit-transform: translateX(26px);
       -ms-transform: translateX(26px);
       transform: translateX(26px);
     }
     
     /* Rounded sliders */
     .slider.round {
       border-radius: 34px;
     }
     
     .slider.round:before {
       border-radius: 50%;
     } 
   
     #audienceScoreToggle {
       display:none;
     }
   
     /* styles.css */
   #overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgb(0, 0, 0);
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   .spinner {
       border: 4px solid rgba(255, 255, 255, 0.3);
       border-top: 4px solid #fff;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .switch {
     z-index:0 !important;
   }
   
   #content {
     display:none ;
     width:100%;
   }
   
   #popupOverlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
   }


   
   #popupContent {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #000000;
     padding: 50px;
     height:500px;
     width:650px;
     display:flex;
     justify-content:center;

     flex-direction: column;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     border-style:solid;
     border-radius:25px;
     border-width:1px;
     border-color:white;
   }

   #playBtn {
         margin-top:25px;
   }
   
   #playBtn, #tryAgainBtn, #nextbutton {
     background-color: #e5aa3b;
     color: #fff;
     border: none;
     padding:20px;
     font-size: 16px;
     cursor: pointer;
     text-transform:uppercase;
     font-family:"Gotham";
     width:225px;
     font-weight:900;

     transition:0.2s;

   }

 
   #playBtn:hover, #tryAgainBtn:hover, #nextbutton:hover {
     background-color: #252525;
   }

   #nextbutton, #tryAgainBtn {
     position:absolute;
   }
   
   .footer {
    position:fixed;
    bottom:0;
    width:100%;

   }

   #content {
padding-bottom:135px;
   }

   body {
    overflow:hidden;
   }

   #scorecounter {
    background-color:rgb(20, 20, 20);
    padding:50px;
    border-color:white;
    border-radius:10px;
    border-width:1px;
    border-style:solid;
   }

   #movieContainer {
    transition: transform 2s ease; /* Transition property for scaling */
}

.hidden {
    transform: scale(0); /* Scale to 0 when hidden */
  
}

#nextbutton {
  visibility:hidden;
}

.fa-brands, .fa-solid {
  transition:0.25s;
}


.fa-brands:hover, .fa-solid:hover {
  transform:scale(1.15);
}

#scorecounter {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#scorecounter h2 {
  margin:0px; 
  font-size:20px;
}

#scorecounter p {
  margin:0px;
  font-size:50px;
}

#highestScore {
margin-top:15px;
  font-weight:900;
}

#score {
	margin-top: 10px !important;
}

.responsivenotice {
  display:none;
}

.movie h2 {
  max-width:350px;
}


@media only screen and (max-width: 1024px) {
  .responsivenotice {
    margin:0px;
    position: absolute;
    background-color: black;
    height:100vh;
    padding:50px;
    z-index: 100 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .responsivenotice p {
    font-size:40px;
    text-align:center;
  }
}