@import url("https://fonts.googleapis.com/css2?family=Courgette&family=Fasthand&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");

:root{
  --main-color:#819A9E;
}

.footer-content {
  background-image: url("../blog_bg.jpg");
  height: 450px;
  background-size: auto;
  background-position: center;
}
.footer {
  padding-top: 70px;
  padding-left: 80px;
  padding-right: 115px;
}

.footer-content p {
  font-size: 35px;
  font-family: "nautilus_pompiliusregular";
  color: var(--main-color);
}

.details-content li {
  list-style-type: none;
  padding-top: 8px;
}

.details-content li a {
  font-family: "Nunito", sans-serif;
  text-decoration: none;
  color: white;
  font-size: 1.8rem;
  display: inline-block;
}

.details-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

.details-content li a i {
  color:  var(--main-color);
  padding-right: 10px;
}

hr.line{
  border: 3px solid  var(--main-color);
  margin-top: 2px;
}

.copyright {
  background-color:  var(--main-color);
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.copyright p {
  color: white;
  font-size: 1.5rem;
}

@media screen and (max-width:220px){
  .footer p {
    font-size: 20px;
    text-align: center;
  }
  .footer {
    display: inline;
  }
  hr.line{
    border: 1.5px solid  var(--main-color);
  }
  .details-content li a {
    font-family: "Nunito", sans-serif;
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
  }
  .footer-content{
    width: 100vw;
    height: 340px;
  }
  .copyright{
    width: 100vw;
  }
  .copyright p{
    font-size: 1rem;
  }
}

@media screen and (max-width:300px){
  .footer p {
    font-size: 20px;
    text-align: center;
  }
  .footer {
    display: inline;
  }
  hr.line{
    border: 1.5px solid  var(--main-color);
  }
  .details-content li a {
    font-family: "Nunito", sans-serif;
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
  }
  .footer-content{
    width: 100vw;
    height: 340px;
  }
  .copyright{
    width: 100vw;
  }
  .copyright p{
    font-size: 1.4rem;
  }
}

@media screen and (max-width:600px){
  .footer p {
    font-size: 20px;
    text-align: center;
  }
  .footer {
    display: inline;
  }
  hr.line{
    border: 1.5px solid  var(--main-color);
  }
  .details-content li a {
    font-family: "Nunito", sans-serif;
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
  }
  .footer-content{
    width: 100vw;
    height: 340px;
  }
  .copyright{
    width: 100vw;
  }
  .copyright p{
    font-size: 1.4rem;
  }
}