* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
:root{
    font-size: 62.5%;
}
body, html, input, textarea{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.6rem;
    margin-top: 2rem;
}
html{    
    scroll-behavior: smooth;
}
:target {
    scroll-margin-top: 8rem;
}
img{
    max-width: 100%;
    height: auto;
}
body{
    background: rgb(75,7,152);
    background: linear-gradient(90deg, rgba(42, 7, 83) 0%, rgba(29,20,47,1) 50%, rgb(42, 7, 83) 100%);
}
a {text-decoration: none; cursor: pointer;}
h1{
    font-family: "Inter", sans-serif;
    font-size: 3.2rem;
    font-weight: 400;
    font-style: normal;
    line-height: 4.0rem;
    color: var(--gray-light);
}
h2{
    font-family: "Inter", sans-serif;

    font-size: 2.4rem;
    font-weight: 400;
    font-style: normal;
    line-height: 3.2rem;
    color: var(--gray-light);
}
.text{
    font-family: "Inter", sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    font-style: normal;
    line-height: 3.2rem;
}
p{
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    font-style: normal;
    line-height: 2.4rem;
    color: var(--gray-light);
}
.title{
    font-family: "Josefin Slab", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: 4rem;
    font-weight: 500;
    font-style: normal;
    line-height: 5.6rem;
    color: var(--green);
}
.titleS{
    font-family: "Josefin Slab", serif;
    font-size: 1.6rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6rem;
    color: var(--green);
}
#page{
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    height: 100vh;
}
main{
    text-align: justify;
}
.container{
    padding: 1.6rem;
    margin: 0 auto;
    width: min(121.6rem, 100%);
}

@media (max-width: 1024px) {

    .container {
        padding: 1.6rem; 
        width: min(32rem, 100%);
    }

    #page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body, html {
        overflow-y: auto;
    }

    .container {
        padding: 1rem; 
        width: auto;
    }

    #page {
        grid-template-columns: 1fr;
    }

}
@media (max-width: 768px) {
    [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }