html{
    background-color: black;
    color: whitesmoke;
}

p{
    width: 80vw;
    padding-left: 10vw;
    padding-top: 5vw;
    font-size: 3rem;
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
}

a {
    text-decoration: none;
}

.highlight{
    color: red;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.link{
    color: red;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.favi{
    color: red;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.link:hover{
    font-weight: 900;
}

main{
  display: flex;
  flex-direction: column;
}

section{
  width: 70%;
  margin-left: 15%;
  display: flex;
  gap: 20px;
}

aside{
  width: 60%;
  padding-top: 25px;
  order: 1;
}

article{
  width: 40%;
  padding-left: 20px;
  padding-right: 10%;
  order: 2;
}

h2{
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
}

.description{
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
}

img{
  width: 100%;
}


.otdContainer{
  display: flex;
}

.otdItem{
  width: 40vw;
}

.lato-thin {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .lato-black {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .lato-thin-italic {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .lato-light-italic {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .lato-regular-italic {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .lato-bold-italic {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .lato-black-italic {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  
  @media screen and (max-width: 1000px) {

    p{
      font-size: 2rem;
    }

    .link{
      font-weight: 900;
    }

    .highlight{
      font-weight: 900;
    }

    section{
      flex-direction: column;
      gap: 0;
    }

    main{
      gap: 5vh;
    }

    aside{
      width: 100%;
      padding: 0 0 0 0;
      order: 2;
    }

    article{
      width: 100%;
      padding: 0 0 0 0;
      order: 1;
    }

  }