body {
  margin: 0 auto;
  background-color: #556cc9;
}
html {
  scroll-behavior: smooth;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}


/* Add a black background color to the top navigation */
.#myNav {
  overflow: hidden;
  float: left;
}


/* Style the links inside the navigation bar */
#myNav a {
  position: absolute;
  float: left;
  left: 60px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 19px;
  width: 190px;
  height:100px;
  color: white;

  font-family: "Symtext";
  transform: skew(-20deg);


}
#floatingRightSide img {
  float: right;
}

/*font credit: Pixel Sagas Freeware Fonts / */
@font-face {
font-family: "Symtext";
src: url("fonts/Symtext.ttf");
}
@font-face {
font-family: "NewAthleticM54";
src: url("fonts/NewAthleticM54.ttf");
}
@font-face {
font-family: "Lato-Light";
src: url("fonts/Lato-Light.ttf");
}



/* Change the color of links on hover */
#myNav a:hover {
  color: black;
  animation-name: MoveRight;
  animation-duration: 6s;
  animation-iteration-count: 1;

}

#myNav:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */
  animation-iteration-count: 0;
}


/* Add a color to the active/current link */


#homeButton {
  top: 20px;
  background-color: #c0daff;
  color: #90F1EF;

}

#homeButton a:hover {
  background-color: #c0daff;
  color: #90F1EF;

}


/* The about link: 20px from the top with a green background */
#gameDesignButton {
  top: 90px;
  background-color: #556cc9;
  color: #90F1EF;

}
#gameDesignButton   a:hover {
  background-color: #556cc9;
  color: black;
  animation-name: MoveRight;
  animation-duration: 6s;
  animation-iteration-count: 1;

}
#gameDevImage{
  top: 70px;
  width:  110px;
  height:110px;
  left: 60px;
  position: absolute;

}
.GamedesignButtonAnimateOnClick{
  animation-name: expandGDB;
  animation-duration: 10s;
  animation-iteration-count: 1;

}

#aboutButton {
  top: 160px;
  background-color: #e68e35; /* Blue */
  color: #90F1EF;

}


#sketchboookButton {
  top: 230px;
  background-color: #dd517e; /* Red */
  color: #90F1EF;

}

#researchButton {
  top: 290px;
  background-color: #481d52 /* Light Black */

}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


@keyframes MoveRight {
  0%   { left:100px; }
  25%  { left:200px;}
  50%  {left:200px; }
  75%  { left:250px;}
  100% {left:250px; }
}


@keyframes expandGDB {
  0%   { }
  25%  { }
  50%  {}
  75%  { }
  100% { background-color: #FF7094;}
}






#gameDevPage{

   background-color: #556cc9;
    min-width: 480px;
    min height: 480px;
    width: 100%;
    height: 1200px;
    background-image:  url("images/gdp.png");
    background-repeat: no-repeat;
    background-size:auto;
    background-position: right;
    scrollbar-width: none;  /* Firefox */

  }

#gameDevPage.bar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#gameDevPage {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

  #gameDevPage .sampleGame{



  }
#video {
  width: 560px; /* you have to have a size or this method doesn't work */
     height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

     top: 0; right: 0; /* confuse it i guess */
     bottom: 0; left: 0;
     margin: auto; /* make em equal */

}

  #wrapper{
     margin: 0 auto;
     width: 50%;
     height: 100%;
     min-width: 30%;
     background-color: rgba(255, 255, 255, 0.42);
     border-radius: 25px;
     overflow-y: scroll;
     overflow-x: scroll;


  }

  ::-webkit-scrollbar {
  display: none;
  }

  #gameDevPage  h1{

    padding-top: 15px;
    font-family: "Symtext";
    text-align: center;
    font-size: 35px;
    background-color: #003680;
  }

  #gameDevPage p{
    padding-left: 30px;
    padding-right: 30px;
    font-family: "Lato-Light";
    text-align:justify;
    font-size: 25px;
    color: #191970;
  }  #gameDevPage img {

    align-self: center;
    width: 48%;
    padding-top: 8px;
    padding-right: 5px;
    float: left;
    }


/* code from w3 wschools */


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}