html {
    height:100%;
}
  
body {
    margin: 0; 
    height: 100%;
    width: 100%;
    font-family: monospace;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;         
}    
  
.content {
    left:50%;
    top:50%;
    position:fixed;
    text-align:center;
    transform:translate(-50%, -50%);
}

@media (orientation: portrait) { 
    .content {width: 100vw; height: 100vh; padding:0; padding-top: 5vh; background-color:rgba(0, 0, 0, 0);}
}

@media (orientation: landscape) {
    .content {width: 50vw; height: auto; padding:0; padding-top: 5vh; background-color:rgba(0, 0, 0, 0.4);
      border-radius:1em; box-shadow:0 0 2em rgba(0,0,0,.35); box-sizing:border-box;}    
}

#parent {
  height:50vh;
  padding:0; margin:0;
  width: 100%;
  position: relative;

}

#first, #second {
  padding:0; margin:0;
  position:fixed;
  width:100%;
  -webkit-transition: opacity .6s ease-out, transform .6s ease-out;
     -moz-transition: opacity .6s ease-out, transform .6s ease-out;
      -ms-transition: opacity .6s ease-out, transform .6s ease-out;
       -o-transition: opacity .6s ease-out, transform .6s ease-out;
          transition: opacity .6s ease-out, transform .6s ease-out;
} 

.hidden {
  opacity: 0 !important;
  pointer-events:none;
}
.active {
  opacity: 1 !important;
}

.gamesContainer { 
    width: 100%; 
    margin:0; 
    position: relative; 
    padding: 0; 
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.contactContainer { 
    width: 100%; 
    margin:0; 
    position: relative; 
    padding: 0; 
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    padding-top: 6%;
    box-sizing: border-box;
    color: white;
}

.contactContainer span{ 
    font-weight: bold; 
    color: #ffa500;
}

.contactContainer a{ 
    font-weight: bold; 
    color: #1100ff80;
}

.oneGame {
    display: block;
    background-color:rgba(0, 0, 0, 0.5);
    border-radius:1em;
    box-shadow:0 0 1em rgba(0,0,0,.25);
    box-sizing:border-box;
    text-align: center;
}

.bottomButton {
    display: block;
    background-color:rgba(0, 0, 0, 0.5);
    border-radius:1em;
    box-shadow:0 0 1em rgba(0,0,0,.25);
    box-sizing:border-box;
    text-align: center;
    transition: .4s ease-in;
}

.bottomButton:hover {
    background-color:#1100ff80;
}

.icon {
    height:65%;
    margin: auto;
    margin-top: 7.5%;
    display: block;
    border-radius:1em;
    opacity: 0.85;
}

.gTitle {
    width: 100%;
    height: 20%;
    margin: 0;
    margin-top: 10px;
    display: block;
    color: white;
  }

#trucoUY {
    transition: transform .5s;
}
  
#trucoUY:hover {
    transform: scale(1.10);
}

@media (orientation: portrait) { 
    h1 {font-size: 15vw; padding:0;}
    #type-text {font-size: 4vw;}
    .gamesContainer { height: 25vh; margin-left: 0; margin-top: 6vh;}
    .contactContainer { height: 25vh; margin-left: 0; margin-top: 6vh; font-size: 2.5em;}
    .oneGame {height: 25vh;width: 40vw; margin-right : 1em; margin-left: 1em;}
    .gTitle {font-size: 4vw;}

    .bottomButton {width: 30vw; padding: 1em; margin: auto; margin-top: 20%;}
    .contactText {font-size: 4vw; color:white;}
}

@media (orientation: landscape) {
    h1 {font-size: 4vw; margin: 0;}
    #type-text {font-size: 1.5vw; margin: 0;}
    .gamesContainer { height: 30vh; margin-left: 0; margin-top: 3.5vh; }
    .contactContainer { height: 30vh; margin-left: 0; margin-top: 3.5vh; font-size: 1.8em;}
    .oneGame {height: 25vh;width: 15vw; margin-right : 2em; margin-left: 2em;}
    .gTitle {font-size: 1.3em; font-weight: bold;}

    .bottomButton {width: 8vw; padding: 1em; margin: auto; margin-top: 6%;}
    .contactText {font-size: 1.1em; font-weight: bold; color:white;}  
}
  
h1 {
    font-family:monospace;
    color: white;
    font-weight:1000;    
}

#type-text {
    font-family:monospace;
    color: white;
    animation: blink-caret .7s step-end infinite;
    border-right: .15em solid orange; /* The typwriter cursor */
}
  
a {
    text-decoration: none; /* no underline */
    margin: 0;
    padding: 0;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: #ffa500 }
}