/* Copyright (C) 2025 Rogan Johnston all rights reserved */
@import url(https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

:root{
    --base-spacing: 16px;
    --line-thickness: 3px;
    --font-primary: 'Poppins', arial, sans-serif;
    --font-secondary: 'Coustard', georgia, serif;
    --colour-background: #F3F5F6;
    --colour-background-2: #FFFFFF;
    --colour-content: #292F36;
    --colour-content-2: #000000; 
    --colour-accent: #BD5555;
}

*{ margin: 0; padding: 0px; }

html{ scroll-behavior: smooth; }

body{
    min-height: 100vh;
    font-family: var(--font-primary);
    font-size: 100%;
    line-height: 1.5;
    background-color: var(--colour-background);
    color: var(--colour-content);
}

main{
    flex-grow: 1;
}

header{
    border-bottom: var(--line-thickness) solid var(--colour-content);
    padding-bottom: var(--base-spacing);
    padding-top: var(--base-spacing);
    margin-bottom: 1em;
}

nav{ align-self: center;}
nav li:not(:last-child){ margin-right: 2em;}

ul, ol{ list-style: none; }

footer{
    border-top: var(--line-thickness) solid var(--colour-content);
    padding-top: calc(1.5 * var(--base-spacing));
    padding-bottom: calc(1.5 * var(--base-spacing));
    margin-top: calc(4 * var(--base-spacing));
}

section h1, section p{ margin-block: 1rem; }

/* Text Elements */
h1, h2, h3, h4, h5{
    text-align: center;
    font-family: var(--font-secondary);
    font-weight: 900;
    font-size: 2.125em;
    color: var(--colour-accent);
}

p{
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.125em;
    color: var(--colour-content);
}

button, a{
    font-family: var(--font-primary);
    text-align: center;
    font-weight: 500;
    font-size: 1.375em;
    text-decoration: none;
    color: var(--colour-content);
}
a:hover, .active{ color: var(--colour-accent); }

button{
    border: var(--line-thickness) solid var(--colour-content);
    max-width: 150px;
    width: 100%;
    align-self: center;
    background-color: var(--colour-background);
}
button:hover{
    border-color: var(--colour-accent);
    color: var(--colour-accent);
}
/* Media Elements */
img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

hr{
    border: 0px;
    border-top: var(--line-thickness) solid var(--colour-content);
    margin-top: calc(2 * var(--base-spacing));
    margin-bottom: calc(2 * var(--base-spacing));
    width: 100%;
}

label{
    font-weight: 500;
    font-size: 1.375em;
    margin-top: calc( 0.25 * var(--base-spacing));
    margin-bottom: calc( 0.25 * var(--base-spacing));
}

form{
    width: 66%;
    min-width: min(100%, 600px);
}

input, textarea{
    border: 0px;
    outline: calc( 1 * var(--line-thickness)) solid var(--colour-content);
    font: inherit;
    font-size: 1.125em;
    color: var(--colour-content);
    background-color: var(--colour-background);
    box-sizing: border-box;
    margin-bottom: var(--base-spacing);
    padding: calc(0.5 * var(--base-spacing));
}
input:focus, textarea:focus{
    outline: calc( 1 * var(--line-thickness)) solid var(--colour-accent);
}