@font-face {
    font-family: UniversLTStd-LightCondensed;
    src: url(media/fonts/univers-lt-std/UniversLTStd-BoldCnObl.otf) format("opentype");
}

@font-face {
    font-family: UniversLTStd-BlackOblique;
    src: url(media/fonts/univers-lt-std/UniversLTStd-XBlackObl.otf) format("opentype");
}

/* Start actual CSS */ 

:root {
    --x: 0;
    --y: 0;
}

body {
    background-color: rgb(144, 192, 231);
    font-family: "UniversLTStd-BlackOblique", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
.offset-1rem-left {
    margin: 1rem 1rem 0 1rem;
}

section a {
    text-decoration: none;
    color: rgb(159, 160, 255);
}

a {
    text-decoration: none;
    color: rgb(0, 138, 138);

    transition: color 0.25s;
}

hr {
    border: 5px solid rgb(149, 195, 255);
    border-radius: 5px;
}

main > section {
    display: flex;
    margin: 1rem 2rem 1rem 2rem;
    width: auto;

    background: rgb(255 255 255 / 50%);
    border: 5px solid rgb(51, 135, 196);
    border-radius: 15px;

    box-shadow: 4px 3px 0px 0px rgb(51, 135, 196);

    transition: box-shadow 0.5s, margin-bottom 0.3s, transform 0.3s;
}

footer {
    display: flex;
    align-items: stretch;
    margin-left: 2rem;
}

footer section {
    flex: 1;
    margin: 0 2rem;

    background: rgb(255 255 255 / 50%);
    border: 5px solid rgb(51, 135, 196);
    border-radius: 15px;
    box-shadow: 4px 3px 0px 0px rgb(51, 135, 196);

    transition: box-shadow 0.8s, margin-bottom 0.3s, transform 0.3s;
}

footer section hr {
    width: 95%;
}

#main-header {
    color: rgb(51, 135, 196);
    margin: 1rem;
}

.top-bar {
    display: flex;
    margin-top: rem;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

button {
    width: auto;
    padding: 0.75rem;

    background: rgb(255 255 255 / 50%);
    border: 5px solid rgb(51, 135, 196);
    border-radius: 15px;

    box-shadow: 4px 3px 0px 0px rgb(51, 135, 196);

    transition: box-shadow 0.3s, padding 0.3s, transform 0.3s, margin-bottom 0.3s;
}

button a {
    color: rgb(108, 169, 255);
}

.svg {
    width: 1.5rem;
    object-fit: contain;
    display: block;

    filter: drop-shadow( 2px 3px rgba(0, 0, 0, 0.178));
}

#username {
    font-family: monospace;
    font-size: 2rem;
    color: rgb(30, 83, 121);

    transition: color 0.3s, text-shadow 0.3s;
}

#notif-output {
    display: block;
}

#top-bar-navigation {
    display: flex;
    gap: 1rem;
    margin: 0 1rem 0 auto;
}

#top-bar-navigation p {
    margin: 0;
}

#contact-section {
    margin: 0;
}

#contact-section button {
    margin-bottom: 1rem;
}

.font-light {
    font-family: "UniversLTStd-LightCondensed", Arial, Helvetica, sans-serif;
}

/* Hover anims and FX */

section:hover {
    box-shadow: calc(var(--x) * 0.02px - 10px) calc(var(--y) * 0.02px + 5px) 0 0 rgb(44, 79, 255);

    margin-bottom: 0.5rem;

    transform: translate(calc(var(--x) * 0.02px - 20px),
            calc(var(--y) * 0.02px - 10px));
}

button:hover {
    box-shadow: 6px 8px 0px 0px rgb(159, 215, 255);
    padding: 0.8rem;

    transform: translate(calc(var(--x) * 0.05px - 60px),
            calc(var(--y) * 0.01px - 5px));

    transition: box-shadow 0.3s ease-in-out, padding 0.3s, transform 0.3s, margin-bottom 0.3s;
}

button:active {
    box-shadow: 7px 9px 0px 0px rgb(180, 230, 255);
    background-color: rgb(177, 241, 255);
    padding: 0.9rem;

    transition: box-shadow 0.15s, padding 0.15s, background-color 0.15s;
}

a:hover {
    color: rgb(0, 186, 186);
    cursor: copy;

    transition: color 0.25s;
}

button a:hover {
    color: rgb(159, 160, 255);
}

#contact-section button:hover {
    transform: translate(calc(var(--x) * 0.05px - 10px), calc(var(--y) * 0.01px - 5px));

    transition: box-shadow 0.3s ease-in-out, padding 0.3s, transform 0.3s, margin-bottom 0.3s;
}

#username:hover {
    color: rgb(43, 120, 175);
    text-shadow: 0px 0px 10px rgb(128, 219, 255);

    transition: color 0.3s, text-shadow 0.3s;
}

@media screen and (max-width: 768px) {}