* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  background-color: /*#CD5C5C*/ lightgrey;
  /*font-family: 'Poppins', sans-serif;*/
  font-family: 'Nunito Sans', sans-serif;
}
/*==================================INDEX NAVBAR===============================*/
.navbar {
  display: flex;
  height: 60px;
  max-width: 100%;
  background-color: black;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  /*box-shadow: 5px 1px 20px tan;*/
}

.navbar li{
  display: inline;
  text-transform: uppercase;
}

.navbar a{
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: inline;
  margin: 0 10px;
}

.navbar a:hover{
  border-bottom: 1px solid grey;
}
/*========================CENTER IMAGE IN INDEX ===============================*/
img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  border: 5px solid black;
  border-radius: 300px;
  box-shadow: 150px 50px grey;
  width: 300px;
  height: 300px;
}

/*.board{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  border: solid black 10px;
  border-radius: 15rem;
  box-shadow: 150px 50px grey;
  height: 25px;
  width: 25px;
  align-items: center;
  justify-content: center;
  padding: 10rem;
}*/

.name{
  margin-top: 25px;
  text-align: center;
  color: black;
  text-shadow: .1px .1px white;
}
p{
  text-align: center;
  font-size: 25px;
}


/*===================MEDIA OR BOARD=======================================*/
@media (max-width: 900px){
  img{
    box-shadow: 120px 45px grey;
}
}

@media (max-width: 800px){
  img{
    box-shadow: 110px 40px grey;
}
}
@media (max-width: 700px){
  img{
    box-shadow: 100px 35px grey;
}
}

@media (max-width: 600px){
  img{
    box-shadow: 95px 30px grey;
}
}