/* Purpose: This is the default colour scale and fonts for the site  */
:root {
    --pastel-beige: #eee0c9;
    --pastel-lightblue: #adc4ce;
    --pastel-darkblue: #96b6c5;
    --pastel-darkdarkblue: #1f2a32;
    --pastel-grey: #f1f0e8;   
    font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
}
/* START BODY */
/* This is the default styling for the visible content unless otherwise stated below */
body {
    display: flex;
    flex-direction: column;
    background-color: var(--pastel-beige);
    justify-content: center;
    align-items: center;
}

/* START HEADER AND NAVIGATION */

/* This is the styling for the header, which includes the website name 'Grant' and navbar */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 4dvh;
    width: 95dvw;
    text-align: center;
    text-decoration: none;
}

header a {
    color: var(--pastel-darkdarkblue);
    text-decoration: none;
}

/* Actions to occur when hovering over the website name */
header a:hover {
    transform: scale(1.1);
}

/* START NAVIGATION */

/* Styling for the anchor/navigation buttons in the navbar */
nav > a {
    text-decoration: none;
    padding: 0.25em;
    color: var(--pastel-darkdarkblue);
}

/* Actions to occur when hovering over anchors */
nav > a:hover {
    text-decoration: underline;
    transition: 1s;
}

/* END HEADER AND NAVIGATION */

/* START MAIN CONTENT */

/* This is the styling for the main content of the home page */
main {
	display: flex;
	max-width: 80dvw;
    flex-direction: column;
    padding: 0.1rem;
    margin: 1rem;
}

/* START INTRO SECTION*/

section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image decoration */
section > img {
    height: 16dvh;
    border-radius: 50%;
    box-shadow: 0.2em 0.2em 5px var(--pastel-darkblue);
}

/* About me link */
section > a {
	padding: 0.5rem;
	border-radius: 3rem;
    background-color: var(--pastel-darkblue);
	border: 0.1rem solid var(--pastel-darkdarkblue);
    color: white;
    text-decoration: none;
}

/* About me link animation */
section > a:hover {
    text-decoration: none;
    background-color: var(--pastel-darkdarkblue);
}

/* Text formatting to determine how different text presents itself in various areas */

h1 {
    display: flex;
    padding: 0.2rem;
    margin: 0;
}

h2 {
    display: flex;
    padding: 0.2rem;
    margin: 0;
}

h4 {
    display: flex;
    padding: 0.4rem;
    margin: 0;
}

a {
    text-decoration: none;
}

h2 {
    margin: 4dvw;
    text-decoration: none;
}

h6 {
    margin: 4dvw;
    text-decoration: none;
}

/* This is the styling for the footer. It ensures the footer is always visible at the bottom even when scrolling or showing content larger than the page */
footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 4dvh;
    width: 100%;
    color: black;
    background-color: var(--pastel-beige);
}

/* Media to allow best view on Desktop */
@media screen and (min-width: 600px) {
    main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 40dvw;
    }

    section {
        width: 20dvw;
    }
}