@import url('https://api.fonts.coollabs.io/css2?family=Average+Sans&display=swap');
@import url("https://api.fonts.coollabs.io/css2?family=Inconsolata&display=swap");

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --background-col:   #123;
        --container:        #0d1d2d;
        --text-col:         #def;
        --hover-mod:        1.3;
    }
}

/* Light Theme */
@media (prefers-color-scheme: light) {
    :root {
        --background-col:   #def;
        --container:        #d5eaff;
        --text-col:         #123;
        --hover-mod:        0.7;
    }
}


body {
    font-family: "Inconsolata", monospace;
    background: var(--background-col);
}

h1,h2,h3,h4,h5,h6,p,a,button {
    color: var(--text-col);
    font-family: "Inconsolata", monospace;
}
h1 {font-size: 3.0rem}
h2 {font-size: 2.5rem}
h3 {font-size: 2.0rem}
h4 {font-size: 1.5rem}
h5 {font-size: 1.0rem}
h6 {font-size: 0.5rem}

button {
    background-color: var(--background-col);
    padding: 15px 30px;
    border: 3px dashed var(--text-col);
    border-radius: 15px;
    transition-duration: 0.2s;
    font-size: 1.3rem;
}

button:hover {
    cursor: pointer;
    background-color: var(--text-col);
    color: var(--background-col);
    border: 3px solid transparent;
    border-radius: 20px;
    transition-duration: 0.1s;
}

#sparkles {
    position: absolute;
    margin: 0;
}

.default-cursor {
    cursor: default;
}

#name-container {
    padding: 0 30px;
    filter: drop-shadow(0 0 1rem var(--text-col));
    margin: 30px 0;
}

#name {
    font-family: "Average Sans", sans-serif;
}

#page2 {
    margin-top: 20%;
}


.container {
    background-color: var(--container);
    display: inline-block;
    border-radius: 20px;
    margin: 10px;
}

.centred {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.sparkle {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 2;
}

hr {
    width: 40%;
    margin: 20px;
    border: 1px solid var(--text-col);
}