@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&family=Roboto+Mono:wght@100;200;300;400&family=Roboto:wght@100;300;400;500&family=Sixtyfour&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'sans-serif';
    --padding: 1em;
    --border-rad: 2em;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
    color: white;
}

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

header {
    position: absolute;
    width: 100%;
    border-bottom: 2px solid gray;

    nav {
        display: flex;
        padding: .5em 1em 0;

        >a {
            text-decoration: none;
            display: block;
            font-size: 1.2rem;
            padding: .5em .5em;

            &:visited,
            &:link {
                color: inherit;
            }
        }
    }
}

main {
    padding: var(--padding);
}

.page {
    height: calc(100vh - calc(2 * var(--padding)));
}

.h-position {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 800px) 1fr;
    /* grid-template-columns: minmax(0, 1fr) clamp(320px, 80vw,800px) minmax(0, 1fr); */
}

.banner {
    display: grid;
    grid-column: 2 / 3;
    color: black;
    /* padding: 1em; */
    height: 100%;
    grid-template-rows: 1fr auto .5fr;

    >.info {
        grid-row: 2 / 3;
        padding: 2em;

        >h1 {
            /* font-size: 200%; */
            /* font-size: 5vw; */
            font-size: clamp(2rem, 5vw, 3.5rem);
            line-height: 1.1;
            letter-spacing: -2px;
        }

        >p {
            font-size: 120%;
            letter-spacing: -1px;
            padding-bottom: 1em;
        }
    }

}

.center-btn {
    display: flex;
    justify-content: center;
}

.button {
    padding: 1em;
    /* border: 2px solid black; */
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    background-color: rgb(179, 74, 235);
    /* font-weight: bold; */
    font-size: 1em;

    &:visited,
    &:link {
        color: rgb(251, 251, 251);
    }
}

.gap {
    display: grid;
    gap: 1em;
}

.info-section {
    /* min-height: 400px; */
    /* padding: 1em; */
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    >div {
        display: grid;
        place-content: center;
    }

    >.text-content {
        padding: 1em 2em;
        background-color: rgba(0, 0, 0, 0.293);
        border-radius: 2em;
    }

    h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1.1;
        letter-spacing: -2px;
    }

    p {
        font-size: 120%;
        letter-spacing: -1px;
        padding-top: .5em;
    }

    .basis {
        flex-basis: 50%;
    }
}

.info-section-alt {
    display: grid;
    grid-template-columns: auto;
    place-items: center;

    >div {
        display: grid;
        place-items: center;
    }

    >.text-content {
        padding: 1em 2em;
        background-color: rgba(0, 0, 0, 0.293);
        border-radius: 2em;
    }

    h1 {
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1.1;
        letter-spacing: -2px;
    }

    p {
        font-size: 120%;
        letter-spacing: -1px;
    }

    p:nth-of-type(1) {
        padding-top: .5em;
    }

    .a {
        grid-row: 2 / 3;
    }

    .b {
        grid-row: 1 / 2;
    }
    .span-w {
        width: 100%;
    }
}

.radial-bg {
    background: radial-gradient(circle, #e66465, #9198e58e 20%, #dedee600 40%);
    height: 350px;
    aspect-ratio: 1;
}

footer {
    padding: var(--padding);
    display: flex;

    /* padding-left: 4em; */
    >.contact-info {
        display: flex;
        flex-direction: column;
        gap: .5em;
        padding: 1em 0 1em 1em;
        border-left: 1px white solid;
    }

    /* >.contact-info {
        display: inline-grid;
        grid-template-columns: 2em auto;
    } */
}

.insert-svgs {
    >*::before {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        top: .2em;
        width: 2em;
    }

    >.email::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS4yZW0iIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBzdHlsZT0iZmlsbDp3aGl0ZTsiIGQ9Ik02NCAxMTJjLTguOCAwLTE2IDcuMi0xNiAxNnYyMi4xTDIyMC41IDI5MS43YzIwLjcgMTcgNTAuNCAxNyA3MS4xIDBMNDY0IDE1MC4xVjEyOGMwLTguOC03LjItMTYtMTYtMTZINjR6TTQ4IDIxMi4yVjM4NGMwIDguOCA3LjIgMTYgMTYgMTZINDQ4YzguOCAwIDE2LTcuMiAxNi0xNlYyMTIuMkwzMjIgMzI4LjhjLTM4LjQgMzEuNS05My43IDMxLjUtMTMyIDBMNDggMjEyLjJ6TTAgMTI4QzAgOTIuNyAyOC43IDY0IDY0IDY0SDQ0OGMzNS4zIDAgNjQgMjguNyA2NCA2NFYzODRjMCAzNS4zLTI4LjcgNjQtNjQgNjRINjRjLTM1LjMgMC02NC0yOC43LTY0LTY0VjEyOHoiLz48L3N2Zz4=");
    }

    >.location::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS4yZW0iIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBzdHlsZT0iZmlsbDp3aGl0ZSIgZD0iTTIxNS43IDQ5OS4yQzI2NyA0MzUgMzg0IDI3OS40IDM4NCAxOTJDMzg0IDg2IDI5OCAwIDE5MiAwUzAgODYgMCAxOTJjMCA4Ny40IDExNyAyNDMgMTY4LjMgMzA3LjJjMTIuMyAxNS4zIDM1LjEgMTUuMyA0Ny40IDB6TTE5MiAxMjhhNjQgNjQgMCAxIDEgMCAxMjggNjQgNjQgMCAxIDEgMC0xMjh6Ii8+PC9zdmc+");
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .page {
        height: 600px;
    }
}

@media (min-width: 790px) {
    .info-section {
        flex-direction: row;
        align-items: center;
    }

    .info-section-alt {
        grid-template-columns: 50% 1fr;

        .a,
        .b {
            grid-row: 1 / 2;
        }
    }
}