/*
   COMP 2681 Assignment 2
   Author: Blain Polishak
   Date:   1/18/2024

   Filename: mill.css
*/
   


@import url('https://fonts.cdnfonts.com/css/horror-type');

/* Main Styles */
   html {
   background-image: url("images/btbackground.jpg");
   font-family: Verdana, Geneva, sans-serif;
  }

  header img#logoimg, h2#recentVideoTitle, #spotify, div#youtube, #arrows, iframe#recentVideo,
  footer img, div#line{
   display: -webkit-flex;
   display :flex;
  }

  #membersLink, #membersLinkImg, div.title, h1#Title, #crack, #spotifyWrapper,
  #crackedCave{
   position:absolute;
  }

  .topMove, #imgFloatBackground, .spotifyEmbed, #spotify, #videoCaption, #caveDiv,
  #ytWrapper, #arrows, h2#recentVideoTitle, #leftArrow, #rightArrow, footer img, header,
  a.youtube, h3#Youtube{
      position: relative;
  }

  header img#logoimg, h2#recentVideoTitle, a.youtube, h3#Youtube, .topMove,
  .spotifyEmbed, #spotify, #videoCaption, #caveDiv, div#youtube, #arrows, footer img,
  div#line{
   margin-left: auto;
   margin-right: auto;
  }

  header nav ul li, h2#recentVideoTitle, footer{
      font-family:monospace, Andale Mono, monospace;
  }


/* Header and Nav Styles */
   #membersLink{
      margin-top: -50px;
      margin-left: 3vw;
      z-index:10;
   }

   #membersLinkImg{
      margin-top: 0;
      margin-left: 0;
      height:3vw;
      width:3vw;
      max-height: 35px;
      max-width:40px;
      -webkit-filter: contrast(0) brightness(10);
      filter: contrast(0) brightness(10);
      transition: .6s filter;
   }

   #membersLinkImg:hover{
      transition: filter .1s;
      -webkit-filter: contrast(1) brightness(.8);
      filter: contrast(1) brightness(.8);
   }

   header nav{
      padding-top: 10px;
   }

   header nav ul {
      list-style:none;
      padding-left: 1px;
      padding-right: 1px;
      white-space: nowrap;
      margin-left:0px;
      margin-right:0px;
      margin-top: 0px;
   }

   header nav ul li {
      font-size:1em; 
      line-height: 2em; 
      height: 2em;
      width: 14%;
      padding-left:2px;
      padding-right:2px;
      font-weight: 750;
   }
   
   header nav ul li a {
      color: rgb(255, 255, 255);
      display: block;
      width: 100%;
      text-align:center;
      text-decoration: none;
      background-color: transparent;
   }
   
   header nav ul li a:hover {
      color: rgb(255, 207, 238);
      text-decoration:overline;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      border-radius: 40px;
      border-width: 2px;
      border-color: rgb(48, 48, 48,0);
      border-style: solid;
   }

   header{
      z-index:1;
   }

   header img#logoimg {
      width: 100%;
   }

   #crossReferencePage{
      float:right;
      margin-right: 0.1vw;
      width:5%;
      position:absolute;
      top:0;
      right:0;
      font-size: min(1vw,15px);
      text-align:center;

   }

   #crossReference{
      color:red;
      pointer-events:all;
      text-decoration:none;
   }



/* Title Styles */
   h2#recentVideoTitle{
      color:white;
      text-align:center;
      width: 60%;
      font-size: 1vw;
      font-weight: 100;
      margin-top:0em;
   }

   div.title{
      display:block;
      max-width: 2800px;
      top:100px;
      width:100%;
      height:15vw;
   }

   h1#Title{
      margin-top:-10px;
      max-width: 2800px;
      width:100%;
      height:100%;
      font-family: 'Horror Type', sans-serif;
      text-align: center;
      color:rgb(255, 255, 255,.5);
      font-size: 20vw;
      letter-spacing: 5vw;
      font-weight: 100;
   }

   a.youtube{
      text-decoration:none !important;
   }

   h3#Youtube{
      margin-top:28vw;
      font-family:Arial, Helvetica, sans-serif;
      width:30%;
      max-width: 1920px;
      text-align: center;
      color:rgb(255, 255, 255,.5);
      font-size: 3vw;
      text-decoration:none;

   }

   h3#Youtube:hover {
      color: rgb(255, 207, 238);
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      border-style: solid;
      color:white;
      border-width:4px;
   }



/* Body Styles */
   body {
   min-height: 100%;
   background-color: rgb(0, 0, 0);  
   margin: 0px auto;
   max-width: 2800px;
   width: 100%;
  }

   .topMove{
      max-width:2800px;
      background: url(images/Decryptidbackbg.jpg) black;
      background-size: 121%;
      background-repeat:no-repeat;
      background-attachment: fixed;
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
      box-sizing:inherit;
      margin:0;
      margin-top:-58px;
      display:block;
      height:1657px;
      overflow:hidden;
      z-index:0;
   }

   #imgbackground{
      height: 1657px;
      width:100%;
   }

   #imgFloatBackground{
      pointer-events:none;
      width:100%;
      z-index: 1;
   }

   #floater{
      margin-top: -1200px;
      z-index: 1;
   }


   
/* Spotify Styles */
   .spotifyEmbed{
      width: 80%;
      margin-top: -130vw;
   }

   #crack{
      width:100%;
      height: 30vw;
      z-index:10;
      min-height:200px;
      max-height:600px;
      pointer-events:none;
   }

   #spotifyWrapper{
      width:100%;
      height: 30vw;
      z-index:9;
      background-color:rgb(36, 36, 36);
      max-height:600px;
   }

   #spotify{
      width:90%;
      z-index:9;
      margin-top:1.5vw;
      height:90%;
      max-height:500px;
   }



/* Youtube Styles */
   #videoCaption{
      width: 30%;
      margin-top:3vw;
      margin-bottom:8vw;
   }

   #caveDiv{
      width:100%;
   }

   #crackedCave{
      z-index: -1;
      margin-top:-9vw;
      height:14vw;
      width:100%;
      -webkit-filter:invert(.07);
      filter:invert(.07);
   }

   #ytWrapper{
      width:100%;
      margin-top: 80vw;
      z-index:20;
   }

   #leftArrow:hover {
      -webkit-filter: invert(80%) brightness(400%);
      filter: invert(80%) brightness(400%);
   }

   #rightArrow:hover {
      -webkit-filter: invert(80%) brightness(400%);
      filter: invert(80%) brightness(400%);
   }

   div#youtube{
      width:80%;
      max-width:1440px;
      max-height:800px;
      margin-top:5vw;
      margin-bottom:5vw;
   }

   #arrows{
      max-height:100px;
      width:100%;
      margin-bottom:1.5vw;
   }

   #leftArrow{
      -webkit-filter:brightness(1.5);
      filter:brightness(1.5);
      margin-left:auto;
      width:20%;
      height:20%;
   }

   #rightArrow{
      -webkit-filter:brightness(1.5);
      filter:brightness(1.5);
      margin-right:auto;
      width:20%;
      height:20%;
   }

   iframe#recentVideo{
      float:left;
      margin-left: 0;
      margin-right: auto;
      width: 100%;
      min-height: 180px;
      max-width: 1920px;
      max-height: 700px !important;
      height: 38vw;
      color: black;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background-color:black;
   }



/* Footer Styles */
   footer {
      text-align:center;
      font-size: 1vw;
      padding-bottom: 1vw;
      color:rgb(255, 255, 255);
      z-index:25;
   }

   footer address {
      margin-top: 0px;
      font-style: normal;
      z-index:25;
   }

   footer p#Update{
      margin-top: 10px;
      font-style: normal;
      font-size: min(.8vw, 15px);
      color: rgb(165, 165, 165);
   }

   footer img{
      max-width:1600px;
      width:60%;
      max-height:150px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius:30px;
      color:transparent;
      opacity: 70%;
      background-color: rgb(1,1,1,.5);
      z-index:25;
   }

   div#line{
      width: 70%;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius:0px;
      border-style:solid;
      border-width:3px;
      border-color:rgb(109, 90, 105);
      z-index:45;
   }

/* Mobile Styles */
 
   @media only screen and (max-width: 640px) {
      
      a#navicon {
         display: block;
         margin-left: 10px;
      }

      a#navicon img{
         height: 15vw;
      }

      #membersLinkImg{
         display: none !important;
      }
      
      header nav ul {
         display: none;
         width: 80% !important;
         margin-left:15%;
      }

      #videoCaption{
         width:50%;
      }

      #crackedCave{
         height:20vw;
         margin-top:-12vw;
      }

      #recentVideoTitle{
         font-size:2vw !important;
      }

      #crack{
         min-height:100px;
      }


      #floater{
         margin-top: -1400px;
         z-index: 1;
      }

      .title{
         top:200px !important;
         margin-left:1.2%;
      }

      header nav ul li {
         font-size: 1.5em;
         line-height: 2em;
         height: 3em;
         padding: 2px;
         margin-left:auto;
         margin-right:auto;
         width: 35%;
      }
   
      a#navicon:hover+ul, header nav ul:hover {
         display: flex;
         display: -webkit-flex;
         flex-flow: row wrap;
         -webkit-flex-flow: row wrap;
         width: 100%;
         font-size: .5em;
         margin-top:-14vw;
      }
      
      section img{
         display:block;
         width:50%;
         margin:auto;
      }



}
 


/* Desktop Styles */
 
   @media only screen and (min-width: 641px) {
   
      body header nav ul {
         display: -webkit-flex;
         display: flex;
         -webkit-flex-flow: row nowrap;
         flex-flow: row nowrap;
         -moz-justify-content: center;
         -webkit-justify-content: center;
         justify-content: center;
      }
      
      body header nav ul li {
         -webkit-flex: 0 1 auto;
         flex: 0 1 auto;
      }

      a#navicon{
         display:none;
      }
}