/* Colours */

:root {
    --purple: #662E9B;
    --yellow: #FFD854;

    --pink: #F379B4;
    --blue: #70b0f8;
    --magenta: #F3559C;
    --green: #52D3B0;
    --beige: #FFBEA5;
    --seafoam: #DDFFF7;
}

.pink { color: var(--pink); }
.blue { color: var(--blue); }
.yellow { color: var(--yellow); }
.magenta { color: var(--magenta); }
.green { color: var(--green); }
.beige { color: var(--beige); }
.seafoam { color: var(--seafoam); }
.white { color: white; }




/* Tags */

html {
    background: var(--purple);
    font-family: "Nunito";

    background-image: url("stars.png");
    background-size: 20%;
    background-repeat: repeat;

    animation-name: slide;
    animation-duration: 3600s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

body {
    width: 65%;
    margin: 0;
}

@keyframes slide {
    0%   { background-position: right 0vw top 0vw; }
    100%   { background-position: right 5000vw top 5000vw; }
}

.h0, h1, h2, summary {
    margin: 0;
    margin-bottom: 1vw;
}
h1, h2, summary { color: white; }
.h0 { font-size: 2vw; }
h1, summary { font-size: 1.5vw; font-weight: bold; }
h2 { font-size: 1.2vw; }

p, li {
    margin: 0;

    color: white;
    font-size: 1vw;

    white-space: pre-line;
}

p:not(#footer p) {
    margin-bottom: 1vw;
}

li {
    margin-top: 1vw;
}

ul {
    margin: 0;
    margin-top: -1vw;
    margin-bottom: 1vw;
}

a {
    color: var(--yellow);

    text-decoration: none;
    text-shadow: 0 0.2vw 5px rgba(0, 0, 0, 0.5);

    text-align: center;

    z-index: 99;

    cursor: pointer;

    transition: 0.3s;
}
a:hover {
    text-shadow: 0 0.4vw 10px rgba(0, 0, 0, 0.7);

    font-weight: 800;

    transition: 0.3s;
}

hr {
    width: 100%;

    margin-top: 2vw;
    margin-bottom: 2vw;

    color: var(--yellow);
}

button {
    padding: 0.5vw;

    border-radius: 0.5vw;
    border: none;

    color: var(--purple);
    font-size: 1vw;
    font-weight: bold;
    font-family: "Nunito";

    background: var(--yellow);

    cursor: pointer;

    transition: 0.3s;
}
button:hover {
    box-shadow: -5px 0.2vw 5px rgba(0, 0, 0, 0.5);

    transition: 0.3s;
}

details {
    margin-bottom: 1vw;
}



/* Classes - Title */

.title { height: 6vw; }
.titleSmall { height: 4vw; }

.socialMedia {
    width: 2vw;

    margin-right: 1vw;
}
.socialMediaSmall {
    width: 1.5vw;

    margin-right: 0.5vw;
}

.navBar {
    margin-top: 0.5vw;

    font-size: 1.3vw;
}
.navBarSmall { font-size: 0.9vw; }



/* Classes - Body */

.about {
    width: 29%;
}

.aboutImage {
    width: 50%;
    border-radius: 100%;
}

.smallImage {
    width: 25vw;

    box-shadow: 0 0.2vw 5px rgba(0, 0, 0, 0.5);
}

body img:not(.titleSmall):not(.socialMediaSmall):not(.tallImage):not(.aboutImage):not(.title):not(.socialMedia):not(.sponsorImage) {
    width: 30vw;

    box-shadow: 0 0.2vw 5px rgba(0, 0, 0, 0.5);

    margin: 1vw;
}

.tallImage {
    width: 12vw;

    box-shadow: 0 0.2vw 5px rgba(0, 0, 0, 0.5);

    margin: 1vw;
}

.sponsorImage {
    width: 15vw;
}

.infoBox {
    padding: 1vw;
    margin-bottom: 1vw;
    width: 90%;

    align-self: center;

    border-radius: 0.5vw;

    background: rgb(255, 255, 255, 0.2);
}

.button {
    padding: 0.5vw;
    margin: 1vw;

    border-radius: 0.5vw;

    color: var(--purple);
    font-size: 2vw;
    font-weight: bold;

    text-shadow: none;

    background: var(--yellow);
}
.button:hover {
    text-shadow: none;
    font-weight: bold;
}



/* Classes - Header & Footer */

#header {
    width: 100%;
    margin-bottom: 3vw;
    position: relative;
}

.translation {
    position: absolute;
    right: -5vw;
}

#footer {
    margin-top: 5vw;
    padding: 1vw;

    border-radius: 0.5vw 0.5vw 0 0;

    background: rgba(0, 0, 0, 0.5);
}

.footerItem {
    margin-bottom: 0.3vw;

    font-size: 0.8vw;
}
.footerItem p {
    font-size: 0.8vw;
}

#animationsButton {
    position: fixed;
    left: 1vw;
    bottom: 1vw;

    font-size: 1vw;
}



/* Phone CSS */

@media only screen and (max-width : 1000px) {
    body {
        width: 80%;
    }

    .h0 { font-size: 4vw; }
    h1, summary { font-size: 2.5vw; }
    h2 { font-size: 2vw; }

    p, li {
        font-size: 2vw;
    }

    .footerItem {
        font-size: 2vw;
    }
    .footerItem p {
        font-size: 2vw;
    }

    .navBar {
        font-size: 2vw;
    }
    .navBarSmall { font-size: 2vw; }

    #footer {
        padding: 2vw;
    }

    #animationsButton {
        font-size: 2vw;
    }
}