:root{
    --form-field-border: rgba(255,255,255,0.07);
    --form-field-focus-border: #6757D6;
    --red: #F54E48;
    --yellow: #F5D251;
    --green: #63D909;
    --blue: #41CBF5;
    --purple: #A85CF5;
    --primary: #a24a85;
    --secondary: #7b1745;
    --tertiary: #d57b9f;
    --page-background: #12141a;
    --post-background: #262836;
    --accent: #91cfc2;
    --divider: #3a3737;
    --primary-text: #ffffff;
    --secondary-text: #c9cdd5;
    --link-color: #b99eba;
    --link-hover: #9e6e9f;
    --footer-link: #b99eba;
    --footer-hover: #9e6e9f;
    --form-field-bg: #282F40;
    --form-field-focus-bg: #2B2F50;
}


/* Fonts */
/* barlow-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/barlow/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/barlow/barlow-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/barlow/barlow-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/barlow/barlow-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{ margin: 0; box-sizing: border-box; }
html, body, #wrap{ margin: 0; padding: 0; height: 100%; font-family: 'Barlow', Arial, Helvetica, sans-serif; position: relative; }

html{ font-size: 18px; }
body{ position: relative; min-height: 100vh; color: var(--primary-text); }
#wrap{ width: 100%; height: 100%; padding: 25px; display: flex; align-items: center; justify-content: center;  min-height: 100vh; height: 100%; position: relative; z-index: 3; }
a{ color: var(--link-color); font-weight: 500; text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }

body.maintenance{ position: relative; background-image: url('../images/galaxybg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; }
body.maintenance::before{ content: ""; z-index: 1; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background-color: rgba(145,34,123,0.5); background: linear-gradient(90deg, rgba(96,12,81,0.75) 0%, rgba(122,16,103,0.5) 40%, rgba(145,34,123,0.35) 100%); }
body.maintenance #site-header .wrap{ background-color: unset; border-bottom: unset; }
body.maintenance #page-wrap{ height: 100%; position: relative; z-index: 3; }
body.maintenance #main-body{ display: flex; height: 100%; position: relative; justify-content: center; align-items: center; }
body.maintenance #main-body #page-content{ max-width: 800px; padding: 30px; text-align: center; }
body.maintenance #main-body #page-content .searchform{ padding: 18px 0; }
body.maintenance #main-body #page-content .searchform .form-wrap{ position: relative; }
body.maintenance #main-body #page-content .searchform #s{ border: solid 1px var(--form-field-border); width: 100%; font-size: 1rem; line-height: 55px; padding: 0 60px 0 12px; border-radius: 8px; background-color: var(--wp--preset--color--form-field-bg); color: var(--wp--preset--color--primary-text); transition: all .2s ease; outline: none; }
body.maintenance #main-body #page-content .searchform #s:focus, body.maintenance #main-body #page-content .searchform #s:active{ background-color: var(--wp--preset--color--form-field-focus-bg); border-color: var(--form-field-focus-border); }
body.maintenance #main-body #page-content .searchform #searchsubmit{ position: absolute; border: none; line-height: 49px; top: 3px; right: 3px; width: 49px; text-align: center; z-index: 1; color: var(--wp--preset--color--primary-text); font-size: 1rem; background-color: rgba(255,255,255,0); transition: all .2s ease; border-radius: 5px; margin: 0; cursor: pointer; }
body.maintenance #main-body #page-content .searchform #searchsubmit:hover{ background-color: rgba(255,255,255,.2); }
body.maintenance #main-body #page-content .home_link{ display: block; width: fit-content; margin: 0 auto; border-radius: 8px; padding: 16px 25px; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-text); transition: all .2s ease; text-decoration: none; }
body.maintenance #main-body #page-content .home_link:hover{ background-color: var(--wp--preset--color--primary-text); color: var(--wp--preset--color--post-background); }
body.maintenance #main-body #page-content p{ font-size: 1rem; padding: 0 0 12px; line-height: 1.4; }
@media only screen and (min-width: 800px){
    body.maintenance #main-body #page-content .error-title{ font-size: 3.1rem; padding: 0 0 18px; line-height: 1.8; }
}
@media only screen and (min-width: 500px) and (max-width: 799px){
    body.maintenance #main-body #page-content .error-title{ font-size: 2.6rem; padding: 0 0 14px; line-height: 1.8; }
}
@media only screen and (max-width: 499px){
    body.maintenance #main-body #page-content .error-title{ font-size: 2.2rem; padding: 0 0 14px; line-height: 1.8; }
}