@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
html{
    background-color: black;
    overflow-x: hidden;
}
body{
    margin: 0 0 0 0;
}

h1{
    font-family: 'Raleway', sans-serif;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    /*filter: drop-shadow(0 0.1rem 2rem rgb(0, 0, 0));*/
}

.drop_shadow_white {
    filter: drop-shadow(0 0.5rem 2rem rgb(255, 255, 255));                
}

.drop_shadow_black {
    filter: drop-shadow(0 0.5rem 2rem rgb(0, 0, 0));
}

.up_shadow_black {
    filter: drop-shadow(0 -0.5rem 2rem rgb(0, 0, 0));
}

.both_shadow_black{
    filter: drop-shadow(0 0.5rem 2rem rgb(0, 0, 0)) drop-shadow(0 -0.5rem 2rem rgb(0, 0, 0));
}

a {
    text-decoration: none;
    color: black;
}

body {
    animation: fadeInAnimation ease 1s; /* If debug change to 0 */
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        filter: brightness(0);
        opacity: 0;
    }
    100% {
        filter: brightness(1);
        opacity: 1;
    }
}

.centered_div {
    display: flex;
    justify-content: center;
}

.padded_div{
    padding-left: 12%;
    padding-right: 12%;
}

.animated_arrow{
    animation: animated_arrow_animation ease-in-out 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes animated_arrow_animation {
    0% {
        opacity: 0;
        transform: translate(0%, 0%);
    }
    50% {
        opacity: 1;
        transform: translate(0%, 5%);
    }
    100% {
        opacity: 0;
        transform: translate(0%, 0%);
    }
}

.flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction 
        and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */

    flex-flow: row wrap;

    /* Then we define how is distributed the remaining space */
    justify-content: left;
}

.animated_logo{
    animation: animated_logo_animation ease-in-out 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes animated_logo_animation {
    0% {
        opacity: 0.95;
        filter: drop-shadow(0 0.5rem 2rem rgb(255, 255, 255));
    }
    50% {
        transform: translateY(-0.1rem);
        opacity: 1;
        filter: drop-shadow(0 0.6rem 2rem rgb(255, 255, 255));

    }
    100% {
        opacity: 0.95;
        filter: drop-shadow(0 0.5rem 2rem rgb(255, 255, 255));

    }
}

@media only screen and (max-width: 1026px) {
    .gif {
        display: none;
    }
}

.gif{
    object-fit: cover;
    width: 34rem !important; 
    height: 24rem !important;
    margin-top: 4.5rem;
}

.accent_colour{
    background: -webkit-linear-gradient(#2a305a, #685174);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accent_colour_not_text{
    background-image: conic-gradient(black, #400e5b, black);
}

.both_shadow_accent{
    filter: drop-shadow(0 0.5rem 2rem crimson) drop-shadow(0 -0.5rem 2rem crimson);
}

.navbar_top{
    background-color: rgba(0, 0, 0, 0);
}

.navbar_scrolled{
    background-color: rgba(0, 0, 0, 1);
}