body {
    font-family: Rubik, Calibri, sans-serif;
}
#main {
    display: flex;
    margin: 24px;
    padding: 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100vh - 48px);
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #f7f7f7;
    min-height: fit-content;
    min-width: fit-content;
    overflow: auto;

    h1 {
        font-size: 2.8em;
        color: #6195da;
        margin: 0;
        text-align: center;
    }

    .seperator {
        width: 48px;
        color: #666;
        height: 2px
    }

    img {
        width: 75%;
        max-width: 720px;
        border-radius: 6px;
        box-shadow: 0 0 6px #0000006a;
        margin: 24px
    }

    .links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        width: 75%;
        max-width: 720px;
        background-color: #0000000a;
        box-sizing: border-box;
        border-radius: 6px;
        padding: 12px;

        a {
            text-align: center;
            font-size: 1.2em;
            padding: 8px;
            color: #333;
            text-decoration: none;
            border-radius: 6px;
            transition: .25s ease-in-out;
        }
        
        a:hover {
            transition: none;
            background-color: #0000000c;
        }

        cursor: pointer;
    }
}

@media (max-width: 540px) {
    #main {
        .links {
            flex-direction: column;
            
            a {
                padding: 8px 0;
                width: 100%;
            }
        }
    }
}