a, u {
  text-decoration: none;
  color: black;
}

body {
  font-family: Roboto, Arial;
}

.preview-button {
  display: flex;
  background-color: rgb(200, 238, 250);
  border: none;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  
  width: 275px;
  height: 100px;
  justify-content: center;
}

.preview-button:hover {
  cursor: pointer;
  box-shadow: inset 0px 0px 8px 2px rgba(0, 0, 0, 0.15);
  
}

.preview-button-content {
  width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


.lesson-date  {
  margin-top: 8px;
  font-weight: bold;
  font-size: 12px;
}

.lesson-desc {
  margin-top: 12px;
}

.teacher-container {
  margin-left: 10px;
  border-left: 1px solid rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
}

.teacher-name {
  margin-left: 10px;
  margin-top: 8px;
  font-weight: bold;
  font-size: 12px;
}

.teacher-picture-container {
margin-left: 10px;

}

.teacher-picture {
  height: 70px;
  border-radius: 35px;

}

.main {
  padding-top: 100px;
  padding-left: 175px ;

}

.summary {
  display: flex;
  font-size: 24px;letter-spacing: normal;
  font-weight: bold;
}

.grid {
  display: grid ;
  grid-template-columns: 300px 300px;
  row-gap: 25px;
  column-gap: 25px;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1201px) and (max-width: 1500px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1500px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.profile-grid {
font-family: Arial, Helvetica, sans-serif;
}