/* --------------- 
HELP ME PLEASE! 
I'M TRAPPED INSIDE 
A DIGITAL WORLD!
 ____________
 | (['/\']) |
 |__mm__mm__|
/ ########## \
==============
ascii art by 
steven lee taylor
www.stevenleetaylor.com 
------------- */


/* FONT-FACE CUSTOM FONTS */
@import url('https://fonts.googleapis.com/css?family=VT323');
@import url('https://fonts.googleapis.com/css?family=Share+Tech&display=swap');
@font-face {
    font-family: space age, sans-serif;
    src: url("../fonts/space age.ttf");
}
@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');

* {
  font-family: 'Share Tech', sans-serif;

}
body {
    background-color: black;
    margin: 1%;
    text-align: center;
}
main{
  height: auto;
}

h1 {
    font-family: 'VT323', monospace;
    font-size: 3.5vw;
    color: red;
  }
h2 {
  font-family: 'Orbitron', sans-serif;
    color:magenta;
    font-size: 2vw;
    text-align: center; 
}
h3 {
    font-size: 1.5vw;
    color: light grey;
}
h4 { 
    font-size: 14pt;
}
li {
    display: inline-block;
    font-size: 2vw;
}
a:hover {
    background-color: white;
    color: black;
}
#logo{
  margin-top:1vw;
  width:5vw;
  animation-name: ckw;
  animation-duration: 15.5s;
}
@keyframes ckw {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
button#hamburger-icon{
  display: none;
}
.blocktext {
  margin-left: auto;
  margin-right: auto;
  width: 15em;
  color: white;
}

#main-navbar {
    font-family: 'VT323', monospace;
    font-size: 2em;
    background: magenta;
    opacity: 0.6;
    line-height: 1vw;
  }
  #main-navbar ul {
    margin: 0;
    padding: 0;
  }
  #main-navbar li {
    display: inline-block;
    padding: 1vw;
  }
  #main-navbar li a {
    text-decoration: none;
    color: mediumblue;
  }
  #main-navbar li a:hover {
    border-bottom: 1vw solid;
    padding-bottom: 1vw;
    color: mediumblue;
  }
.column {
    float: right;
    width: 33%;
    margin:0 auto;
  }
 .item_choices .column {
    height: 25vw;
  }
  .row {
    width:100%;
  }
  .column {
    float: right;
    width: 33%;
    margin:0 auto;
  }
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
.trapezoid {
	border-bottom: 11vw solid #1a1a1aff;
	border-left: 5vw solid transparent;
	border-right: 5vw solid transparent;
	height: 0;
  width: 83vw;
  z-index: -105;
  margin: 0 auto;
}
.cta {
  margin-top: 1vw;
  margin-bottom: 2vw;
}
.blink {
  animation: blink-animation 2s steps(5, start) infinite;
  -moz-animation: blink-animation 2s steps(5, start) infinite;
  -o-animation: blink-animation 2s steps(5, start) infinite;
  -webkit-animation: blink-animation 2s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.item_choices {
    margin: 0, auto;
    z-index:1;
}
.button_panel {
    margin-top: 1vw;
    width: auto;
    height: auto;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }
#swig{
    background-color: #4e014eff;
  }
#game{
    background-color:#13007bff;
  }
#food{
    background-color: #420202ff;
  }
.text-contianer {
    margin-left: 10%;
    margin-right: 10%;
}
.red_button {
  width: 15vw;
  height: 15vw;
  background: url("../img/red_button_up.svg") no-repeat;
  background-size: contain;
}
.red_button:hover {
  background: url("../img/red_button_pushed.svg") no-repeat;
  background-size: contain;
}
.red_button_label {
  margin-top: -8vw;
}
.joy_stick {
  width: 15vw;
  height: 15vw;
  background: url("../img/joy_stick.svg") no-repeat;
  background-size: contain;
  margin-top: -8vw;
  margin-left: 8vw;
}
.joy_label {
  margin-top:  -.1vw;
  margin-right:  -5vw;
}
.joy_stick:hover {
  background: url("../img/joy_stick_pushed.svg") no-repeat;
  background-size: contain;
}
  img.unpressed:hover{
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    line-height: 1.1vw;
}
.extra-buttons{
  background-color: #1a1a1aff;
  width:93vw;
  margin: 0 auto;
  margin-top:-1.5vw;
}
ul li .bottom_link {
  text-decoration: none;
}
.bottom_link {
  border: none;
  border-color: azure;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.fa {
  padding: .5em;
  font-size: 2em;
  width:2em;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  color:whitesmoke;
}
/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
  border:2px;
}
.fotorama {
  width: 48vw;
  height: auto;
  padding: 1vw;
  margin: 0 auto;
  position: relative; 
  overflow: hidden; 
  text-align:left;
}
fieldset {
  width: 40vw;
  height: auto;
  margin: 0 auto;
  margin-top: 3vw;
  border-color: blue;
  background-color: indigo;
}
footer {
  height: 10vw;
}
form {
  color: wheat;
  padding: 1vw;
}
.form_wrapper{
  margin:5vw;
  background-color: blueviolet;
}
.carousel_wrapper {
  margin: 0 auto;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
button {
  background-color: indigo; /* Green */
  border: none;
  color: white;
  padding: .5rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2rem;
  -webkit-transition-duration: 0.4s; /* Safari */
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 10%;
}
button:hover {
  background-color: #555555;
  color: white;
  font-size: 3rem;
}
.vl {
  border-left: 2px solid blue;
  height: 6vw;
  position: absolute;
  left: 50%;
}
legend {
  font-size: 5em;
}
legend:hover {
  color: white;
}
.screen {
  width: 81vw;
  border: 3px solid blue; box-shadow: inset 18px 18px 18px -12px rgba(2, 81, 209, 0.5);
  margin: 0 auto; 
}

@media only screen and (max-width: 599px) {
button#hamburger-icon {
  display: block;
}
.top-nav{
    margin: 0;
    padding: 0;
    text-decoration:none;
    color:black;
    list-style-type: none;
}
#logo {
  width: 10vw;
  height: 10vw;
}
  .column {
    width: 100%;
  }
  div#swig.column {
    height: 200px;
  }
  div#game.column{
    height: 200px;
  }
  div#food.column{
    height:200px;
  }
  img.unpressed{
    margin-top: 40px;
  }
  .row {
    height: 500px;
    display: flex;
    flex-wrap: wrap;
  }
img {
  width: 120px;
}
.trapezoid{
  display: none;
}
.screen{
  height:626px;
}
.fa {
  padding: .5em;
  font-size: 5em;
}
.fotorama {
  width: 80vw;
  height: 80vw;
}
#f_responsive {
  height:250px;
}
button.nav{
  float: left;
  position: fixed;
  top: 10px;
  margin-left:-10px;
  font-size: 2em;
  padding: 20px 10px 20px 10px;
  line-height: 0;
  border: 4px solid #000;
  border-radius: 10%;
  background-color:#fff;
  display:block;
}
button.nav:hover {
  color: white;
  background-color: black;
}
nav {
  position: fixed;
  font-size: 3em;
  top: 10px;
  left:-250px;
  transition: left .5s; 
  background-color: rgba(255,255,255,0.75); 
  padding: 5px;
  text-align: none;
}
.slide-the-drawer {
  left: 20px;  
}
#main-navbar {
  background: magenta;
  opacity: 0.6;
  line-height: 3vw;
  width: 30%;
}
#main-navbar ul {
  margin: 0;
  padding: 0;
}
#main-navbar li {
  display: block;
  padding: 3vw;
  font-size: 1em;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 600px max-width: 768px;) {
  .column {
    width: 50%;
  }
  .fotorama {
    width: 60%;
    margin: -2vw;
  }
  main {
    margin-top:15vw;
  }
  .screen{
    height:auto;
    width: 70%;
  }
  .extra-buttons{
    background-color: none;
    width:60vw;
    margin: 0 auto;
    margin-top:55vw;
  }
  #logo{
    width: 20vw;
  }
} 
}