.box{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transition: 0.15s;
  /* max-height:80vh;
  height: 80vh; */
  /* margin: 15px; */

  /* border-radius: 8%; */

}

.box:hover{
  border: 7px solid #61AEEE;
}

.catball{
  background-image: url(pics/projects/demoScreenShot.PNG);
}

.catball:hover{
  background-image: url(pics/projects/catballgameplay-crop.gif);
}

.esu{
  background-image: url(pics/projects/ESU3DDemoCrop.png);
}

.esu:hover{
  background-image: url(pics/projects/ESU3DDemoCropped.gif);
}

.supercb{
  background-image: url(pics/projects/coinCollect2.png);
}

.supercb:hover{
  background-image: url(pics/projects/coinCollect2.gif);
}

.eskatedeath{
  background-image: url(pics/projects/LDJAM5.png);
}

.eskatedeath:hover{
  background-image: url(pics/projects/LDJAM5.gif);
}

.siteupdate{
  background-image: url(pics/projects/oldSite.png);
}

.siteupdate:hover{
  background-image: url(pics/projects/newSite.png);
}

.gazetrack{
  background-image: url(pics/projects/gazeTrack2.png);
}

.gazetrack:hover{
  background-image: url(pics/projects/gazeTrack2.gif);
}

.hoverfighter{
  background-image: url(pics/projects/hoverfighter2.png);
}

.hoverfighter:hover{
  background-image: url(pics/projects/hoverfighter2.gif);
}

.vrfortbuilder{
  background-image: url(pics/projects/vrfortbuilder2.png);
}

.vrfortbuilder:hover{
  background-image: url(pics/projects/vrfortbuilder2.gif);
}

.shootduk{
  background-image: url(pics/projects/shootduk.png);
}

.shootduk:hover{
  background-image: url(pics/projects/shootduk.gif);
}

.archeryclub{
  background-image: url(pics/projects/ac_gif_v2.png);
}

.archeryclub:hover{
  background-image: url(pics/projects/ac_gif_v2.gif);
}

.octoeats{
  background-image: url(pics/projects/octoeats.png);
}

.octoeats:hover{
  background-image: url(pics/projects/octoeats.gif);
}

.codequest{
  background-image: url(pics/projects/codecalledquest3.png);
}

.codequest:hover{
  background-image: url(pics/projects/codecalledquest3.gif);
}

.socials{
  margin-top: 3vh;
  text-align: center;
}

.myname{
  color:white;
  font-size: 2em;
  padding: 10vh 0 1vh 0;
}

/* 
.socials>a>i{
  width:80px;
} */

.fa{
  font-size: 2em;
  width:80px;
}

.bluebg{
  background-color: #61AEEE;
}

.nameDiv{
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 50%; */
  padding-bottom: 5vh;
}

.centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* width: 50%; */
}

/* #pic{
  margin-top: 0px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
} */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', sans-serif;
}

header {
  text-align: center;
  color: #61AEEE;
}
a {
  text-decoration: none;
  color: white;
}
h1 {
  margin: 0 0 15px 0;
  font-size: 26px;
}
h2{
  padding-top: 30px;
}
.container-spacing{
  padding-top: 10px;
}
.mypic {
  height: 200px;
  width: 200px;
  /* margin: 0px 0px 220px 0px; */
  border: 7px solid white;
  border-radius: 50%;
}
ul {
  /* margin-left: -10px; */
  /* padding-left: 0px;
  padding-top: 10px;
  padding-bottom: 10px; */
  padding: 10px;
  background: rgba(0,0,0,0.25);
  width: 100vw;
}
li {
  display: inline;
  padding: 0px 10px 0px 10px;

}
#about {
  /* max-width: 500px; */
  padding: 10px;
  margin: 0 auto;
}


footer {
  padding: 0 0 10px 0;
  text-align:center;
}
footer>p{
  /* max-width:500px; */
  display: inline-block;
  margin: 10px 10px 10px 20px;
}
#LI{
  color:black;
}
@media only screen and (max-device-width: 480px) {
  h1 {
	font-size: 60px;
	padding: 5px;
  }
  h2{
    font-size: 60px;
    /* padding: 5px; */
  }
  .myname{
    font-size: 72px;
  }
  li {
	padding: 5px;
	/* display: block; */
  }
  p{
    /* width: 80vw; */
    font-size: 40px;
  }
  #about {
    max-width: 100vw;
    /* padding: 10px;
    margin: 0 auto; */
  }
  .mypic {
    height: 50vw;
    width: 50vw;
    border: 16px solid white;
    /*border-radius: 50%; */
  }

  /* .socials{
    margin-top: 2vh;
    text-align: center;
  } */

  .fa{
    font-size: 5em;
    width:100px;
  }

  .navbar {
    font-size: 42px;
  }
  
}

.navbar {
  position: fixed;
  border-bottom: none;
  transition: .5s;
  text-align: center;
  padding: 0px;

  z-index: 100;

}

.navbar>ul>li>a:hover{
  /* //color:RED; */
  text-decoration: none;
}
/* 
.container-fluid>.nav>li>a {
  font-size: 25px;
} */

/* .container-fluid {
  background-color: #61AEEE;
  width: 100vw;
} */


/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .box{
    height: 705px;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .box{
    height: 225px;
  }
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .box{
    height: 270px;
  }
}