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

#start
{
  width: 100%;
  border: solid;
}

/* make a condition here for when the screen size is a phone to change the flex direction to column */
.container
{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 50px;
}

.box
{
  width: 15%;
  color: black;
  font-size: 2vw;
  text-decoration: underline;
  padding: 10px;
  border: 6px solid black;
  text-align: center;
  transition: all 0.4s ease;
}

.box a
{
  color: inherit;
}

#me
{
  margin-top: 20px;
  animation-name: imagememove;
  animation-duration: 4s;
  position: relative;
}

@keyframes imagememove
{
  0% {top:-250px}
  100% {top:0px}
}

@keyframes move1
{
  0% {left:-250px}
  100% {left:0px}
}

@keyframes move2
{
  0% {bottom:-250px}
  100% {bottom:0px}
}

@keyframes move3
{
  0% {right:-250px}
  100% {right:0px}
}

@keyframes colors
{
  0% {background-color: white; color: black;}
  100% {background-color: black; color: white;}
}

.box:hover
{
  color: white;
  background-color: black;
}

#mbox1
{
  animation-name: move1;
  animation-duration: 4s;
  position: relative;
}

#mbox2
{
  animation-name: move3;
  animation-duration: 4s;
  position: relative;
}

#mbox3
{
  animation-name: move2;
  animation-duration: 4s;
  position: relative;
}

.imgcenter
{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

footer{
  text-align: center;
  padding-top: 90px;
}