/*@font-face {
    font-family: "Inter";
    src: url("/assets/inter.ttf")
}*/
@import url("https://rsms.me/inter/inter.css");
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    background-color: black;
    & > .section {
        position:relative;
        width: 100%;
    }    
}
code {
    /* By default, most browsers render monospace text at a reduced size. If you want your monospace text to be readable, set its font family to monospace, monospace. */
    /* https://seirdy.one/posts/2020/11/23/website-best-practices/#monospace-handling */
    font-family: monospace, monospace;
}
#hero {

    /* this is super stupid but it allows me to blur it */

    & > .bkg {
        background: #000;
        position: absolute;
        width: 100%;
        height: 100%;
        /*left:20%; top: -20%;*/
        content: "";
        filter: brightness(65%);
        z-index: -1;

        & > img {
            position:absolute;
            left: 30%;
            top: -10%;
            width: 100%;
            height: 100%;
            object-fit:cover;
            object-position: center 50%;
        }
    }

    min-height: 100vh;
    display:flex;
    align-items: center;
    overflow:hidden;

    & > .introduction {
        /*background-color: #303030;*/
        color: #DDDDDD;
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2ch;
        padding-left: 100px;

        & > .blurb {
            width: 300px;
            & > h1, & > p {
                margin: 10px 10px;
            }

            & > p:nth-of-type(2) {
                font-size: small;
                color: #aaaaaa;
                margin-bottom: 15px;
            }

            & > h1 {
                margin: 10px 10px 6px 10px;
                font-family: "Inter Display", "Inter", sans-serif;
                font-optical-sizing: auto;
            }

            & > .actions {
                display: flex;
                justify-content: right;
                gap: 10px;

                & > .action {
                    padding: 6px 15px;
                    color: black;
                    background-color: white;
                    text-decoration: none;
                    font-weight: 400;
                    border-radius: 100px;

                    &.primary {
                        color: white;
                        background-color: #0A84FF;
                    }
                }
            }
        }

        & > ul {
            width: 300px;
            /*background-color: #252525;*/
            padding: 0px 0 0px 0;
            /*border-top: 1px solid #aaaaaa;
            border-bottom: 1px solid #aaaaaa;*/
            /*
            border: solid 1px #aaaaaa;
            border-radius: 1ch;
            background: rgba(0, 0, 0, 0.5);
            padding: 1ch;*/
            margin: 0;
            & > li {
                padding: 10px;
                appearance: none;
                color: #aaaaaa;
                display:flex;
                &::marker {
                    content: "";
                }
                &::before {
                    content: "✓";
                    padding-right: 10px
                }
                &:not(:last-of-type) {
                    border-bottom: 1px solid #aaaaaa;
                }
            }
        }
    }

    @media screen and (max-width: 1280px) {
        & > .bkg {
            & > img { left: 0; top: 0; }
            filter: blur(5px) brightness(35%);
        }
        & > .introduction {
            padding: 0 50px;
            justify-content: center;
            width:100%;
            & > ul {/*
                border: unset;
                border-radius: unset;
                background: unset;
                padding: unset;
                */
                & > li {
                    padding: 10px;

                    &:not(:last-of-type) {
                        border-bottom: 1px solid #aaaaaa;
                    }
                }
            }
        }
    }
}
video {
    position: fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    display:none;
    background: #000;
}