/*COLOURS*/
:root {
    /*TEMPALTE: var(--replace) */
    --black: #000000;
    --transparent: rgba(255, 255, 255, 0.1);
    --white: #ffffff;
    /*Color Palette: https://colorhunt.co/palette/525252414141313131ec625f*/
    --base1: #525252;  /*Bright*/
    --base2: #414141;  /*Dimmer*/
    --base3: #313131;  /*Darkest*/
    --accent: #EC625F; /*Accent*/

    --red: #FF0000;
    --green: #00FF00;
    --blue: #0000FF;
}
/*CUSTOM FONT FAMILIES*/
.major-mono-display-regular {
    font-family: "Major Mono Display", monospace;
    font-weight: 400;
    font-style: normal;
}






/*MAIN INDEX*/
html, body {
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Courier New', Courier, monospace;
    color: var(--white);
    font-size: 16px; /*Default font size is 16px or 1em*/
    background-color: var(--base3);

    scroll-behavior: smooth; /*Smooth scrolling for anchor links*/
}





/*Home Div*/
.home a,ul,li{ /*Link and list standard styling*/
    text-decoration: none;
    list-style-type: none;
    font-family: "Major Mono Display", monospace;
    color: var(--white);
    padding: 2vh;
    /* background-color: green; CHANGE LATER TEMP COLORS */
}
.home {
    width: 100%;
    height: 70vh;
    background-color: var(--black);
    border-bottom: 1px solid var(--white);

    position: relative;
    display: flex;
    flex-direction: column; /*This makes it stack in a column (vert). Disabling will stack in a row instead (horz)*/
    align-items: center;
    justify-content: center;

    /* border-radius: 0 0 20% 20%; */
}


/* TODO:  Animate the home heave and nav so taht as the page scrolls dow and there is less and less.
home to move the elements down as the users scrolls and make it push the ul ot the right and the.
header a href to the left. and always on top. */


.home .header { /*Header a href*/
    /* background-color: black; */
    font-size: 6em;
    letter-spacing: 0.4em;
    margin-bottom: 3vh;
    transition: all 0.2s ease-in-out;
}

.home .nav { /*Nav ul*/
    display: flex;
    flex-direction: row; /*This makes it stack in a row (horz). Disabling will stack in a column instead (vert)*/
    align-items: center;
    justify-content: center;
}
    .home .nav a { /*Nav a href*/
        font-size: 2em;
        margin: 0 1vw;
        letter-spacing: 0.1em;
        transition: background-color 0.2s ease-in-out;
        /* background-color:var(--black); */
    }

/*Home Hover states*/
.home .header:hover {
    font-size: 6.6em;
    /* color: var(--accent); */
}

.home .nav a:hover {
    text-transform: uppercase;
    background-color: var(--transparent);
}
/* .home .nav a:active {
    color: var(--accent);
} */
.home .nav #n1:hover {
    color: var(--red);
}
.home .nav #n2:hover {
    color: var(--green);
}
.home .nav #n3:hover {
    color: var(--blue);
}


/*FOOTER*/
footer {
    font-family: "Major Mono Display", monospace;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15vh;
    background-color: var(--black);
    color: var(--white);
    border-top: 1px solid var(--white);

    position: relative;
}
footer .links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.links a,ul,li {
    text-decoration: none;
    list-style-type: none;
    color: var(--white);
    padding: 1vh;
}
.links a:hover {
    text-transform: uppercase;
    background-color: var(--transparent);
}

footer span.backtotop {
    position: absolute;
    right: 4vh;
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 1vh;
    border-radius: 50%;
}
footer span.backtotop:hover {
    background-color: var(--transparent);
    color: var(--white);
}