@import url('https://fonts.googleapis.com/css?family=Roboto');


body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efc5ca+0,d24b5a+50,ba2737+51,f18e99+100;Red+Gloss+%233 */
  background: #efc5ca; /* Old browsers */
  background: -moz-linear-gradient(top, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 ); /* IE6-9 */
  overflow: hidden;
}

.teacher {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  align: center;
  justify: center;
  background-color: rgba(255, 255, 255, 0.5);
}

#teacher {
  transition-duration: 0.3s;
  transform: scale(0.5);
  border-radius: 20%;
  box-shadow: 0px 0px 32px 4px rgba(0,0,0,0.25);
}

#teacher::after {
  box-shadow: 10px 20px 32px 4px rgba(0,0,0,0.25);
}

.teacher:hover #teacher{
  transform: scale(1);
  border-radius: 15%;


}