/* Fonts and colors */
body {
  color: #282923;
  font-size: 18px;
  line-height: 1.6;
  font-weight: lighter;
  font-family: 'B612', serif;
  margin: 0;
}

main {
    width: 45vw;
    margin: 5vw auto;
}



h1, h2 {
  font-family: 'B612', sans-serif;
  font-weight: bold;
}
h2 {
  color: #FFFFFF;
  font-weight: normal;
}
a {
  text-decoration: none;
  color: #4352A1;
}

/* Custom design */
.banner {
  background-image:
  linear-gradient(135deg, rgba(0,0,0,0.8) -20%, rgba(0,0,0,0.2) 71%),
  url("https://raw.githubusercontent.com/x8BitRain/medium-article-copy/master/img/head.jpg");
  background-size: cover;
  color: white;
  padding: 70px 0;
}
.banner h1 {
  font-size: 40px;
}
.banner p {
  font-size: 30px;
  font-style: italic;
  font-weight: lighter;
  opacity: 0.8;
}
.container {
  width: 45vw;
  margin: 5vw auto;
}
.link-medium {
  background-image: linear-gradient(to bottom, rgba(233, 253, 240, 1), rgba(233, 253, 240, 1));
  color: #636363;
  font-weight: lighter;
  font-size: 25px;
  font-style: italic;
}
.link-medium:hover {
  background-image: linear-gradient(to bottom, rgba(125, 255, 179, 1), rgba(125, 255, 179, 1));}
}

/* Media queries */
@media(max-width: 900px) {
  .container {
    width: 700px;
  }
}
@media(max-width: 750px) {
  .container {
    width: 450px;
  }
}
@media(max-width: 500px) {
  .container {
    width: 350px;
  }
  .banner {
    padding: 10px 0;
  }
  .banner h1 {
    font-size: 30px;
  }
  .banner p {
    font-size: 20px;
  }
}

.section {
  color: #539492;
}

.link {
  position: relative;
}

.link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FF3C4F;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.link:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}