body.show {
  opacity: 1;
  transition: ease 1s opacity;
}

p {
  line-height: 1.4;
}

a {
  text-decoration: none;
  color: #0070c9;
  line-height: 1.5;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.container {
  display: flex;
}

.about {
  box-shadow: rgba(0, 0, 0, 0.36) 0px 0px 100px 66px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.about, .slides {
  width: 50%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.about .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
}

.about .center h2 {
  color: #888;
}

.line {
  width: 5rem;
  height: 2px;
  background-color: #333;
}

.slides {
  background-image: url('./public/cover.png');
  background-size: cover;
  background-position: center;
}

.meImg {
  background-image: url('./public/prof.jpg');
  background-size: cover;
  background-position: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
}

keyframes imageAnimation { 
  0% { opacity: 0;
  -webkit-animation-timing-function: ease-in; }
  8% { opacity: 1;
       -webkit-animation-timing-function: ease-out; }
  17% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}

@media screen and (max-width: 1100px) {
  .container {
    display: block;
  }
  .about {
    width: 100%;
    height: 80vh;
    position: relative;
  }
  .slides {
    width: 100%;
    height: 20vh;
  }
  .about .center {
    position: relative;
    transform: translate(-50%, calc(-50% - 70px));
    max-width: 90vw;
    box-sizing: border-box;
  }
}