@font-face { font-family: Roboto; src: url('Fonts/roboto.thin.ttf');} 
@font-face { font-family: PublicSans; src: url('Fonts/public sans/PublicSans-Thin.TTF'); } 
@font-face { font-family: PublicSansBold; src: url('Fonts/public sans/PublicSans-Bold.TTF'); } 







.body{
  background-color:#1a1a1a;   
  font-family: "Roboto";
  color: white;
  padding-bottom: 4vw;
  padding-top: 1vw;
}

.Name{
  font-family: "Roboto";
  font-size: 4vw;
  color: grey;
  margin-right: 1.5vw;
  margin-bottom: 1vw;
  margin-top: 0vw;
  text-align: right;
  height: 4vw;
}

.Subtitle{
  font-family: "Roboto";
  font-size: 1.5vw;
  color: #4e4e4e; 
  margin-bottom: 4vw;
  margin-right: 2vw;  
  text-align: right;
}

.Contact-Text{
  font-family: "Roboto";
  font-size: 1.8vw;
  color: #5e5e5e; 
  margin-bottom: 2vw;
  margin-right: 2vw;  
  text-align: right;
}

.Contact-Heading{
  font-family: "Roboto";
  font-size: 1vw;
  color: #9f9f9f; 
  margin-right: 2vw;  
  text-align: right;
}

.Contact-Heading a:link {
  color: #9f9f9f; 
  text-decoration: none;
  font-size: 1vw;  
}
.Contact-Heading a:visited {
  color: #9f9f9f; 
  text-decoration: none;
}
.Contact-Heading a:hover {
  color: #6f6f6f; 
}






@media only screen and (max-width:500px) {
  .Name{
    font-size: 8vw;
    height: 8vw;
  }
  .Subtitle{
    font-size: 3vw;
  }
}
@media only screen and (min-width:501px) and (max-width:1100px) {
  .Name{
    font-size: 6vw;
    height: 6vw;
  }
  .Subtitle{
    font-size: 2.2vw;
  }
}
@media only screen and (min-width:1101px) {
  .Name{
    font-size: 4vw;
    height: 4vw;
  }
  .Subtitle{
    font-size: 1.5vw;
  }
}







ol {
  list-style-type: none;
  padding: 0;
  overflow: hidden; 
  margin-bottom: 0.5vw;
  margin-right: 1.6vw;
  margin-top: 1vw;
}

li {
  float: right;
}

li a {
  display: block;
  padding: 1vw;
}

.MainNav:nth-child(1){
  background-color: darkslateblue;
  border-radius: 50px;
}

li a:link {
  color: white;
  background-color: rgba(50, 50, 50, 0.0);
  text-decoration: none; 
}
li a:visited {
  color: white;
  background-color: rgba(50, 50, 50, 0.0);
  text-decoration: none;
}
li a:hover {
  background-color: rgba(70, 70, 70, 0.0);
}

.dropdown {
  float: right;
  overflow: hidden;
  /* height: 3vw; */
}

.dropdown .dropbtn {
  display: block; 
  border: none;
  outline: none;
  color: white;
  padding: 1vw;
  background-color: inherit;
  font-family: inherit;
  margin-top: 0vw;
  margin-bottom: auto;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #2a2a2a;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2a2a2a;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #3a3a3a;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (max-width:500px) {
  li a:link {
    font-size: 2.2vw;  
  }
  .dropdown .dropbtn {
    font-size: 2.2vw;  
  }
}
@media only screen and (min-width:501px) and (max-width:1100px) {
  li a:link {
    font-size: 1.8vw;  
  }
  .dropdown .dropbtn {
    font-size: 1.8vw;  
  }
}
@media only screen and (min-width:1101px) {
  li a:link {
    font-size: 1vw;  
  }
  .dropdown .dropbtn {
    font-size: 1vw;  
  }
}







.grid-container-main {
  display: grid;
  grid-template-columns: auto;
  padding: 1vw;
  gap: 2vw 2vw;
}

.grid-container-content-TRON {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width:96vw;
  height:32vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('index/TRON_IMG.jpg');
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
}

.grid-container-content-HC {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width:96vw;
  height:32vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('index/HC_IMG.jpg');
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.grid-container-content-LotM {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width:96vw;
  height:32vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('index/LotM_IMG.jpg');
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.grid-container-content-Tricky {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width:96vw;
  height:32vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('Tricky Doors/TD_IMG_2.jpg');
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

.grid-container-main > div > div {
  padding: 1vw;
}

#exemptedElement {
  position: absolute;
  width:96vw;
  height:32vw;
}


#exemptedElement-logo {
  position: absolute;
  width:10vw;
  height:10vw;
}






.TitleItemRight {
  grid-column-start: 3;
  color: white;
  text-align: Right;
  text-overflow: ellipsis;
} 

.DescItemLeft {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 5;
  color: white;
  text-align: Left;
  text-overflow: ellipsis;
} 

.TitleItemLeft {
  grid-column-start: 1;
  color: white;
  text-align: Left;
  text-overflow: ellipsis;
} 

.DescItemRight {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 5;
  color: white;
  text-align: Right;
  text-overflow: ellipsis;
} 






@media only screen and (max-width:500px) {
  .TitleItemRight {
    font-size: 4vw;
  } 
  .DescItemLeft {
    font-size: 3vw;
    opacity: 1;
  } 
  .TitleItemLeft {
    font-size: 4vw;
  } 
  .DescItemRight {
    font-size: 3vw;
    opacity: 1;
  } 
}
@media only screen and (min-width:501px) and (max-width:1100px) {
  .TitleItemRight {
    font-size: 3vw;
  } 
  .DescItemLeft {
    font-size: 2.5vw;
    opacity: 0;
  } 
  .TitleItemLeft {
    font-size: 3vw;
  } 
  .DescItemRight {
    font-size: 2.5vw;
    opacity: 0;
  } 
}
@media only screen and (min-width:1101px) {
  .TitleItemRight {
    font-size: 2.5vw;
  } 
  .DescItemLeft {
    font-size: 1.5vw;
    opacity: 0;
  } 
  .TitleItemLeft {
    font-size: 2.5vw;
  } 
  .DescItemRight {
    font-size: 1.5vw;
    opacity: 0;
  } 
}






.grid-container-game {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  margin-top: 2vw;
  width: 96vw;
  gap: 2vw 2vw;
}

.game-text-main {
  color: grey;
  font-size: 0.8vw;  
  margin-top: 1.5vw;
  margin-left: 1vw;
  width: 25vw;
}

.game-text-left {
  color: grey;
  font-size: 0.8vw;  
  margin-top: 1.5vw;
  text-align: left;
  width: 25vw;
}

.game-text-right {
  color: grey;
  font-size: 0.8vw;  
  margin-top: 1.5vw;
  text-align: right;
  width: 25vw;
  float: right;
  margin-left: auto; 
  margin-right: 0;
}

.game-heading {
  color: grey;
  font-size: 1vw;  
  margin-left: 1vw;
}





.grid-bottom {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin-top: 2vw;
  margin-left: 10vw;
  width: 80vw;
  gap: 2vw 2vw;
}

.grid-container-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  margin-top: 2vw;
  gap: 2vw 2vw;
}







.MainTRONIMG {
  width:96vw;
  height:32vw;
  background-image: url("TRON/TRON Action Shot.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
  margin-top: 1.5vw;
}

.MainHCIMG {
  width:96vw;
  height:32vw;
  background-image: url("HiddenCreatures/HC_IMG_1.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
  margin-top: 1.5vw;
}

.MainLotMIMG {
  width:96vw;
  height:32vw;
  background-image: url("LegendOfTheMuseum/LotM_IMG_1.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
  margin-top: 1.5vw;
}

.TRONIMG1 {
  width:30vw;
  height:20vw;
  background-image: url("TRON/TRON POV.PNG");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.HCIMG1 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_IMG_1.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.HCIMG2 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_IMG_2.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.HCIMG3 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_IMG_3.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.HCIMG4 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_Raycast.PNG");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw;  */
}

.HCGIF2 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_Mirror.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw; */
  margin-left: auto; 
  margin-right: 0;
}

.HCGIF3 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_Enemy.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw;  */
}

.HCGIF1 {
  width:30vw;
  height:20vw;
  background-image: url("HiddenCreatures/HC_Map.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw; */
  margin-left: auto; 
  margin-right: 0;
}

.LotMIMG1 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_IMG_1.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.LotMIMG2 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_IMG_2.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.LotMIMG3 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_IMG_3.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.LotMIMG4 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_IMG_4.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}

.LotMGIF1 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_Morse.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw; */
}

.LotMGIF2 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_Solar.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: auto; 
  margin-right: 0;
}

.LotMGIF3 {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_Tiles.gif");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  /* margin-left: 1vw; */
}

.LotMVID {
  width:30vw;
  height:20vw;
  background-image: url("LegendOfTheMuseum/LotM_Trailer.mp4");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 1vw;
}






.grid-container-logo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  margin-left: 1vw;
  margin-top: 2vw;
  width: 30vw;
  height: 10vw;
  gap: 2vw 2vw;
  justify-content: space-between;
}

.github {
  width: 10vw;
  height:10vw;
  background-image: url("github logo.png");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 2vw;
}

.itch {
  width:8vw;
  height:8vw;
  background-image: url("itch logo.png");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;  
  margin-left: 2vw;
  margin-top: 1vw;
}

@keyframes fade-right{
  0%{
    opacity: 0;
    transform: translateX(-2vw);
    }
    100%{
      opacity: 1;
      transform: translateX(0vw);
    }
}
@keyframes fade-left{
  0%{
    opacity: 0;
    transform: translateX(2vw);
    }
    100%{
      opacity: 1;
      transform: translateX(0vw);
    }
}
@keyframes zoom-bg{
  0%
    {
      background-size:100%;
    }
  100%
    {
      background-size:105%;
    }
}
@keyframes jump{
  0%{
    transform: translateY(0vw);
    }
    100%{
      transform: translateY(-0.1vw);
    }
}






@media only screen and (min-width:501px) {

  .grid-container-content-TRON:hover > .DescItemLeft{

    animation: fade-right 1s;
    animation-fill-mode: forwards;
  }

  .grid-container-content-HC:hover > .DescItemRight{

    animation: fade-left 1s;
    animation-fill-mode: forwards;
  }

  .grid-container-content-LotM:hover > .DescItemLeft{

    animation: fade-right 1s;
    animation-fill-mode: forwards;
  }

  .grid-container-content-Tricky:hover > .DescItemLeft{

    animation: fade-right 1s;
    animation-fill-mode: forwards;
  }

}

.grid-container-content-TRON:hover {
  animation: zoom-bg 1s;
  animation-fill-mode: forwards;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('index/TRON_IMG.jpg');
  
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.grid-container-content-HC:hover {
  animation: zoom-bg 1s;
  animation-fill-mode: forwards;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('index/HC_IMG.jpg');
  
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.grid-container-content-LotM:hover {
  animation: zoom-bg 1s;
  animation-fill-mode: forwards;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('index/LotM_IMG.jpg');
  
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.grid-container-content-Tricky:hover {
  animation: zoom-bg 1s;
  animation-fill-mode: forwards;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Tricky Doors/TD_IMG_2.jpg');
  
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

.text:hover{
  animation: jump 0.5s;
  animation-fill-mode: forwards;
}

.MainNav:nth-child(1):hover{
  background-color: #40367d;
}