/* This style for main  */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/playfairdisplay/v37/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

main{
    background-attachment: fixed;
    height: 100dvh;
    background-size: cover;
    padding: 0rem;
    color: white;
    display: flex;
}
h1{
    font-family:  'Oswald', monospace;
    padding-top: 4rem;
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: 0.5rem;
    font-variant: small-caps;
}
h2{
    font-family: 'Inter', monospace;
    font-weight: 300;
    margin-top: 0px;
    font-size: 1rem;
}
p{
    font-family: 'Inter';
    font-weight: 300;
    max-width: 30rem;
    margin-top: auto;
}
.text-bg{
    background-color: rgba(0, 0, 0, 0.3);
}
.button{
    border: none;
    font-family: 'Inter', monospace;
    text-transform: capitalize;
    color: black;
    font-size: 1rem;
    padding: 1.35rem;
    border-radius: 2rem;
    background-image: linear-gradient(180deg, #3be489, #34c671);
    max-width: max-content;
    box-shadow: 1px 1px 5px black;
    transition: 200ms;
}
.button:hover{
    color: white;
    background-image: linear-gradient(180deg, #1f7246, #176437);
}
.button-container{
    padding: 0.5rem;
    margin-bottom: 10vh;
}
/* small screen */
@media only screen and (max-width: 1100px){
    main {
        background-image: url(img/profile-portrait.webp);
        align-items: center;
        flex-direction: column;
        align-items: center;
    }
    main * {
        margin-right: 0;
        text-align: center;
    }
    h1{
        margin-bottom: 0px;
    }
}
@media only screen and (min-width: 1100px){
    main{
        background-image: url(img/profile.webp);
        flex-direction: column;
        align-items: end;
        text-shadow: 2px 2px 5px black;
    }
    h1{
        margin: 0 5rem;
    }
    h2{
        margin-right: 5.5rem;
    }
    p{
        text-align: right;
        margin-right: 5.5rem;
    }
    .button-container{
        margin-right: 5.5rem;
    }
}