*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

img,video{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

:root{
    --green: hsl(120, 61%, 45%);
    --main-font: montserrat;
    --main-font-size: 15px;
    --font-size-title: 30px;
    --unruly-font: bowly one sc;
    --border-radius: 20px;
    --pink-decorated-background: linear-gradient(-230deg, #ff5100, #ff00bf);
    --light-grey: hsl(0, 0%, 60%);
    --medium-grey: ;
    --dark-grey: hsl(0, 0%, 35%);

        --background-color: black;
        --background-color-inverse: white;
        --background-color-transparent: rgba(0,0,0,.19);
        --background-color-inverse-transparent: rgba(255,255,255,.19);
        --black-transparent: rgba(0,0,0,.19);
        --modal-transparent-black: rgba(0,0,0,.96);
        --always-white: white;
        --font-color: white;
        --font-color-inverse: black;
        --unruly-font: bowly one sc;

        --box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        --text-shadow: 0 0 40px rgba(0, 0, 0, .5);
        --box-shadow-only-in-light-mode: none;

        --fill-1: hsl(0, 0%, 13%);
        --fill-2: #141414;
        --fill-3: hsl(0, 0%, 20%);
        
        --light-grey: hsl(0, 0%, 60%);
        --medium-grey: ;
        --dark-grey: hsl(0, 0%, 35%);

        --btn-1-background: var(--fill-1);
        --btn-1-text-color: var(--light-grey);
        --btn-1-text-background: ;

        --btn-1s-background : linear-gradient(-230deg, #ff5100, #ff00bf);
        --btn-1s-text-background: ;
        --btn-1s-text-color: white;
        --btn-1s-text-background-clip: ;
}


a{
    color: inherit;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
}

[class*="fi-s"],[class*="fa-"]{
    display: inline-flex;
    overflow: visible!important;
}
/****** start of reusable classes ---------------------------------------------------------------------------------------------------------------------------- */

/* set hover behavior for device that support "hover (doesn't do hover on mobile)" */
.clickable{
    transition: filter 0.15s ease-in-out;
}
@media (pointer: fine){

    .clickable:hover{
        filter: brightness(.7);
    }

}
.clickable:active{
    transition: none;
    filter: brightness(.4);
}

.pointer{
    cursor: pointer;
}
.pointer-events-none{
    pointer-events: none;
}
.pointer-events-all{
    pointer-events: all;
}
.display-none{
    display: none !important;
}
.round-corners{
    border-radius: var(--border-radius);
    overflow: hidden;
}

.overflow-visible{
    overflow: visible;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-clip{
    overflow: clip;
}

h2{
    font-size: 1em;
    font-weight: normal;
}

ul, ol{
    list-style-position: inside;
}

.font-color{
    color: var(--font-color);
}

.capitalize{
    text-transform: capitalize;
}
.capitalize-first:first-letter{
    text-transform: capitalize;
}

.weight-one{
    font-weight: 100;
}
.weight-two{
    font-weight: 200;
}
.weight-three{
    font-weight: 300;
}
.weight-four{
    font-weight: 400;
}
.weight-five{
    font-weight: 500;
}
.weight-six{
    font-weight: 600;
}
.weight-seven{
    font-weight: 700;
}
.weight-eight{
    font-weight: 800;
}
.weight-nine{
    font-weight: 900;
}

.all-caps{
    text-transform: uppercase;
}

.underline{
    text-decoration: underline;
}
.italic{
    font-style: italic;
}

.contents{
    display: contents;
}
.row{
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
}
.column{
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.center{
    justify-content: center;
    align-items: center;
}
.center-start{
    justify-content: center;
    align-items: flex-start;
}
.center-end{
    justify-content: center;
    align-items: flex-end;
}
.start{
    justify-content: flex-start;
    align-items: flex-start;
}
.start-center{
    justify-content: flex-start;
    align-items: center;
}
.start-end{
    justify-content: flex-start;
    align-items: flex-end;
}
.end{
    justify-content: flex-end;
    align-items: flex-end;
}
.end-center{
    justify-content: flex-end;
    align-items: center;
}
.end-start{
    justify-content: flex-end;
    align-items: flex-start;
}

.gap-one{
    gap: 1px;
}
.gap-two{
    gap: 2px;
}
.gap-three{
    gap: 3px;
}
.gap-four{
    gap: 4px;
}
.gap-five{
    gap: 5px;
}
.gap-ten{
    gap: 10px;
}
.gap-fifteen{
    gap: 15px;
}
.gap-twenty{
    gap: 20px;
}
.gap-thirty{
    gap: 30px;
}
.gap-forty{
    gap: 40px;
}
.gap-fifty{
    gap: 50px;
}
.gap-sixty{
    gap: 60px;
}
.gap-seventy{
    gap: 70px;
}
.gap-eighty{
    gap: 80px;
}
.gap-ninety{
    gap: 90px;
}
.gap-one-hundred{
    gap: 100px;
}
/* padding--------------------------------------------------------------------------------------------- */
.padding-10{
    padding: 10px;
}
.padding-20{
    padding: 20px;
}

.scroll-margin-same-as-header-height{
    scroll-margin: calc(70px + 20px);
}

.point-eight-opacity{
    opacity: .8;
}

.wrap{
    flex-wrap: wrap;
}

.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-justify{
    text-align: justify;
}

.text{
    color: var(--background-color-inverse);
}

.invisible{
    opacity: 0;
    pointer-events: none;
}


/* ---------------------------------------------------------------------------------------------------------------------------- */

/* Viewport > html > body */

html, body {
    width: 100%;/* body needs to be set at height:100% then min-heiht:100%; to be able to expend its childs to 100% of its size */
}

html{
    height: 100%;
    text-align: center;
    scroll-behavior: smooth;
    background: var(--background-color);
}

body{
    background: var(--background-color);
    font-family: var(--main-font);
    font-size: var(--main-font-size);
}

.page{
    width: 100%; /* of body width */
    max-width: 1000px;
    max-width: 1350px;
    gap:45px;
    padding: 30px 0;
}

.page-width{
    width: 100%;
    max-width: 1000px; 
    padding: 0 10px;
}

.horizontal-scroller-shell{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* to center nav buttons*/
}
.horizontal-scroller-shell[data-fill]{
    background: var(--fill-1);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}
.horizontal-scroller{
    width: calc(100%);
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
    scroll-behavior: smooth;
    --space: 50px;
}
.horizontal-scroller > div{
    min-width: 100%;
    flex: 0 0 auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
.horizontal-scroller[data-left] > div{
    justify-content: flex-start;
}
.scroller-prev-btn,.scroller-next-btn{
    width: 30px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: white;
    transition: opacity .2s ease-in-out;
}
.scroller-prev-btn{
    left: 0;
    rotate:180deg;
}
.scroller-next-btn{
    right: 0;
}
.scroller-prev-btn svg,.scroller-next-btn svg{
    width: 18px;
    aspect-ratio: 1/1;
    filter: drop-shadow(var(--box-shadow));
}
.title{
    color: var(--font-color);
    font-size: 30px;
    font-weight: 900;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.page-width{
    width: 100%;
    max-width: 750px;
}

.full-width{
    width: 100%;
}
.full-height{
    height: 100%;
}
.min-full-width{
    min-width: 100%;
}
.min-full-height{
    min-height: 100%;
}
.max-full-width{
    max-width: 100%;
}
.max-full-height{
    max-height: 100%;
}

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.fixed{
    position: fixed!important;
}
.sticky{
    position:sticky!important;
}

@keyframes shake0{
    0%{transform: rotate(0);}
    5%{transform: rotate(3deg);}
    10%{transform: rotate(-3deg);}
    15%{transform: rotate(2deg);}
    20%{transform: rotate(-2deg);}
    25%{transform: rotate(1deg);}
    30%{transform: rotate(-1deg);}
    35%{transform: rotate(0);}
    100%{transform: rotate(0);}
}
@keyframes shake {
    0%{transform: rotate(0);}
    5%{transform: rotate(10deg);}
    10%{transform: rotate(-10deg);}
    15%{transform: rotate(5deg);}
    20%{transform: rotate(-5deg);}
    25%{transform: rotate(2deg);}
    30%{transform: rotate(-2deg);}
    35%{transform: rotate(0);}
    100%{transform: rotate(0);}
}
@keyframes shake2 {
    0%{transform: rotate(0);}
    5%{transform: rotate(45deg);}
    10%{transform: rotate(-45deg);}
    15%{transform: rotate(22deg);}
    20%{transform: rotate(-22deg);}
    25%{transform: rotate(10deg);}
    30%{transform: rotate(-10deg);}
    35%{transform: rotate(0);}
    100%{transform: rotate(0);}
}
@keyframes shake3 {
    0%{transform: rotate(0);}
    5%{transform: rotate(90deg);}
    10%{transform: rotate(-90deg);}
    15%{transform: rotate(45deg);}
    20%{transform: rotate(-45deg);}
    25%{transform: rotate(10deg);}
    30%{transform: rotate(-10deg);}
    35%{transform: rotate(0);}
    100%{transform: rotate(0);}
}

.shake0{
    animation: shake0 2s ease-in-out infinite;
}
.shake{
    animation: shake 2s ease-in-out infinite;
}
.shake2{
    animation: shake2 2s ease-in-out infinite;
}

@keyframes flash{
    0%{opacity:1;}
    15%{opacity:1;}
    30%{opacity:0;}
    45%{opacity:1;}
    60%{opacity:1;}
    75%{opacity:0;}
    90%{opacity:1;}
}
.flash{
    animation: flash 2s ease-in-out infinite;
}

input, select, textarea{
    outline: none;
}

button{
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: default;
    border: none;
    color: inherit;
    font: inherit;
    flex: 0 0 auto;
    touch-action: manipulation;
}

button:focus:not(:focus-visible){
    outline: none;
}

.button{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    min-height: 45px;
    padding: 10px 20px;
    border-radius: calc(var(--border-radius) - 10px);
    background: var(--fill-1);
    color: white;
    font-weight: 600;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.box-shadow{
    position: relative;
    overflow: visible!important;
}
.box-shadow::after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    box-shadow: var(--box-shadow);
    z-index: -1;
}

.youtube-video{
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
}

.pinnedSection{
    bottom:10px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    pointer-events: none;
}

/* the code under this line is active when screen goes over the specified px dimension after "min-width:" ----------------------------------------------------------------------------*/
@media only screen and (min-width: 600px){
    .scroller-prev-btn,.scroller-next-btn{
        width: 30px;
        font-size: 25px;
    }

    .scroller-prev-btn{
        left: 5px;
    }

    .scroller-next-btn{
        right: 5px;
    }
}