/*
==========================================================
FantasyFanzone Base Styles
Version: 4.2
==========================================================
*/

/*========================================================
BOX SIZING
========================================================*/

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

/*========================================================
DOCUMENT
========================================================*/

html{
    min-height:100%;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    min-width:320px;
    min-height:100%;

    margin:0;
    padding:0;

    background:var(--ffz-background);

    color:var(--ffz-text);

    font-family:var(--ffz-font-family);
    font-size:var(--ffz-font-size-base);
    line-height:var(--ffz-line-height);

    text-rendering:optimizeLegibility;

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

/*========================================================
LOCKED BODY
========================================================*/

body.menu-open,
body.modal-open{
    overflow:hidden;
}

/*========================================================
MEDIA
========================================================*/

img{
    display:block;

    max-width:100%;
    height:auto;
}

picture{
    display:block;
}

svg{
    display:block;

    max-width:100%;
}

/*========================================================
LINKS
========================================================*/

a{
    color:inherit;

    text-decoration:none;

    transition:
        color var(--ffz-transition-normal),
        background-color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

/*========================================================
FORM ELEMENTS
========================================================*/

button,
input,
select,
textarea{
    margin:0;

    font:inherit;
    color:inherit;
}

button{
    padding:0;

    border:0;

    background:none;

    cursor:pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    cursor:not-allowed;
}

/*========================================================
KEYBOARD FOCUS
========================================================*/

:where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible{
    outline:2px solid var(--ffz-primary);

    outline-offset:3px;
}

/*========================================================
TYPOGRAPHY
========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;

    color:var(--ffz-heading);

    font-weight:var(--ffz-font-weight-bold);

    line-height:1.2;
}

p{
    margin:0;
}

/*========================================================
STRUCTURE
========================================================*/

main{
    display:block;
}

section{
    position:relative;
}

/*========================================================
HOMEPAGE
========================================================*/

.ffz-homepage{
    overflow:hidden;
}

/*========================================================
TEXT SELECTION
========================================================*/

::selection{
    background:var(--ffz-primary);

    color:#fff;
}

/*========================================================
SCROLLBAR
========================================================*/

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:var(--ffz-background);
}

::-webkit-scrollbar-thumb{
    background:var(--ffz-surface-light);

    border:
        2px solid
        var(--ffz-background);

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--ffz-primary);
}

/*========================================================
REDUCED MOTION
========================================================*/

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }
}