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

   Filename: mill.css
*/
   



/* Main Styles */
   html {
   background-color:rgb(33, 33, 33);
   font-family: Verdana, Geneva, sans-serif;
   height: 100%;
   
  }

  body {
   background-color: rgb(33, 33, 33);
   min-height: 100%;  
   margin: 0px auto;
   min-width: 320px;
   max-width: 2800px;
   width: 100%;
   
  }   


#doronName, #doronLogoPrompt, #doronCheckOut, #showLinks h1, 
#BTShow h2, #BTShow h3, #DCShow h2, #DCShow h3, #recentVideoTitle #timerTitle, #clock{
   font-family:monospace, Andale Mono, monospace;
}

footer img, .doron_background, div#spotifytext, div#doronLogoLinks, .doronMedia, iframe#doronappleembed,
iframe#doronspotifyembed, #membersOnly, #showLinks h3, #showlinks a, h2#recentVideoTitle, iframe#recentVideoLink,
header img#logoimg, div#line, #clock, section div#images, div.recentVideoDiv{
   display: -webkit-flex;
   display: flex;
}

header img#logoimg, a.youtubeLink, h3#youtubeTitle, #timerTitle, .topVideo, h4#doronLogoPrompt, div.doronMedia, 
h3#doronCheckOut, img.profileLogo, div#showLinks, div.recentVideoDiv, h2#recentVideoTitle, #timerClock, #clock, 
footer img, div#line{
   margin-right: auto;
   margin-left: auto;
}

header, a.youtubeLink, h3#youtubeTitle, #timerTitle, .topVideo, h4#doronLogoPrompt, iframe#doronappleembed,
iframe#doronspotifyembed, .doron_background, div#doronBG, div#doronProfile, img.profileLogo, #membersOnly, #showLinks h3, 
#showLinks a, #days, #hrs, #mins, #secs, #timerClock, #clock, footer img{
   position:relative;
}

#memversLink, #membersLinkImg, div.Title, h1#Title, h2#doronName, .videoBackground, .videoBackgroundVideo, 
h4#doronSpotify, div.doronoverlay, h3#doronCheckOut, div#spotifytext, div#doronLogoLinks{
   position: absolute;
}


/* Header and Nav Styles */
   header{
      z-index:1;
   }

   header img#logoimg {
      width: 100%;
   }

   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-family:monospace, Andale Mono, monospace;
      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: rgba(198, 117, 170, 0.927);
      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;
   }

   

   #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);
   }

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

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

/* Title Styles */
   div.Title{
      display:block;
      max-width: 2800px;
      top:100px;
      width:100%;
      height:15vw;
   }

   h1#Title{
      max-width: 2800px;
      width:100%;
      height:100%;
      font-family:comic;
      font-weight:1000;
      text-align: center;
      color:rgb(255, 255, 255,.5);
      font-size: min(8vw, 200px);
   }

   h2#doronName{
      top:0;
      margin-top:175px;
      text-align: center;
      font-size: 5em;
      color:rgb(255, 255, 255,.8);
      font-weight: 100;
      text-align: center;
      width:100%;
   }

   #showLinks h1{
      color:white;
      text-align:center;
      font-size: min(7vw, 50px);
      font-weight: 100;
   }

   a.youtubeLink{
      display:block;
      width: 30% !important;
      text-decoration:none !important;
     }
  
   h3#youtubeTitle{
      margin-top:28vw;
      font-family:Arial, Helvetica, sans-serif;
      width:100%;
      max-width: 1920px;
      text-align: center;
      color:rgb(255, 255, 255,.5);
      font-size: 3vw;
      text-decoration:none;

   }

   h3#youtubeTitle: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;
   }

   #timerTitle{
      color:rgb(255, 255, 255);
      font-style:bold;
      text-align:center;
      width: 90%;
      font-size: min(1.7vw, 20px);
      font-weight: 100;
      margin-top:.5vw;
   }

/* Background-Video Styles*/
   .topVideo{
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
      box-sizing:inherit;
      margin:0;
      margin-top:-58px;
      display:block;
      width:100%;
      height:50vw;
      overflow:hidden;
      z-index:0;
   }

   .videoBackground{
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
   }
   .videoBackgroundVideo{
      object-fit: cover;
      width:100%;
      height:100%;
   }

   .videoBackgroundOverlay{
      object-fit: cover;
      width:100%;
      height:100%;
   }


/* Doron Styles */
   h4#doronSpotify{
      top:0;
      margin-top:2em;
      text-align: center;
      font-size: 1em;
      color:rgb(255, 255, 255,.8);
      font-weight: 100;
      text-align: center;
      width:100%;
      font-family:Arial, Helvetica, sans-serif;
   }



   h4#doronLogoPrompt{
      bottom:0;
      margin-top: -6em;
      text-align: center;
      font-size: .9em;
      color:rgba(207, 207, 207, 0.8);
      font-weight: 100;
      width:40%;
      word-spacing: 1px;
   }

   div.doronMedia{
      width: 80%;
      max-width:1440px;
      margin-top:5vw;
      max-height:450px;
      overflow:hidden;
      border-color:transparent;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius:30px;
      border-style:solid;
      border-width:1px;
   }

   iframe#doronappleembed{
      min-width:125px;
      min-height:450px;
      height:100%;
      margin-top:auto;
      margin-bottom:auto;
   }
   iframe#doronspotifyembed{
      max-width:660px;
      min-width:125px;
      height:100%;
      min-height:450px;
   }

   .doron_background{
      width:100%;
      min-height:450px;
      height:100%;
      object-fit: cover;
      
   }

   div#doronBG{
      display:block;
      max-width:660px;
      min-width:125px;
      height:100%;
      min-height:450px;
      width:100%;
   }

   div.doronoverlay{
      object-fit: cover;
      width:100%;
      height:100%;
      margin-top:-450px;
   }

   div#doronCurrentMedia{
      width:80%;
      overflow:hidden;
      border-color:transparent;
      margin-left:-.25em;
      border-style:solid;
      border-width:1px;
      z-index: 1;
   }

   h3#doronCheckOut{
      margin-left:10%;
      margin-right:10%;
      top:0;
      margin-top:275px;
      text-align: center;
      font-size: 2em;
      color:rgb(255, 255, 255);
      font-weight: 100;
      text-align: center;
      width:80%;
      
   }

   img#doronProfileImage{
      width:100%;
      height:100%;
      min-width:300px;
      border-color:transparent;
      border-style:solid;
      border-width:1px;
   }

   div#doronProfile{
      width:100%;
      z-index: 2;
   }

   img.profileLogo{
      font-family:Arial, Helvetica, sans-serif;
      width:50px;
      height:50px;
   }

   img#spotifyProfileLogo{
      margin-top:-3.5em;
      width:40px;
      height:40px;
      margin-left:1em;
      transition: .25s;
   }

   img#appleProfileLogo{
      margin-top:-4em;
      bottom:0;
      margin-right:1em;
      transition: .25s;
   }


   img#appleProfileLogo:hover, img#spotifyProfileLogo:hover{
      -webkit-filter: invert(80%) brightness(400%);
      filter: invert(80%) brightness(400%);

   }

   img.profileLogo2{
      display:none;
   }

   img#spotifyProfileLogo2{
      display:none;
   }

   img#appleProfileLogo2{
      display:none
   }

   div#spotifytext{
      width:100%;
      height:25%;
      top:0;
   }

   div#doronLogoLinks{
      width:100%;
      height:25%;
      bottom:0;
   }


   /* Members Only Styles */
   

   #membersOnly{
      float:left;
      margin-left:7%;
      width:20%;
      border-style: solid;
      border-width: 5px;
      -webkit-border-radius: 60px;
      -moz-border-radius: 60px;
      border-radius: 60px;
      border-color: white;
      margin-bottom: 3%;
   }

   #showLinks a{
      text-decoration:none;
   }

   #showLinks p{
      font-family:monospace, Andale Mono, monospace;
      width:50%;
      margin-right:10%;
      margin-top:3%;
      font-size: min(2vw, 40px);
      text-align:center;
      float:right;
      color:white;
   }

   /* #dropCap:first-letter{
      font-size: min(4vw, 70px);
   } */

   #showLinks a{
      font-family:monospace, Andale Mono, monospace;
      width:50%;
      font-size: min(2.2vw, 30px);
      text-align:center;
      float:right;
      color:white;
   }

   #membersOnlyContent{
      width:30% !important;
      margin-right: 15vw;
   }

   #showLinks h4:hover{
      color: rgb(225, 191, 245);
      border-color: rgb(225, 191, 245);
      background-color:rgba(154, 117, 143, 0.348);
   }  

   #showLinks h4{
      width:100%;
      border-style:solid;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius:50px;
      border-color:rgb(201, 201, 201, 1);
      background-color: rgba(33, 30, 33, 0.397);
   }


   div#showLinks{
      background-image: url("images/btbackground.jpg");
      -webkit-filter:contrast(1.25);
      filter:contrast(1.25);
      overflow:hidden;
      width:80%;
      max-height:1440px;
      height:100%;
      max-width:1440px;
      margin-top: 3vw;
      margin-bottom: 3vw;
      padding-bottom:1em;
      border-style:solid;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius:50px;
      border-color:rgb(201, 201, 201, 1);
   }

   
/* Recent Video Styles */
   div.recentVideoDiv{
      width:80%;
      max-width:1440px;
      max-height:600px;
      margin-top:5vw;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      border-style: solid;
      color:rgb(255, 255, 255);
      background-image: url("images/recentEpisodePattern.png");
      background-size:2000px 700px;
      border-width:3px;
      margin-bottom:2em;
   }

   h2#recentVideoTitle{
      float:right;
      color:white;
      text-align:center;
      width: 80%;
      height:20%;
      margin-top:5vw;
      font-size: min(3vw, 45px);
      font-weight: 100;
   }

   iframe#recentVideoLink{
      float:left;
      margin-left: 0;
      margin-right: auto;
      width: 70vw;
      height: 30vw;
      max-width: 2000px;
      max-height: 600px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      border-style: solid;
      color: black;
      border-width:1px;
   }


/* Countdown Clock Styles */
   #days, #hrs, #mins, #secs{
      font-size:3vw;
      text-align:center;
      font-weight: 10;
   }

   #clockandTitle{
      display: -webkit-flex;
      display:flex;
      -webkit-flex-wrap: wrap;
      flex-wrap:wrap;
      width:45%;
   }

   #timerClock{
      color:rgb(255, 255, 255);
      font-style:bold;
      text-align:center;
      width: 80%;
      font-size: 2vw;
      font-weight: 100;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius:30px;
      background-color: rgba(19, 34, 44, 0.623);
      border-style:solid;
      height: 8vw;
      max-width: 360px; 
      margin-top:1vw;
      max-height:125px;
   }

   #clock{
      width: 8vw;
      max-width:170px;
      z-index:10;
      color:black;
      margin-top:-1.25vw;

   }

   #clock h3{
      color:rgb(250, 238, 232);
      font-size: min(1.5vw, 30px);
   }

/* Footer Styles */

   footer {
   text-align:center;
   font-size: 1em;
   padding-bottom: 1em;
   color:rgb(255, 255, 255);
   font-family:monospace, Andale Mono, monospace;
   }

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

   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);
   }   

   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);
   }

   
   
   


/* Mobile Styles */
 
   @media only screen and (max-width: 640px) {
      
      a#navicon img{
         height: 15vw;
      }


      a#navicon {
         display: block;
         margin-left: 10px;
      }
      
      header nav ul {
         display: none;
         width: 80% !important;
         margin-left:15%;
      }
      
      header nav ul li {
         font-size: 1.5em;
         line-height: 2em;
         height: 3em;
         padding: 2px;
         margin-left:auto;
         margin-right:auto;
         width: 35%;
      }

      .Title{
         position:relative !important;
         margin-top: -57vw !important;
         margin-bottom: 40vw;
      }

      #Title{
         position:relative !important;
      }

      #youtubeTitle{
         margin-top:-5vw !important;
      }
      

      .topVideo{
         margin-top:-17.5vw !important;
      }

      #doronCurrentMedia{
         display: none;
      }
   
      #doronProfile  {
         width:100%!important; 
         min-width:0px !important;
      }

      #doronProfileImage
      {
         width:100%!important; 
         min-width:0px !important;
      }

      #doronLogoPrompt{
         font-size: .7em !important;
      }

      #doronName{
         margin-top:7vw!important;
      }

      #recentVideoLink{
         display:none !important;
      }
      
      #clockandTitle{
         width:100%;
         margin-bottom: 4vw;
      }

      #timerClock{
         height: 17vw !important;
         margin-top: 5vw;
      }


      #recentVideoTitle{
         display:none !important;
      }

      #timerTitle{
         width:100% !important;
         font-size: min(4vw, 45px);
         margin-top:3vw;
      }
      
      #clock h3{
         font-size: min(5vw, 45px);
      }

      #showLinks h1{
         font-size: min(5vw, 50px) !important;
      }

      #showLinks h3{
         font-size: min(2.5vw, 50px) !important;
      }


      #clock{
         width:30vw;
         margin-top: -7vw;
      }

      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;
         margin-bottom: 20vw;
      }
      
      section img{
         display:block;
         width:50%;
         margin:auto;
      }

      img.profileLogo{
         position:relative;
         font-family:Arial, Helvetica, sans-serif;
         width:50px;
         height:50px;
         margin-left:auto;
         margin-right:auto;
      }

      #doronLogoLinks{
         position:relative !important;
         width: 18% !important;
         margin-left:auto;
         margin-right:auto;
         margin-top:-10vw;
      }

      #newLogoLink1{
         margin-top:-3.5em;
         width:7vw;
         height:7vw;
         margin-left:0em;
         margin-right:.5em;
      }

      #newLogoLink2{
         margin-top:-3.5em;
         width:7vw;
         height:7vw;
         margin-right:0em;
         margin-left:.5em;
      }

      #spotifyProfileLogo2{
         display:block !important;
         width:100%;
         height:100%;
      }

      #appleProfileLogo2{
         display:block !important;
         width:100%;
         height:100%;
      }
   
      img.profileLogo{
         display:none;
      }
   
      img#spotifyProfileLogo{
         display:none;
      }
      
      img#appleProfileLogo{
         display:none
      }

      footer address {
         margin-top: 0px;
         font-style: normal;
         font-size:2.5vw;
      }
}
 
/* 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;
      }
   
}