body {
  background-color: #000;
  color: #fffaf0;
  /* display: none; */
}
body.show {
  display: block;
}

.wrapper {
  max-width: 900px;
}

.main-info {
  font-family: "Roboto Slab", serif;
}

.image-container {
  /*   height: 200px;
  width: 200px; */
}

.image-container img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 360px) {
  /* For mobile phones: */
  .image-container {
    height: 80px;
    width: 80px;
  }
  .image-container img {
    top: -20px;
  }
}

.social-links-container {
  /* width: 200px; */
}

.social-icon {
  height: 14px;
  width: auto;
}

.section-title {
  font-family: "Roboto Slab", serif;
}

.content-container {
  width: 280px;
}

/* animation */
.animate-top {
  animation: slide-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.animate-social-links {
  animation: slide-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s;
}

@media only screen and (min-width: 640px) {
  /* For mobile phones: */
  .animate-social-links {
    animation: slide-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

.animate-work {
  animation: slide-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.1s;
}

.animate-interests {
  animation: slide-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.2s;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}