/* Website Made by Bence (bencebarens.nl) */

/**************/
/* CSS REMEDY */
/**************/

html{
	margin: 0;
	padding: 0;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    scroll-behavior: smooth;
}

body, main{
	width: 100%;
	margin: 0;
}

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

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root{
    --color-primary: #ffffff;
    --color-secondary: #111111;
    --color-accent: #ff0000;
}

*::selection {
    color: var(--color-primary);
    background-color: var(--color-accent);
    text-shadow: white 0 0 0.2em;
}

*{
    outline: 2px solid rgba(255, 34, 34, 0);
}

*:focus-visible {
    outline: 2px solid var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root{
        --color-primary: #111111;
        --color-secondary: #ffffff;
        --color-accent: #ff2222;
    }

    *::selection {
        color: var(--color-secondary);
        background-color: var(--color-accent);
    }
}

@font-face{
    font-family: "Bricolage Grotesque VF";
    src: url("../font/BricolageGrotesqueVariable.ttf") format("truetype");
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Bros Italic';
  src: url('../font/ZTBrosOskon90s-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bros';
  src: url('../font/ZTBrosOskon90s-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.fw-200 { font-weight: 200; }
.fw-400 { font-weight: 400; }   
.fw-600 { font-weight: 600; }
.fw-800 { font-weight: 800; }

.wdth-75 { font-stretch: 75%; }
.wdth-80 { font-stretch: 80%; }
.wdth-85 { font-stretch: 85%; }
.wdth-90 { font-stretch: 90%; }
.wdth-95 { font-stretch: 95%; }
.wdth-100 { font-stretch: 100%; }

/***********/
/* STYLING */
/* GENERAL */
/***********/

body{
    width: 100%;
    margin: 0;
	padding: 0;

    font-family: "Bricolage Grotesque VF", sans-serif;
    font-weight: 400;
    font-stretch: 100%;
    font-variation-settings: 'opsz' 14;

    animation: fade-in 1s;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

button, label{
    cursor: pointer;
}

a, input, textarea{
    color: inherit;
    font-family: inherit;
    font: inherit;
    transition: all 200ms ease;
}

a:hover{
    color: var(--color-accent);
    font-weight: 800;
    font-stretch: 95%;
}

P, li{
    max-width: 40em;
}

h1{
    font-variation-settings:'opsz' 72;
    font-family: "Bros", serif;
    margin: 0;
    font-size: 2.5rem;
}

h2, h3, h4 {
    font-variation-settings: 'opsz' 24;
    margin: 0;
}

h5, h6 {
    font-variation-settings: 'opsz' 18;
    margin: 0;
}

button{
    background: none;
    border: none;
    padding: 0;
}

[hidden] {
    display: none !important;
}

/* Skip to main */

body > a:first-child{
    position: absolute;
    left: -999rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease;
    text-decoration: none;
}

body > a:first-child:focus{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
    opacity: 1;
    background: var(--color-secondary);
    color: var(--color-primary);
    padding: 0.5rem;
    z-index: 1000;
}