body {
  margin: 0;
}

.container {
  display: grid;
  /* grid-gap: 1em; */
  height:100vh;
  grid-template-columns: .5fr 1.4fr .5fr;
  grid-template-areas: "a b c"
}
/* ----------FIRST BOX----------- */

/* #profile-button{
  background-color: #49B1E0;
  font-size: 25px;
  font-weight: bold;
  width:100%;
  margin-bottom:20px;
} */


#matches{
  font-size:10px;
  height:100vh;
  grid-area: a;
  background-color: #F5F5F5;
  box-shadow: 1px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#match-images{
  text-align: center;
}



#matches img {
  margin: 10px;
  margin-right: none;
  border-radius: 50%;
  /* margin-left: 20px; */
  height: 110px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#matches img:hover{
  transition: .5s;
  box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* ----------SECOND BOX----------- */


.tutees{
  text-align: left;
  height:100vh;
  grid-area: b;
}

.tutees h1{
    font-size: 20px;
}

#left-arrow{
  height: 50px;
  float:left;
  margin-left: 50px;
}

#right-arrow{
  height: 50px;
  float:right;
  margin-right: 50px;
}

.arrows:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.profile-box{
  background-color: #F8F8F8	;
  width:50%;
  height:80%;
  /* border: grey solid 2px; */
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.profile-box img {
    width:100%;
}

.profile{
  margin-left: 20px;
  margin-right: 20px;
}


/* ----------THIRD BOX----------- */
#info{
  height:100vh;
  grid-area: c;
  background-color: #F5F5F5;
  box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#info h1{
  font-size: 20px;
}

#info-image{
  width: 100%;
}

#info-text{
  margin-left: 20px;
  margin-right: 20px;

}

#info-text p{
  font-size: 20px;

}

/* ----------OTHER----------- */

* {
  box-sizing: border-box;
}

.box {
  padding: 1em;
}