:root {
    --background-colour: #000000;
    --primary-accent: #aa00cc;
    --primary-text: #ffffff;
    --secondary-text: #000000;
    --shadow-light: #eeeeee;
    --shadow-dark: #d5d5d5;
    --accent-shadow-light: #bb00cc;
    --accent-shadow-dark: #7700dd;
}

body {
    background-color: var(--background-colour);
    font-family: "Main Font";
    color: var(--primary-text);
    overflow-x: hidden;
    margin: 0;
}

#starting-section {
    height: 100vh;
    margin: 0;
    padding: 0;
}

#intro-section {
    margin: 0;
    padding: 0;
}

#intro-section h1 {
    font-family: "Title Font";
    text-transform: uppercase;
    margin: 0;
    padding-left: 30px;
    color: var(--secondary-text);
    border-top-right-radius: 250px;
    background-color: var(--primary-accent);
}

#bg-image,
#mobile-bg-image {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: -3;
    animation: load-blur 3s;
}

#bg-image {
    display: block;
}

#mobile-bg-image {
    display: none;
}

#content-div {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    top: 0;
    width: 100%;
    animation: load-blur 3s;
}

#main-title {
    margin: 0px;
    margin-top: 50px;
    width: 640px;
    animation: load-image 8s infinite;
}

#sub-title {
    transform: translateY(-25px);
    margin: 0;
    animation: load-blur 4s;
}

@font-face {
    font-family: "Main Font";
    src: url("fonts/Montserrat-Regular.ttf");
}

@font-face {
    font-family: "Title Font";
    src: url("fonts/Generica.otf");
}

@keyframes load-image {
    0% {
        filter: blur(0px);
	scale: 1;
    }
    50%{
	filter: blur(1px);
	scale: 1.01;
    }
    100% {
        filter: blur(0px);
	scale: 1;
    }
}

@keyframes load-blur {
    0% {
        filter: opacity(0%) blur(10px);
    }
    100% {
        filter: opacity(100%) blur(0px);
    }
}

@media (max-width: 1080px) {
    body {
        overflow-x: hidden;
    }
    #starting-section {
        width: 100vw;
        overflow: hidden;
    }
    #content-div {
        overflow: hidden;
        width: 100%;
        align-items: center;
    }
    #bg-image {
        display: none;
    }

    #mobile-bg-image {
        display: block;
        overflow: hidden;
        transform: translateX(-50vw);
    }
}