@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: #333;
    color: white;
    width: 50%;
    margin: auto;
}

h1 {
  font-family: "Libre Baskerville", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 1.7rem;
}

h2 {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.5rem;
}

h2::before {
  content: "« ";
}

h2::after {
  content: " »";
}


h3 {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1rem;
}

h4 {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
}

h4::before {
  content: "‹ ";
}

h4::after {
  content: " ›";
}

p {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  
}

.paragraph p {
  text-indent: 25px;
}

a, a:hover, a:link, a:visited {
  font-family: "Raleway", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 18px !important;
  color: #fff;
  cursor: pointer;
}


.icon {
  height: 30px;
  margin-right: 3px;
}

@media (min-width: 770px) {
  p {
   font-size: 18px !important;
  }
}

@media (max-width: 992px) {
  body {
    width:60%;
  }
}

@media (max-width: 576px) {
  body {
    width:80%;
  }
}