body {
  margin: 0 auto;
  background-color: #c0daff;
}
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;}
}
#HomePage{
  background-color: #c0daff;
  background-image:  url("images/bg.png");
  background-repeat: no-repeat;
  background-size:auto;
  background-position: bottom;
  min-width: 480px;
  min height: 480px;
  width: 100%;
  height: 1000px;
}

#HomePage h1 {
  text-align: center;
  font-size: 100px;
  font-family: "Symtext";
  margin-top: 50 auto;
  color: #ff5555;
}
#HomePage  h2, h3{
  text-align: left;
  font-family:serif;
  font-size: 50px;
  font-family: "Lato-Light";

  margin-top: 50 auto;
  color: #003680;
}
#HomePage .borderBox{
  align-content: left;
  width: 50%;
  padding-left: 350px;
  padding-top: 10px;
  margin-top: 50 auto;
  color: #ff5555;
}



#HomePage .icon img{
  display: block;
margin-left: auto;
margin-right: auto;
float: right;
}

#floatingRightSide{
  overflow: hidden;
  float: right;
}
#floatingRightSide a {
  position: absolute;
  float: right;
  left: 6px;
  padding: 14px 16px;
  width: 128px;
  height:128px;
  color: white;
  font-family: "Symtext";


}
#floatingRightSide img {
  float: right;
}


#gameDevPage{

   background-color: #556cc9;
    min-width: 480px;
    min height: 480px;
    width: 100%;
    height: 100%;
    background-image:  url("images/gdp2.png");
    background-repeat: no-repeat;
    background-size:600px;
    background-position: right;
  }



#gameDevPage .row{
  align-self:   center;
  margin: auto;
  align-items: center;
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 10px;
  padding-left: 50px;
  overflow-y: scroll;
  overflow-x: scroll;

  box-sizing: content-box;

}::-webkit-scrollbar {
width: 0px; }

  #gameDevPage .row scrollbar{
    display: none;
  }

#gameDevPage .column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding:  10px;
  height: 1000px;

}

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


  #gameDevPage .wrapper{
  left:0px;
  margin: 0 auto;
  position: relative;

  }
#gameDevPage .myimg{
  margin-top: 8px;
vertical-align: middle;
  width :250px;
  height: 250px;
}
#gameDevPage .myimg:hover{
  text-align: center;



}

#vertical {
  text-orientation: mixed;
 writing-mode: vertical-rl;
 padding-left: 250px;

}
#gameDevPage  .myTblock{
    opacity: 1;
    width :250px;
  height: 250px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  padding-left: 0px;
  padding-right: 0px;
  visibility: hidden;

  }

#gameDevPage   .wrapper:hover  .myTblock {
  visibility: visible;
  background-color: rgba(85,108,201,1);
  text-align: center;
  font-size: 15px;
  opacity: 0.8;
}



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

  #gameDevPage  .column {
    -ms-flex: 50%;
    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) {

  #gameDevPage  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
  #AboutPage{

     background-color: #e68e35;
      min-width: 480px;
      min-height: 1400px;
      width: 100%;
      height: 100%;
    }

#gameDevPageWrapper{
  background-color: rgba(255, 255, 255, 0.42);
  color:black;
  border-radius: 50px;
  align-items: center;

}
#AboutWrapper{

  background-color: rgba(255, 255, 255, 0.42);
  color:black;
  width: 50%;
  margin: auto;
  border-radius: 50px;

}

#AboutWrapper .Experience {
  font-family: "Symtext";
  font-size:25px;
  width: 50%;
  color:Black;
  margin: auto;
  padding: 20px;

}

#AboutWrapper .Experience h1{
  font-family: "Symtext";
  font-size:25px;
  background-color: #e68e35 ;
width: 100%;
text-align: left;
padding-left: 20PX;
  border-radius: 50px;
}

#AboutWrapper .Experience h2{
font-family: "Lato-Light";

  font-size:20px;

}

#AboutWrapper .Experience p{
font-family: "Lato-Light";

  font-size:15px;

}


#ResPageWrapper
{
  background-color: rgba(255, 255, 255, 0.42);
  background-color: rgba(255, 255, 255, 0.42);
  color:black;
  width: 50%;
  margin: auto;
  border-radius: 50px;
  overflow-y: scroll;
}  ::-webkit-scrollbar {
  display: none;
  }

#ResPageWrapper h1
{      background-color: #481d52 ;
  font-family: "Symtext";
  font-size:25px;
width: 100%;
text-align: left;
padding-left: 20PX;
  border-radius: 50px;

}

#ResPageWrapper  h2{
font-family: "Lato-Light";

  font-size:30px;

}



#ResPageWrapper p
{
  font-family: "Lato-Light";
  color:#301934;
    font-size:25px;

}

















  #SketchBookPage{

     background-color: #dd517e;
      min-width: 480px;
      min height: 480px;
      width: 100%;
      height:  1200px;
      float:right;
    }

    #SketchBookPage h1{
      text-align: center;
      padding: 32px;
      color:white;
        font-family: "Symtext";
    }



        /* This CSS will be applied only to phones and other small devices. */


    #SketchBookPage .row{
      box-sizing: content-box;
      align-self:   center;
      margin: auto;
      align-items: center;
      display: -ms-flexbox; /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap; /* IE10 */
      flex-wrap: wrap;
      padding: 3px;
      overflow-y: scroll;


    }::-webkit-scrollbar {
width: 0px; }

      #SketchBookPage .row scrollbar{
        display: none;
      }

    #SketchBookPage .column {
      -ms-flex: 25%; /* IE10 */
      flex: 25%;
      height: 1000px;
      width: 50%;
      padding: 0 4px;

}

  #SketchBookPage .column ::-webkit-scrollbar {
  display: none;
}

  #SketchBookPage img{
    margin-top: 8px;
    vertical-align: middle;
    width: 60%;
  }

  @media screen and (max-width: 400px) {
  #SketchBookPage  .column {
      -ms-flex: 50%;
      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: 300px) {
  #SketchBookPage  .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }


    #ResearchPage{

       background-color: #481d52;
        min-width: 480px;
        min-height: 1400px;
        width: 100%;
        height: 100%;
      }