* {
  margin: 0;
  padding: 0;
}

body {
  /*background: url('pexels-photo.jpg');*/
  /*background-color: #DCC7AA;*/
  background-color: #D5D5D5;
  background-size: cover;
  font-family: 'Josefin Sans', sans-serif;
  z-index: -2px;
}

h1 {
  color: white;
  vertical-align: middle;
  font-size: 62px;
  border: 1px solid white;
  padding: 1%;
  /*background-color: #CDCDCD;*/
  background-color: #EEB6B7;
}

h2 {
  color: white;
  vertical-align: middle;
  font-size: 48px;
  border: 1px solid white;
  margin-top: 30px;
  padding: 1%;
  /*background-color: #CDCDCD;*/
  /*background-color: #99D3DF;*/
  background-color: #EEB6B7;
}

a {
    display: flex;
    color: white;
    vertical-align: middle;
    flex-direction: row;
    font-size: 28px;
    /*border: 1px solid white;*/
    margin-top: 30px;
    /*padding: 1%;*/
    list-style: none;
    letter-spacing: 5px;
    margin-left: 10px;
    text-decoration: none;
}


.info {
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: center;
  align-items: center;
  height: 70vh;

}

.links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  -webkit-transition: infoBox all 1s ease;
}

.projects {
  display: flex;
  margin-top: 10px;
}


.game {
  display: flex;
  flex-direction: column;
  /*width: 200px;
  height: 200px;*/
}

/*.magnesium {
  background: url('Magnesium.png');
  width: 300px;
  height: 150px;
}

.chairshare {
  background: url('ChairShare.png');
  width: 300px;
  height: 150px;
}*/

@keyframes infoBox {

}

/* for displpay of new divs do display none and then onClick, display block*/