html {
  scroll-behavior: smooth;
}

.gradientBackground {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient(#3399ff, #0000cc);
  color: white;
}

.menuDiv {
  height: 5vh;
  width: 100vw;
  z-index: 2;
}

.mainLogoDiv {
 height: 10vh;
 width: 100vw;
 background-image: radial-gradient(#3399ff, #0000cc);
}

.screenSegment {
  height: 100vh;
  width: 100vw;
}

@media screen and (max-width:600px) {
    .logoImageDiv {
        height: 75vh;
        vertical-align: bottom;
    }
    .logoTrap {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40vh;
      position: absolute;
      bottom: 5vh;
      left: calc(50vw - 20vh);
      z-index: 0;
    }
    .logoBrain {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40vh;
      position: absolute;
      bottom: 30vh;
      left: calc(50vw - 20vh);
      z-index: 1;
    }
    .gameIcon {
       display: block;
       margin-left: auto;
       margin-right: auto;
       width: 80vw;
       box-shadow:0px 0px 4px 5px #FFFFFFCC;
    }
    .halfScreen {
        width: 80vw;
        height: 80vh;
    }
}

.gameDiv {
    
}

@media screen and (min-width:601px) {
    .logoImageDiv {
        height: 85vh;
        vertical-align: bottom;
    }    
    .logoTrap {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 46vh;
      position: absolute;
      bottom: 5vh;
      left: calc(50vw - 23vh);
      z-index: 0;
    }
    .logoBrain {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 46vh;
      position: absolute;
      bottom: 30vh;
      left: calc(50vw - 23vh);
      z-index: 1;
    }
    .gameIcon {
       display: block;
       margin-left: auto;
       margin-right: auto;
       width: 40vw;
       box-shadow:0px 0px 4px 5px #FFFFFFCC;
    }
    .halfScreen {
        width: 40vw;
        height: 80vh;
    }
}

.bounce2 {
    -webkit-animation-name: animatedropin, animatebounceup;
    -webkit-animation-duration: 1s, 2s;
    -webkit-animation-delay: 0s, 3s;
    -webkit-animation-timing-function: both, both;
    -webkit-animation-iteration-count: 1, infinite;
    -webkit-animation-direction: normal, alternate;
    animation-name: animatedropin, animatebounceup;
    animation-duration: 1s, 2s;
    animation-delay: 0s, 3s;
    animation-timing-function: both, both;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
}

@-webkit-keyframes animatedropin{from{bottom:150vh;opacity:0} to{bottom:30vh;opacity:1}}
@keyframes animatedropin{from{bottom:150vh;opacity:0} to{bottom:30vh;opacity:1}}
@-webkit-keyframes animatebounceup{from{bottom:30vh} to{bottom:35vh}}
@keyframes animatebounceup{from{bottom:30vh} to{bottom:35vh}}

.menuText {
    .hover{ text-shadow: 1px 1px 2px white, 0 0 25px white, 0 0 5px darkblue;};
    font-size:3vh!important;
    color:#fff;
}

.sectionText {
    font-size:4vh!important;
    color:#fff;
}