@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Poppins&family=Roboto&display=swap');

html,body {
    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;

    background-color: transparent;
    color: white;
}

.overlayer {
    background: linear-gradient(5deg, rgba(11,29,38,1) 0%, rgba(7,9,25,1) 43%);

    top: 0;
    left: 0;

    z-index: -1;
    position: fixed;
    height: 100vh;
    width: 100vw;
}

a {
    text-decoration: none;
    color: rgb(80, 84, 146);
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

ul,ol {
    padding: 1rem;
    margin: 0;
}

@media screen and (max-width: 1200px) {
    div.lists {
        padding: 1rem;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        margin-left: auto;
        margin-right: auto;
        max-width: 450px;
    }

    div.list {
        margin-bottom: 1rem;
        margin-top: 1rem;

        max-width: 450px;
    }

    div.list h3 {
        border: 1px solid white;
        border-bottom: transparent;

        position: relative;
        top: 1px;

        z-index: 10;

        font-size: 1.2rem;
        text-shadow: 1px 1px black;

        background-color: #090e1f;

        width: fit-content;

        padding: 0.7rem 1rem 0.2rem 1rem;
    }

    div.list_content {
        padding: 1rem;
        padding-top: 0;
        padding-bottom: 0;

        box-sizing: border-box;

        border: 1px solid white;
        background-color: #090e1f;

        box-shadow: rgba(0, 0, 0, 0.342) 5.4px 5.4px 5.2px;
        }

    div.list_content ul li,div.list_content ol li {
        padding: 2px;
    }

    div.list_content li b {
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1200px) {
    html,body {
        font-size: 1.1rem;
    }

    div.lists {
        display: grid;

        margin: 1rem;

        padding-bottom: 3rem;

        box-sizing: border-box;

        gap: 4rem;

        grid-template-areas:
        "about hobbies sites"
        "languages socials .";

        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50% 50%;
    }

    div.list h3 {
        border: 1px solid white;
        border-bottom: transparent;

        position: relative;
        top: 1px;

        z-index: 10;

        font-size: 1.2rem;
        text-shadow: 1px 1px black;

        background-color: #090e1f;

        width: fit-content;

        padding: 0.7rem 1rem 0.2rem 1rem;
    }

    div.list_content {
        padding: 1rem;
        padding-top: 0;
        padding-bottom: 0;

        box-sizing: border-box;

        border: 1px solid white;
        background-color: #090e1f;

        box-shadow: rgba(0, 0, 0, 0.342) 5.4px 5.4px 5.2px;

        height: 90%;
    }

    div.list:nth-child(1) {
        grid-area: about;
    }

    div.list:nth-child(2) {
        grid-area: hobbies;
    }

    div.list:nth-child(3) {
        grid-area: languages;
    }

    div.list:nth-child(4) {
        grid-area: sites;
    }

    div.list:nth-child(5) {
        grid-area: socials;
    }

    div.list ul li,div.list ol li {
        padding-bottom: 1rem;
    }

    div.list ul,div.list ol {
        padding-bottom: 0;
    }
}