:root {
  --hs: 12px;
  --rs: 24px;
  --ds: 48px;
}

/*
============================================================================================================
  FONTS
============================================================================================================
*/

    /* HAIRLINE */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Hairline.otf') format('opentype'); 
      font-weight: 300;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Hairline.otf') format('opentype'); 
      font-weight: 300;
      font-style: italic;
    }

    /* THIN */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Thin.otf') format('opentype'); 
      font-weight: 400;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Thin.otf') format('opentype'); 
      font-weight: 400;
      font-style: italic;
    }

    /* NORMAL */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1.otf') format('opentype'); 
      font-weight: normal;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Oblique.otf') format('opentype'); 
      font-weight: normal;
      font-style: italic;
    }

    /* SEMIBOLD */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_SemiBold.otf') format('opentype'); 
      font-weight: 600;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_SemiBoldOblique.otf') format('opentype'); 
      font-weight: 600;
      font-style: italic;
    }

    /* BOLD */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Bold.otf') format('opentype'); 
      font-weight: 700;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_BoldOblique.otf') format('opentype'); 
      font-weight: 700;
      font-style: italic;
    }

    /* BLACK */
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_Black.otf') format('opentype'); 
      font-weight: 800;
      font-style: normal;
    }
    @font-face { 
      font-family: Hurme; 
      src: url('../fonts/HurmeGeometricSans1_BlackOblique.otf') format('opentype'); 
      font-weight: 800;
      font-style: italic;
    }


/*
============================================================================================================
  LAYOUT
============================================================================================================
*/

html, body { font-family: Hurme; }
body { background-color: black; }
body.login { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#login { width: 450px; padding: 0; margin: var(--ds) 0; }
#skip_login { width: 450px; }

/*
============================================================================================================
  LOGO
============================================================================================================
*/

#login h1 a, .login h1 a, .login h1 a:focus {
    background-image: url(/wp-content/uploads/2023/10/quadra_tshirt.svg);
    width:450px;
    height: 150px;
    background-size: 450px 150px;
    background-repeat: no-repeat;
    box-shadow: none;
}

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

.login form { background: transparent; border: solid 1px rgba(255,255,255,0.5); color: white; }
.login form #wp-submit, .login .btn.ghost {
  background-color: transparent;
  padding: var(--hs) var(--ds);
  border: solid 1px white;
  color: white;
  font-weight: 400;
  opacity: 1;
  text-decoration: none;
}

.login form #wp-submit:hover, .login .btn.ghost:hover {
  background-color: white;
  border-color: white;
  color: black;
}

.separator { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: var(--ds); color: white; }
.separator hr { height: 1px; width: 100%; background: rgba(255,255,255,0.5); border: none; }
.separator span { padding: var(--hs); }

#skip_login { display: flex; flex-direction: column; align-items: center; justify-content: center; }

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

.login #backtoblog { display: none; }
.login .privacy-policy-page-link { display: none; }
.login .language-switcher { display: none; }

.login div#login p#nav {text-align: center; color: #fff;}
.login div#login p#nav a {color: #fff;}
.login div#login p#nav #text {color: #fff; padding: 10px;}
.login div#login p#backtoblog {text-align: center;}
.login div#login p#backtoblog a {color: #fff; text-align: center;}