/*
Theme Name: Vic Golding
Theme URI: https://vicgolding.com
Author: Vic Golding
Author URI: https://vicgolding.com
Description: vicgolding
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =================================
  TABLE OF CONTENTS
====================================

01. Base
    01.1 Fonts
02. Layout
03. Module
    03.1 Containers
    03.2 Subheader, Subfooter
04. State
05. Theme

Source: https://smacss.com/book/categorizing/

=================================
  01. Base
  Defaults
==================================== */

html {
    scroll-behavior: smooth;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    font-family: 'Nunito', sans-serif;
    background: antiquewhite;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2 {
    font-family: 'Stora', sans-serif;
}

p, h1, h2, h3 {
    color: #212529;
}

a {
    color: darkcyan;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

/* =================================
  01.1 Fonts
==================================== */

/* Stora Regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Stora';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/Stora.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Stora Light - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Stora Light';
    font-style: normal;
    font-weight: 200;
    src: url('../Fonts/Stora-Light.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bungee-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/bungee-v11-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200;
    src: url('../Fonts/nunito-v25-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-200italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 200;
    src: url('../Fonts/nunito-v25-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/nunito-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-300italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 300;
    src: url('../Fonts/nunito-v25-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/nunito-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 400;
    src: url('../Fonts/nunito-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/nunito-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-500italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 500;
    src: url('../Fonts/nunito-v25-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    src: url('../Fonts/nunito-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-600italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 600;
    src: url('../Fonts/nunito-v25-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('../Fonts/nunito-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 700;
    src: url('../Fonts/nunito-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    src: url('../Fonts/nunito-v25-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-800italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 800;
    src: url('../Fonts/nunito-v25-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    src: url('../Fonts/nunito-v25-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-900italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 900;
    src: url('../Fonts/nunito-v25-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =================================
  02. Layout
  Divide the page into sections. Layouts hold one or more modules together.
==================================== */

/* =================================
  02.1 Header
==================================== */

header #main-navigation ul.nav-link {
    flex-direction: row;
   justify-content: center;
}

/* =================================
  02.2 Footer
==================================== */

footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 0.5rem solid darkcyan;
}

/* =================================
  03. Module
  Reusable, modular parts of our design.
==================================== */

/* =================================
  03.1 Containers + Wrappers
==================================== */

.container-fluid {
    max-width: 90%;
}

main section.main:last-of-type .container-fluid:last-of-type .row .col-12.mb-4:last-of-type,
main section.main:last-of-type .container-fluid:last-of-type .row .col-12.mb-4:last-of-type .wrapper:last-of-type {
    margin-bottom: 0 !important;
}

/* =================================
  03.2 Subheader, Subfooter
==================================== */

.subheader {
    padding: 4vh 0;
    h1 {
        width: 95%;
    }
}

section.main, footer {
    padding: 7.5vh 0;
}

header, .subfooter {
    padding: 2.5vh 0;
}

.subfooter p {
    margin-bottom: 0;
}

.subheader, .subfooter {
    background-color: darkcyan;
    text-align: center;
}

.subheader h1, .subheader h2, .subheader h3, .subfooter p {
    color: white;
}

/* =================================
  03.3 Links
==================================== */

a {
    transition: all 0.25s ease-in-out;
    text-decoration-thickness: 0.1rem;
    text-underline-offset: 0.25rem;
}

a.link-offset-5 {
    text-underline-offset: 0.5rem;
}

a:not(.link-underline-opacity-0):hover {
    color: black;
    text-decoration-color: rgba(0, 139, 139, 0);
}

/* =================================
  03.4 Navigation Links
==================================== */

nav ul.nav-link {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

nav ul.nav-link li {
    font-size: 1.1rem;
    font-weight: bolder;
}

nav.horizontal-nav ul.nav-link li:not(:last-of-type) {
    padding-right: 1rem;
}

nav.vertical-nav ul.nav-link {
    flex-direction: column;
}


/* =================================
  04. State
  Ways to describe how our modules or layouts will look when in a particular state.
==================================== */

/* =================================
  04.1 Hover States
==================================== */

@media (hover: hover) {
    /* when hover is supported */
/*     a:hover, nav ul.nav-link a:hover {
        color: black;
        text-decoration: underline;
        text-decoration-thickness: 0.1rem;
        text-underline-offset: 0.5rem;
    }
    nav ul.nav-link a:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.1rem;
        text-underline-offset: 0.5rem;
    } */
}

/* =================================
  04.2 Media Queries
==================================== */
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    nav.horizontal-nav ul.nav-link {
        flex-direction: row;
    }
    .subheader {
        padding: 7.5vh 0;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    header #main-navigation ul.nav-link {
        justify-content: end;
    }
    nav.horizontal-nav ul.nav-link {
        flex-direction: column;
    }
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    nav ul.nav-link li {
        font-size: 1.25rem;
        font-weight: bold;
    }
    section.subheader {
        width: 100%;
    }
    section.main, .subheader, footer {
        padding: 5vh 0;
    }
}
@media (max-width: 1199.99px) {
    header #site-branding {
        text-align: center;
    }
    header #main-navigation ul.nav-link li:first-child {
        display: none;
    }
    .wrapper:not(.frame-space-before-extra-small,
    .frame-space-before-small,
    .frame-space-before-medium,
    .frame-space-before-large,
    .frame-space-before-extra-large,
    .frame-space-after-extra-small,
    .frame-space-after-small,
    .frame-space-after-medium,
    .frame-space-after-large,
    .frame-space-after-extra-large) {
        margin-bottom: var(--bs-spacer);
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    
}


/* =================================
  05. Theme
  Similar to state rules in that they describe how modules or layouts might look.
==================================== */

:root {
    --bs-spacer: 1rem;
    --bs-spacer-1: calc(var(--bs-spacer) * .25);
    --bs-spacer-2: calc(var(--bs-spacer) * .5);
    --bs-spacer-4: calc(var(--bs-spacer) * 1.5);
    --bs-spacer-5: calc(var(--bs-spacer) * 3);
}