html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16pt;
}

body {
    background-color: rgb(14, 14, 14);
    font-family: sans-serif;
}


::selection {
    background-color: rgb(41, 37, 95);
    color: white;
    -webkit-background-clip: none;
    background-clip: none;
    -webkit-text-fill-color: currentColor;
}


.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

/*
    GRADIENTS
*/

.gradient {
    background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214));
    width: fit-content;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* 
    Colours
*/
.white {
    color: white;
}


.link-invisible {
    text-decoration: none;
}

/* 
    SIZES
*/
.huge {
    font-size: 300%;
}

.small-huge {
    font-size: 225%;
}

.biggest {
    font-size: 200%;
}

.bigger {
    font-size: 175%;
}

.medium-size {
    font-size: 150%;
}

.small-size {
    font-size: 90%;
}

.smaller-size {
    font-size: 75%;
}

.smallest-size {
    font-size: 60%;
}


.half-width {
    width: 50%;
}

@media only screen and (min-width: 1000px) {
    .huge {
        font-size: 500%;
    }

    .small-huge {
        font-size: 400%;
    }

    .biggest {
        font-size: 325%;
    }

    .bigger {
        font-size: 200%;
    }

    .medium-size {
        font-size: 175%;
    }

    .small-size {
        font-size: 90%;
    }

    .smaller-size {
        font-size: 75%;
    }

    .smallest-size {
        font-size: 60%;
    }

    .half-width {
        width: 70%;
    }
}

.very-small {
    font-size: 30%;
    font-family: sans-serif;
    color: rgb(107, 107, 107);
}

.small-margin {
    margin: 0.5%;
}

.no-margin {
    margin: 0;
}