:root {
    --red: #ffcaca;
    --orange: #ffedc1;
    --yellow: #feffb8;
    --green: #c4ffcb;
    --blue: #add8ff;
    --purple: #ccafe9;
    --pink: #EBADCB;

    --mari-yellow: #ffca2b;
    --mari-pink: #eb2577;
    --mari-dark: rgb(16, 18, 24);
    --mari-med: rgb(36, 39, 46);
    --mari-light: rgb(241, 244, 255);

    --gradient: linear-gradient(45deg, var(--blue), var(--pink));
    --rainbow: linear-gradient(to bottom, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%);
    --rainbow-right: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%);
    --rainbow-diagonal: linear-gradient(125deg, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%);

    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --header-font-family: "Montserrat", sans-serif;
}

body {
    font-family: var(--default-font-family);
    font-size: 18px;

    background-color: var(--mari-dark);
    color: var(--mari-light);

    margin: 0px;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    text-decoration-line: none;
    color: var(--mari-pink);
    
    &:hover {
        color: var(--pink);
    }
}

p {
    margin: 1.5rem auto;
}

h1 {
    font-size: 3.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2.75rem;
    font-weight: bold;
}

h3 {
    font-size: 2rem;
    font-weight: bold;
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
}