/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/scss/login.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .mobile-only {
    display: flex;
  }
}

.tablet-only {
  display: none;
}
@media (max-width: 768px) {
  .tablet-only {
    display: flex;
  }
}
@media (min-width: 768px) {
  .tablet-only {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .tablet-only {
    display: none;
  }
}

.desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .desktop-only {
    display: flex;
  }
}

/*
 * Variables
 */
/*------------------------------------*\
               # Colors
\*------------------------------------*/
:root {
  --black: #000000;
  --black-darker: black;
  --black-darkest: black;
  --black-lightest: #333333;
  --black-lighter: #1a1a1a;
  --white: #FFFFFF;
  --white-darker: #e6e6e6;
  --white-darkest: #cccccc;
  --white-lightest: white;
  --white-lighter: white;
  --lightGray: #eceaea;
  --lightGray-darker: #d4cfcf;
  --lightGray-darkest: #bcb4b4;
  --lightGray-lightest: white;
  --lightGray-lighter: white;
  --gray: #D9D9D9;
  --gray-darker: silver;
  --gray-darkest: #a6a6a6;
  --gray-lightest: white;
  --gray-lighter: #f3f3f3;
  --darkGray: #3C3A3A;
  --darkGray-darker: #222121;
  --darkGray-darkest: #080808;
  --darkGray-lightest: #706c6c;
  --darkGray-lighter: #565353;
  --red: #CE1C22;
  --red-darker: #a1161b;
  --red-darkest: #741013;
  --red-lightest: #ea666a;
  --red-lighter: #e4393f;
  --green: #4CAF50;
  --green-darker: #3d8b40;
  --green-darkest: #2d682f;
  --green-lightest: #92cf94;
  --green-lighter: #6ec071;
  --blue: #0077FF;
  --blue-darker: #005fcc;
  --blue-darkest: #004799;
  --blue-lightest: #66adff;
  --blue-lighter: #3392ff;
  --yellow: #FFC400;
  --yellow-darker: #cc9d00;
  --yellow-darkest: #997600;
  --yellow-lightest: #ffdc66;
  --yellow-lighter: #ffd033;
}

.has-black-background-color {
  background-color: var(--black);
}

.has-black-color {
  color: var(--black);
}
.has-black-color .icon svg {
  fill: var(--black);
}

.has-white-background-color {
  background-color: var(--white);
}

.has-white-color {
  color: var(--white);
}
.has-white-color .icon svg {
  fill: var(--white);
}

.has-lightGray-background-color {
  background-color: var(--lightGray);
}

.has-lightGray-color {
  color: var(--lightGray);
}
.has-lightGray-color .icon svg {
  fill: var(--lightGray);
}

.has-gray-background-color {
  background-color: var(--gray);
}

.has-gray-color {
  color: var(--gray);
}
.has-gray-color .icon svg {
  fill: var(--gray);
}

.has-darkGray-background-color {
  background-color: var(--darkGray);
}

.has-darkGray-color {
  color: var(--darkGray);
}
.has-darkGray-color .icon svg {
  fill: var(--darkGray);
}

.has-red-background-color {
  background-color: var(--red);
}

.has-red-color {
  color: var(--red);
}
.has-red-color .icon svg {
  fill: var(--red);
}

.has-green-background-color {
  background-color: var(--green);
}

.has-green-color {
  color: var(--green);
}
.has-green-color .icon svg {
  fill: var(--green);
}

.has-blue-background-color {
  background-color: var(--blue);
}

.has-blue-color {
  color: var(--blue);
}
.has-blue-color .icon svg {
  fill: var(--blue);
}

.has-yellow-background-color {
  background-color: var(--yellow);
}

.has-yellow-color {
  color: var(--yellow);
}
.has-yellow-color .icon svg {
  fill: var(--yellow);
}

/*------------------------------------*\
    # Simple Typography Settings
\*------------------------------------*/
:root {
  --font-family: "Inter", sans-serif;
  --header-font-family: "Inter", sans-serif;
  --secondary-font-family: "Inter", sans-serif;
  --border-radius: 12px;
  --page-width: 1600px;
  --content-width: 900px;
  --gutter: 1rem;
  --gutter-2: calc(var(--gutter) / 2);
  --gutter-4: calc(var(--gutter) / 4);
  --gutter-6: calc(var(--gutter) / 6);
  --gutter-8: calc(var(--gutter) / 8);
  --gutter-2x: calc(var(--gutter) * 2);
  --gutter-4x: calc(var(--gutter) * 4);
  --gutter-6x: calc(var(--gutter) * 6);
  --gutter-8x: calc(var(--gutter) * 8);
  --gutter-0: calc(var(--gutter) * 0);
  --gutter-auto: auto;
  --header-z-index: 999999;
  --shiny: linear-gradient(
    90deg,
    rgba(244, 244, 244, 1) 39%,
    rgba(159, 159, 159, 0.2) 100%
  );
  --shiny-solid: #fff var(--shiny);
}
@media (max-width: 1024px) {
  :root {
    --gutter: 0.5rem;
  }
}

body {
  background: url(images/login-bg.1af7f51a.jpg) center right/cover;
}

#login {
  background: var(--red);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
}
@media (min-width: 1024px) {
  #login {
    margin-left: 0;
  }
}
#loginform {
  border-radius: 10px;
}
#login #nav,
#login #nav a,
#login #backtoblog,
#login #backtoblog a {
  color: #fff;
}

.wp-login-logo {
  padding: var(--gutter);
  margin-bottom: var(--gutter);
  background: #fff;
  border-radius: 10px;
}

#login h1 a,
.login h1 a {
  background-repeat: no-repeat;
  padding-bottom: 0;
  margin-bottom: 0;
  height: auto;
  min-height: 15vh;
  width: 25vh;
}

/*# sourceMappingURL=login.css.map*/