body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

main {
    max-width: 1280px;
    padding: 20px;
    margin: auto;

    background-color: white;
}

h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;

    padding: 10px;
}

h1 {
    font-size: 1.5em;

    text-align: center;
    transform-origin: center;
    animation: load 1s;
    
    transition: 1s;
}

h2 {
    font-size: 1.3em;
}

h1:hover {
    transform: rotate(360deg);
}

.audioClips {
    margin-top: 20px;
}

.videoClips {
    margin-top: 20px;
}

audio {
    opacity: 1;
    width: 500px;
    transition: opacity 1s, width 1s;
}

video {
    display: block;
    margin-top: 10px;
    width: 500px;
    
    transform-origin: center;
    transition: all 1s;
}
video:hover {
    transform-origin: left;
    transform: scale(1.5);
    /* opacity: 0.9; */
}

.messageBar {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    box-sizing: border-box;
    height: 50px;

    background-color: red;
    color: white;

    text-align: center;
    font-size: 1.2em;
    font-weight: bold;

    transform: translateY(-100%);
    transition: transform 1s;
}

.messageBar.shown {
    transform: translateY(0);
}


@keyframes load {
    0% {
        opacity: 0;
        transform: scale(4) rotate(720deg);
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

#cursorfollow > *::before {
    content: "";
    position: absolute;
    transform: translate(calc(var(--x) - 12.5px), calc(var(--y) - 62.5px)) scale(var(--size));
    transition: var(--delay);

    width: 25px;
    height: 25px;
    border-radius: 100%;

    pointer-events: none;

    z-index: 10;
    border: 2px solid black;
}

#cursorfollow > *::after {
    content: "";
    position: absolute;
    transform: translate(calc(var(--x) - 12.5px), calc(var(--y) - 62.5px)) scale(calc(var(--size) * 0.5));
    transition: calc(var(--delay) + 100ms);

    width: 25px;
    height: 25px;
    border-radius: 100%;

    pointer-events: none;

    z-index: 10;
    border: 2px solid black;
}

/* #cursorfollow2 {
    content: "";
    position: absolute;
    transform: translate(calc(var(--x) / 2), calc(var(--y) / 2));
    transition: 200ms;

    width: 25px;
    height: 25px;
    border-radius: 100%;

    pointer-events: none;

    z-index: 10;
    border: 2px solid red;
} */