/* font imports ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* root colors & fonts ------------------------------ */
:root {
	--white: #FFF;
	--black: #000;
	--grey: #e9e9e9;
    --grey-faded: rgba(0,0,0,0.15);
    --pink: #F5008F;
    --pinkDark: #5D0A3A;
    --pinkFaded: #F5008FB2;
    --blue: #00EDFF;
    --blueFaded: #00EDFFB2;
    --blueXFaded: #00EDFF80;
    --amber: #FEB000;
    --charcoal: #0F0F0F;
    --charcoalFaded: #0F0F0FB3;
    --bg-dark: #131313;
    --charcoal2: #141414;
    --greyTransparent: #E9E6E64D;

    --roboto: 'Roboto Flex', sans-serif;
    
    --html-font-family: var(--roboto);
    --html-font-size: 18px;
    --html-font-weight: 400;
    --html-font-style: normal;
    --html-line-height: 1.5em;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--white);

    --h1-font-family: inherit;
    --h1-font-size: 3.25rem;
    --h1-font-weight: 700;
    --h1-font-style: inherit;
    --h1-line-height: 1.1em;
    --h1-letter-spacing: inherit;
    --h1-text-transform: inherit;
    --h1-text-decoration: inherit;
    --h1-color: inherit;

    --h2-font-family: inherit;
    --h2-font-size: 2.6rem;
    --h2-font-weight: 700;
    --h2-font-style: inherit;
    --h2-line-height: 1.1em;
    --h2-letter-spacing: inherit;
    --h2-text-transform: inherit;
    --h2-text-decoration: inherit;
    --h2-color: inherit;

    --h3-font-family: inherit;
    --h3-font-size: 2.2rem;
    --h3-font-weight: 700;
    --h3-font-style: inherit;
    --h3-line-height: 1.1em;
    --h3-letter-spacing: inherit;
    --h3-text-transform: inherit;
    --h3-text-decoration: inherit;
    --h3-color: inherit;

    --h4-font-family: inherit;
    --h4-font-size: 1.8rem;
    --h4-font-weight: 700;
    --h4-font-style: inherit;
    --h4-line-height: 1.1em;
    --h4-letter-spacing: inherit;
    --h4-text-transform: inherit;
    --h4-text-decoration: inherit;
    --h4-color: inherit;

    --h5-font-family: inherit;
    --h5-font-size: 1.25rem;
    --h5-font-weight: 400;
    --h5-font-style: inherit;
    --h5-line-height: 1.3em;
    --h5-letter-spacing: inherit;
    --h5-text-transform: inherit;
    --h5-text-decoration: inherit;
    --h5-color: inherit;

    --txt-xsml: 0.8rem;
    --txt-sml: 0.9rem;
    --txt-med: 1.2rem;

    --body-background-color: var(--charcoal);
    --bold-font-weight: 600;
    --link-color: var(--pink);
    --link-color-hover: var(--blue);
    --hr-weight: 1px;
    --hr-color: var(--grey-faded);
    --border: 1px solid var(--grey-faded);
    --shadow: 0 0.5rem 1rem var(--grey-faded);
    --scroll-behaviour: smooth;
    --transition: 0.3s;

    --txt-1-color: var(--pink);
    --txt-2-color: var(--blue);
    --txt-3-color: var(--black);


    --background-color-1: var(--grey);
    --background-color-2: var(--grey);
    --background-color-3: var(--grey);
}

/* responsive font sizes ------------------------------ */
@media only screen and (max-width: 1350px) {
    :root {
        --html-font-size: 17.5px;
    }
}
@media only screen and (max-width: 1100px) {
    :root {
        --html-font-size: 17px;
    }
}
@media only screen and (max-width: 800px) {
    :root {
        --html-font-size: 16.5px;
    }
}
@media only screen and (max-width: 501px) {
    :root {
        --html-font-size: 16px;
    }
}

/* root element styles ------------------------------ */
:root {
    --btn-1-font-family: inherit;
    --btn-1-font-size: 0.9rem;   
    --btn-1-font-weight: 500;
    --btn-1-line-height: inherit;
    --btn-1-letter-spacing: inherit;
    --btn-1-text-transform: inherit;
    --btn-1-text-decoration: inherit;
    --btn-1-color: var(--white);
    --btn-1-padding: 0.5rem 1.25rem;
    --btn-1-background: var(--pink);
    --btn-1-border: 2px solid var(--pink);
    --btn-1-border-radius: 999px;
    --btn-1-box-shadow: initial;

    --btn-1-color-hover: var(--white);
    --btn-1-background-hover: var(--pink);
    --btn-1-border-hover: 2px solid var(--pink);

    --btn-2-font-family: inherit;
    --btn-2-font-size: 0.9rem;   
    --btn-2-font-weight: 500;
    --btn-2-line-height: inherit;
    --btn-2-letter-spacing: inherit;
    --btn-2-text-transform: inherit;
    --btn-2-text-decoration: inherit;
    --btn-2-color: var(--white);
    --btn-2-padding: 0.5rem 1.25rem;
    --btn-2-background: none;
    --btn-2-border: 2px solid var(--pink);
    --btn-2-border-radius: 999px;
    --btn-2-box-shadow: initial;

    --btn-2-color-hover: var(--white);
    --btn-2-background-hover: none;
    --btn-2-border-hover: 2px solid var(--pink);

    --input-font-family: inherit;
    --input-font-size: inherit;   
    --input-font-weight: inherit;
    --input-line-height: inherit;
    --input-letter-spacing: inherit;
    --input-text-transform: inherit;
    --input-text-decoration: inherit;
    --input-color: var(--black);
    --input-padding: 0.75rem 1.25rem;
    --input-background: var(--white);
    --input-border: 1px solid var(--black);
    --input-border-radius: 0rem;
    --input-outline-focus: 3px solid var(--grey-faded);

    --select-font-family: inherit;
    --select-font-size: inherit;   
    --select-font-weight: inherit;
    --select-text-transform: inherit;
    --select-color: var(--black);
    --select-padding: 0.75rem 1.25rem;
    --select-background: var(--white);
    --select-border: 1px solid var(--black);
    --select-border-radius: 0rem;

    --textarea-font-family: inherit;
    --textarea-font-size: inherit;   
    --textarea-font-weight: inherit;
    --textarea-line-height: inherit;
    --textarea-letter-spacing: inherit;
    --textarea-text-transform: inherit;
    --textarea-text-decoration: inherit;
    --textarea-color: var(--black);
    --textarea-padding: 0.75rem 1.25rem;
    --textarea-background: var(--white);
    --textarea-border: 1px solid var(--black);
    --textarea-border-radius: 0rem;
    --textarea-resize: none;

    --checkbox-radio-margin: 0.75rem;

    --label-font-family: inherit;
    --label-font-size: inherit;   
    --label-font-weight: inherit;
    --label-line-height: inherit;
    --label-letter-spacing: inherit;
    --label-text-transform: inherit;
    --label-text-decoration: inherit;
    --label-color: var(--black);

    --placeholder-font-family: inherit;
    --placeholder-font-weight: inherit;
    --placeholder-letter-spacing: inherit;
    --placeholder-text-transform: inherit;
    --placeholder-text-decoration: inherit;
    --placeholder-color: var(--black);
    --placeholder-opacity: 0.75;
}

/* Image ------------------------------ */

img {
    max-width: 100%;
    vertical-align: middle;
}
img.protected {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* fonts ------------------------------ */
html {
    font-family: var(--html-font-family);
    font-size: var(--html-font-size);
    font-weight: var(--html-font-weight);
    font-style: var(--html-font-style);
    line-height: var(--html-line-height);
    letter-spacing: var(--html-letter-spacing);
    text-transform: var(--html-text-transform);
    text-decoration: var(--html-text-decoration);
    color: var(--html-color);
}
h1,
.h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    text-decoration: var(--h1-text-decoration);
    color: var(--h1-color);
}
h2,
.h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-text-transform);
    text-decoration: var(--h2-text-decoration);
    color: var(--h2-color);
}
h3,
.h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    text-decoration: var(--h3-text-decoration);
    color: var(--h3-color);
}
h4,
.h4 {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    text-transform: var(--h4-text-transform);
    text-decoration: var(--h4-text-decoration);
    color: var(--h4-color);
}
h5,
.h5 {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    text-transform: var(--h5-text-transform);
    text-decoration: var(--h5-text-decoration);
    color: var(--h5-color);
}
.txt-xsml {
    font-size: var(--txt-xsml);
}
.txt-sml {
    font-size: var(--txt-sml);
}
.txt-med {
    font-size: var(--txt-med);
}
.bold {
    font-weight: var(--bold-font-weight);
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}

/* color ------------------------------ */
.txt-1 {
    color: var(--txt-1-color);
}
.txt-2 {
    color: var(--txt-2-color);
}
.txt-3 {
    color: var(--txt-3-color);
}
a {
    color: var(--link-color);
    transition: color var(--transition);
}
a:hover {
    color: var(--link-color-hover);
}
body {
    background: var(--body-background-color);
}
.bg-1 {
    background: var(--background-color-1);
}
.bg-2 {
    background: var(--background-color-2);
}
.bg-3 {
    background: var(--background-color-3);
}


/* elements ------------------------------ */
hr {
    border-top: var(--hr-weight) solid var(--hr-color);
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    opacity: 1;
}
.border {
    border: var(--border);
}
.shadow {
    box-shadow: var(--shadow);
}
button, a {
    cursor: pointer;
}
button {
    transition: var(--transition);
}
.btn-1 {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: var(--btn-1-text-decoration);
    color: var(--btn-1-color);
    padding: var(--btn-1-padding);
    background: var(--btn-1-background);
    border: var(--btn-1-border);
    border-radius: var(--btn-1-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-1:hover {
    color: var(--btn-1-color-hover);
    background: var(--btn-1-background-hover);
    border: var(--btn-1-border-hover);
}
a.btn-1 {
    display: inline-block;
}
.btn-2 {
    font-family: var(--btn-2-font-family);
    font-size: var(--btn-2-font-size);
    font-weight: var(--btn-2-font-weight);
    line-height: var(--btn-2-line-height);
    letter-spacing: var(--btn-2-letter-spacing);
    text-transform: var(--btn-2-text-transform);
    text-decoration: var(--btn-2-text-decoration);
    color: var(--btn-2-color);
    padding: var(--btn-2-padding);
    background: var(--btn-2-background);
    border: var(--btn-2-border);
    border-radius: var(--btn-2-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-2:hover {
    color: var(--btn-2-color-hover);
    background: var(--btn-2-background-hover);
    border: var(--btn-2-border-hover);
}
a.btn-2 {
    display: inline-block;
}
@media only screen and (max-width: 1100px) {
    .btn-1:hover {
        background: var(--btn-1-background);
        color: var(--btn-1-color);
        border: var(--btn-1-border);
    }
    .btn-2:hover {
        background: var(--btn-2-background);
        color: var(--btn-2-color);
        border: var(--btn-2-border);
    }
}

/* controls ------------------------------ */

input {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    letter-spacing: var(--input-letter-spacing);
    text-transform: var(--input-text-transform);
    text-decoration: var(--input-text-decoration);
    color: var(--input-color);
    padding: var(--input-padding);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
}

input[type="file"] {
    padding: 0;
}

input::file-selector-button {
    font-weight: bold;
    padding: var(--input-padding);
    border-top: none;
    border-right: var(--input-border);
    border-bottom: none;
    border-left: none;
    margin-right: 15px;
    line-height: var(--input-line-height);
}

select {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    letter-spacing: var(--select-letter-spacing);
    text-transform: var(--select-text-transform);
    text-decoration: var(--select-text-decoration);
    color: var(--select-color);
    padding: var(--select-padding);
    background: var(--select-background);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
}

select option {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    text-transform: var(--select-text-transform);
    color: var(--select-color);
}

textarea {
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    letter-spacing: var(--textarea-letter-spacing);
    text-transform: var(--textarea-text-transform);
    text-decoration: var(--textarea-text-decoration);
    color: var(--textarea-color);
    padding: var(--textarea-padding);
    background: var(--textarea-background);
    border: var(--textarea-border);
    border-radius: var(--textarea-border-radius);
    resize: var(--textarea-resize);
}
input[type='checkbox'], input[type='radio'] {
    text-align: left;
    min-width: initial;
    width: 20px;
    margin-right: var(--checkbox-radio-margin);
}
input:focus, textarea:focus, select:focus {
    outline: var(--input-outline-focus);
}
input[type='checkbox']:focus, input[type='radio']:focus {
    outline: none;
}
label {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    text-decoration: var(--label-text-decoration);
    color: var(--label-color);
}
::placeholder {
    font-family: var(--placeholder-font-family);
    font-weight: var(--placeholder-font-weight);
    letter-spacing: var(--placeholder-letter-spacing);
    text-transform: var(--placeholder-text-transform);
    text-decoration: var(--placeholder-text-decoration);
    color: var(--placeholder-color);
    opacity: var(--placeholder-opacity);
}

/* :disabled */


input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--grey);
    border: 1px solid var(--grey);
}


/* animation ------------------------------ */
html {
    scroll-behavior: var(--scroll-behaviour);
}
.enter {
	opacity: 0;
}
.entered {
	animation: fadein 1s ease 0.3s 1 normal forwards;
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@media only screen and (max-width: 800px) {
    .enter {opacity: 1;}
}