:root {
    --bg-color: #fffff9;
    --fg-color: #333;
    --color-gray: #e0e0e0;
    --color-red: #ef5350;
    --color-red-light: #ff867c;
    --color-red-dark: #b61827;
    --color-green: #56d480;
    --accent-1: #5CB02C;
    --accent-2: #8FF056;
    --accent-3: #00b050; /* 7BCF4A */
    --box-shadow20: #00000020;
    --box-shadow40: #00000040;
    --box-shadow60: #00000060;
}
body {
    margin: 0;
    background-color: var(--bg-color);
    background-image: url('../img/bg/small_TGC5365_202311-DNG_PR3.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow-y: visible;
    color: var(--fg-color);
    min-height: 100vh;
    position: relative;
}
*, *:before, *:after {
    font-family: 'Roboto', sans-serif;
    box-sizing: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 500ms ease-in-out;
    user-select: none;
    scrollbar-color: var(--accent-1) var(--color-gray);
    scrollbar-width: thin;
}
nav {
    display: flex;
    position: fixed;
    width: 98vw;
    height: 4rem;
    background: var(--bg-color);
    border-bottom: 2px solid var(--color-blue-dark);
    padding: 0 1vw;
    box-shadow: 0 0 1vh 0 var(--box-shadow40);
    z-index: 8;
    align-items: center;
    overflow: hidden;
}
nav h1 {
    display: inline-block;
    color: var(--accent-3);
    font-size: calc(16px + 0.490625vw);
}
nav a{
    text-decoration: none;
    color: var(--color-gray-dark);
    padding: 0 1em;
}
nav a:hover, nav a:focus{
    background-color: #b9b9b9;
}
nav .nright{
    order: 2;
    margin-left: auto;
}
nav img{
    height: 80%;
}
nav a:hover img, nav a:focus img{
    filter: blur(0.8px);
    opacity: 0.7;
}
.fh{
    height: calc(100vh - 4rem);
    margin-top: 4rem;
}
.w100{
    width: 100%;
}
.w80{
    width: 80%;
}
.w60{
    width: 60%;
}
.h100{
    height: 100%;
}
.h90{
    height: 90%;
}
.h80{
    height: 80%;
}
.center-inside{
    display: flex;
    align-items: center;
    justify-content: center;
}
.card{
    /* padding: 1rem; */
    border: 2px solid var(--color-gray);
    border-radius: 2vh;
    background-color: var(--bg-color);
    box-shadow: 0 5px 0 0 var(--color-gray);
}
.bgshadow{
    box-shadow: 0 0 1em black;
}

/*
 * Buttons
*/
.btn-solid{
    margin: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 20px;
    background-color: var(--accent-1);
    color: white;
    border: none;
    border-radius: 1vh;
    cursor: pointer;
}
.btn-solid:hover{
    background-color: var(--accent-3);
    box-shadow: 0 0 1rem 0 var(--box-shadow40);
}
.btn-solid:disabled{
    background-color: var(--color-gray);
    cursor: default;
}
.btn-solid:disabled:hover{
    box-shadow: none;
}
.btn-outlined{
    margin: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 20px;
    background-color: var(--bg-color);
    color: var(--accent-1);
    border: 2px solid var(--accent-1);
    border-radius: 1vh;
    cursor: pointer;
}
.btn-outlined:hover{
    background-color: var(--accent-1);
    color: var(--bg-color);
}
.btn-switch-outlined{
    margin: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 20px;
    background-color: var(--bg-color);
    color: var(--fg-color);
    border: 2px solid var(--color-gray);
    border-radius: 1vh;
    cursor: pointer;
}
.btn-switch-outlined:hover{
    box-shadow: 0 0 10px -4px var(--box-shadow40);
    transform: translateY(-5px);
}
.btn-switch-outlined.is-selected{
    color: var(--accent-1);
    border: 2px solid var(--accent-1);
}
/*
 * Hyperlinks
*/
.a1 {
    color: var(--accent-1);
    text-decoration: none;
}
.a1:hover, .a1:focus{
    color: var(--accent-3);
}
.z9{
    position: relative;
    margin: 1em auto;
    z-index: 9;
}
.banner{
    width: 100%;
    min-height: 375px;
    max-height: 40vh;
    /* background-attachment: fixed !important; */
    background-size: cover; /* auto !important */
    box-shadow: 0 0.5em 1em -1em var(--box-shadow60);
    background-repeat: no-repeat;
}
/*
 * Footer
*/
footer{
    width: 100%;
    background-color: #181818;
    color: white;
    padding: 2rem 0;
    display: flex;
    gap: 2em;
    justify-content: center;
}
footer h2{
    font-size: 21px;
    margin: 0.25em 0;
    letter-spacing: 0.1em;
}
footer a{
    display: inline-block;
    color: white;
    font-weight: 300;
    font-size: 15px;
    text-decoration: none;
    padding: 0 10px;
}
footer a:hover, footer a:focus{
    text-decoration: underline;
}