:root {
    --primary-colour: rgb(180, 210, 180);
    --secondary-colour: rgb(25, 50, 25);
    --shadow-colour: rgba(0, 0, 0, 0.55);
    --background-colour: rgb(36, 46, 36);
}

@keyframes blinking {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

#texture {
    position: fixed;

    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;

    background-image: url("./images/newspaper.png");
    background-size: cover;

    mix-blend-mode: multiply;
    opacity: 0.8;

    z-index: -1;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0px 2em;

    font-family: "Inconsolata", monospace;

    background-color: var(--background-colour);

    overflow-x: hidden;
}

body::before {
    content: "";
    display: block;
    position: fixed;

    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;

    background-image: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.325) 33%);
    background-size: 120% 2px, 3px 120%;

    z-index: 999;
    pointer-events: none;
}

h1, h2, h3, h4, p, a {
    color: var(--primary-colour);
    text-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.65);
}

h2 {
    margin-bottom: 1em;
}

h3 {
    text-decoration: underline;
}

.important {
    font-size: 1.5em;
}

nav {
    position: sticky;
    top: -0.75vh;

    width: 60em;

    text-align: center;

    background: linear-gradient(0deg,rgba(21, 36, 7, 1) 0%, rgba(25, 50, 25, 1) 100%);
    box-shadow: 0px 0.75em 1.5em;

    border-radius: 0.325em;

    z-index: 998;
}

ul {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0px;
}

ul li {
    padding: 0px 1vw;
    font-size: 1.25em;
}

li {
    list-style-type: none;
}


nav a {
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80vw;
    padding-top: 1em;

    font-family: "Arvo", serif;
    font-weight: 700;

    font-size: 2.25vw;
    color: var(--primary-colour);
    text-shadow: 0.225em 0.225em  var(--shadow-colour);

    text-align: center;
    letter-spacing: 0.5em;
}

header h1 {
    margin: 0px !important;
}


#header-cursor {
    width: 1.25em;
    height: 1.275em;

    border-bottom: 0.275em solid var(--primary-colour);

    filter: drop-shadow(0.25em 0.25em  var(--shadow-colour));

    animation: blinking 0.5s alternate infinite;
}

main {
    display: flex;
    flex-direction: column;

    position: relative;
    right: 4em;

    width: 60em;
}

#intro, #skills, #projects, #education, #contact {
    display: flex;
    flex-flow: row nowrap;

    padding-top: 3em;
}

#projects {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    right: -6.75em;

    max-width: 55em;
}

#skills, #contact {
    position: relative;
    right: -10em;
}

#contact {
    height: 20em;
}

#tv {
    position: relative;
    top: -1em;
    right: -4.5em;

    margin: 2em;
    padding: 2em;

    transform: rotate(-5deg);
}

#tv-frame {
    position: absolute;
    top: -3em;
    right: -2em;

    width: 30em;
}

#me-silly {
    width: 20em;
    padding: 0.5em;
}

#books {
    position: relative;
    top: 0.5em;
    right: 6em;

    width: 27.5em;
}

#keyboard {
    position: relative;
    right: -6.5em;

    width: 25em;

    transform: rotate(-35deg);
}

#pigeon {
    position: relative;
    right: 10em;

    width: 20em;
}

#tv, #books, #keyboard, #pigeon {
    filter: drop-shadow(0.75em 0.75em 0.625em);

    z-index: 555;
}

article {
    padding: 1em 3em;

    background: linear-gradient(0deg,rgba(27, 46, 10, 0.349) 0%, rgba(25, 50, 25, 1) 100%);

    outline: 0.125em dashed var(--primary-colour);
    outline-offset: -1em;
}

article, #signin {
    filter: drop-shadow(0.825em 0.825em var(--shadow-colour));
}

footer {
    margin-top: 2em;
    text-align: center;
}

#signin {
    width: 20em;
    padding: 3em;

    background-color: var(--secondary-colour);

    outline: 0.125em dashed var(--primary-colour);
    outline-offset: -1em;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

input {
    width: 100%;
    padding: 0.5em;
    margin: 1em;

    font-family: "Inconsolata", monospace;
    color: var(--primary-colour);

    background-color: var(--secondary-colour);

    border: 0.175em solid var(--primary-colour);
}

input:focus {
    outline: 0.25em solid var(--primary-colour);
}

button {
    padding: 0.5em;

    font-family: "Inconsolata", monospace;
    color: var(--secondary-colour);

    background-color: var(--primary-colour);

    border: none;
    border-radius: 0.5em;

    cursor: pointer;
}

button:hover {
    background-color: rgb(140, 170, 140);
}

@media only screen and (max-width: 799px) {
    nav {
        width: 100vw;
        font-size: 0.75em;
    }

    ul {
        position: relative;
    }

    header {
        font-size: 1.5em;
    }

    main, #intro, #skills {
        width: 27.5em;
    }

    main, #intro, #skills, #education, #contact {
        position: static;
        
        display: flex;
        flex-flow: row wrap;
    }

    #tv {
        position: relative;
        right: 0.5em;
    }

    #books, #keyboard, #projects, #pigeon {
        right: 0em;
    }
}