:root {
    --font-arial: Arial, -apple-system, sans-serif;
    --font-balsamiq: "Balsamiq Sans", -apple-system, Arial, sans-serif;
    --font-comic: "Comic Neue", -apple-system, Arial, sans-serif;
    --font-grandstander: "Grandstander", -apple-system, Arial, sans-serif;
    --font-itim: "Itim", -apple-system, Arial, sans-serif;
    --font-nunito: "Nunito", -apple-system, Arial, sans-serif;
    --font-patrick: "Patrick Hand SC", -apple-system, Arial, sans-serif;
    --font-public: "Public Sans", Arial, -apple-system, sans-serif;
    --font-size-1: 21.8pt;
    --font-size-1-small: 20pt;
    --font-size-2: 17pt;
    --font-size-2-small: 15.8pt;
    --font-size-3: 14pt;
    --font-size-3-small: 13.2pt;
    --font-size-4: 12.4pt;
    --font-size-4-small: 11.8pt;
    --font-size-copyright: 10px;
    /* MEDIA QUERY and VIEWPORT VARS */
    --nav-height-1080: 120px;
    --view-content-height-1080-720: calc(100vh - var(--nav-height-1080) - 40px);
    --view-grid-1080-720: var(--nav-height-1080) var(--view-content-height-1080-720) 40px;
    /* button sizes */
    --nav-menu-button-small: 170px;
    --nav-menu-button-normal: 200px;
    --nav-menu-button-medium: 240px;
    --nav-menu-button-large: 280px;
    /* box-shadows */
    --box-shadow-small: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    --box-shadow-small-b: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

*,
*:after,
*:before {
    box-sizing: border-box !important;
}

body, html {
    font-size: var(--base-font-size);
    margin: 0!important;
    padding: 0!important;
    font-family: var(--font-public);
    color: var(--off-white);
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jc-start {
    justify-content: flex-start;
}
.ai-start {
    align-items: flex-start;
}
.jc-end {
    justify-content: flex-end;
}
.jc-centre {
    justify-content: centre;
}
.ai-centre {
    align-items: centre;
}
.jc-between {
    justify-content: space-between;
}
.jc-around {
    justify-content: space-around;
}
.ai-stretch {
    align-items: stretch;
}

.fd-col {
    flex-direction: column;
}

.fw-wrap {
    flex-wrap: wrap;
}

/* grid */

.auto-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
    /* padding: 40px; */
}

.auto-columns-gird {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 10px;
}

.auto-grid-vertical {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20px;
}

/* global button styles */

button {
    position: relative;
}

button:focus:before{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 8px;
    border: solid 4px coral;
}

.pad-10 { 
    padding: 10px;
}

.gradient-bg {
    background: #000000;
    background: -webkit-linear-gradient(to bottom, var(--off-black-2), var(--bg-darker));
    background: linear-gradient(to bottom, var(--off-black-2), var(--bg-darker));
}

@media screen and (min-width: 500px){}
@media screen and (min-width: 750px){}
@media screen and (min-width: 1000px){}
@media screen and (min-width: 1280px){}
@media screen and (min-width: 1300px){}
@media screen and (min-width: 1440px){}
@media screen and (min-width: 1920px){}