:root {
  --dark-grey:#151515; 
  --light-grey: #676767;
  --grey: #4f4f4f; 
  --blue: #00ffff;
  --red: rgb(249 82 108);
  --orange: rgb(249 177 82);
  --burnt-orange: #cb4d00;
  --act-orange: #FE5000
}

html {font-size:62.5%; overflow-x:hidden; height: 100%; }

/* --------------------------------
/* TYPOGRAPHY
/* -------------------------------- */

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; color: var(--orange); }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 600px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

* { position: relative; }
p { margin-bottom: 0; }
p.large { font-size: 2.5rem; }
p.small { font-size: 1.4rem; }
body { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1.6rem; background-color: #000; color: #fff; min-height: 100%;  }
body:before { content: ''; opacity: 0.4; display: block; top: 0; left: 0; width: 100%; height: 100%; position: fixed;background-image: url('../images/act-logo-letter-gradient-black.jpg'); background-repeat:repeat; background-size: 130px 125px; }

img { max-width: 100%;}
code { color: var(--blue);}
.danger {color: var(--red);}
.orange-text { color: var(--orange); }
.red-text { color: var(--red); }
.grey-text { color: var(--light-grey); }
.blue-text { color: var(--blue); }

/* --------------------------------
/* BUTTONS
/* -------------------------------- */

.btn-sso { background-color: #d0d0d0; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; box-shadow: inset 0px -2px 6px 1px #555555; }
.btn-sso .inner { display: flex; gap: 10px; }
.btn-sso img { width: 30px; height: auto; }
.btn-sso .inner { display: flex; gap: 10px; font-size: 1.8rem; font-weight: bold; }

/* --------------------------------
/* SCAFFOLDING
/* -------------------------------- */

.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.row { display: flex; flex-direction: row; gap: 20px; width: 100%; }
.row .col { flex: 1; }

/* --------------------------------
/* LOGIN
/* -------------------------------- */
div#login { height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.login-form { display: flex; justify-content: center; padding: 20px 0;}
#login .login-header { margin-top: 60px; }
#login .login-header * {text-align: center;}
#login .login-header h1 { font-size: 6rem; }
#login .robot-rock { margin: 60px auto 30px; text-align: center; }
#login form { background-color: var(--dark-grey); padding: 20px 30px; border-radius: 16px; width: 100%; max-width: 360px; margin: 0 auto; }
#login label, #login p.small { opacity: 0.7; }
#login .site-logo { display: flex; gap: 10px; flex-direction: row; justify-content: center; align-items: center; }
#login .site-logo span {color: var(--act-orange); font-size: 3.8rem; font-weight: bold;}
#login .site-logo img { width: 50px; height: auto; }

/* --------------------------------
/* FORMS
/* -------------------------------- */

label {display: block; }
input[type="text"],input[type="email"],input[type="password"],input[type="date"] { height: 40px; padding: 8px; box-sizing: border-box; width: 100%; margin: 15px 0; }

p + button { margin-top: 16px; }
button,
button a { font-size: 1.8rem; margin: 15px 0; font-weight: 500; height: auto; letter-spacing: 1px; background-color: #000; border: 2px solid rgb(255, 255, 255); color: #fff; padding: 7px 10px; text-decoration: none; white-space: nowrap; }
button.btn-danger,
button.btn-danger a { border: 2px solid var(--red); color: var(--red); }
button.btn-primary,
button.btn-primary a { border: 2px solid var(--orange); color: var(--orange); }
button a { border: none !important;}
.form-control { margin-bottom: 8px; }

/* --------------------------------
/* ERROR PAGE
/* -------------------------------- */

#error { margin: 60px auto; align-self: center; text-align: center; }
#error h1 { font-size: 6rem; }
#error .icon { display: inline-block; flex: 30px 0 0; padding-right: 10px; display: flex; align-items: center; }
#error .icon svg { max-width: 50px;}
#error .breadcrumb a { font-size: 2.0rem; text-decoration: none; color: var(--blue); display: flex; align-items: center; justify-content: center; }