page{
  display: flex;
  flex-direction: column;
}
.body{
  flex: 1 1 10px;
  height: 10px;
  background:#56A9EF;
  color: white;
  padding-top: 12px;
}
.course-name{
  font-size: 20px;
  font-weight: bold;
  padding: 8px 0;
}
.avatar{
  width: 58px;
  height: 58px;
  margin: 6px;
}
.school{
  font-size: 13px;
}
.course-display{
  flex: none;
  align-items: center;
}
.invite-display{
  align-items: center;
  background: white;
  width: 240px;
  margin: 8px auto;
  border-radius: 6px;
  padding: 20px 16px;
}
view.invite-code{
  color: #0080f0;
  font-size: 16px;
  text-decoration: underline;
  font-weight: bold;
}
image.invite-code{
  width: 200px;
  height:200px;
  margin: 10px 0;
}
.invite-display>button{
  color: #0080f0;
  border-color: #0080f0;
  border-radius: 32px;
  height: 32px;
}

.join-button{
  color: #0080f0;
  font-weight: bold;
  margin: 12px auto;
  width: 140px;
  border-radius: 36px;
}