/* @charset "UTF-8"; */
/* --- disable text selection highlighting, smooth scrolling --- */
* {
  user-select: none;
  scroll-behavior: smooth;
}

/* --- fonts --- */
@font-face {
    font-family: Merriweather;
    src: url(fonts/Merriweather-Regular.woff);
}

@font-face {
    font-family: Merriweather;
    src: url(fonts/Merriweather-Italic.woff);
    font-style: italic;
}

@font-face {
    font-family: Merriweather;
    src: url(fonts/Merriweather-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: Merriweather;
    src: url(fonts/Merriweather-BoldIt.woff);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Oswald;
    src: url(fonts/Oswald-Medium.woff);
}

@font-face {
    font-family: OpenSans;
    src: url(fonts/OpenSans.woff);
}

/* --- page and background image styles --- */
html {
  color: white;
  /* background-color: #555; */
  background-color: var(--color-bg);
  background-image: url('../images/Group_2839_x2_repeat3.jpg');
  background-repeat: repeat-x;
  background-size: 50% 100%;

  margin: 0;
  padding: 0;

  /* border: 10px solid cyan; */
}

body {
  margin: 0;
  padding: 0;
}

/* --- logo, navigation and wrapper --- */

nav {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #700000;
  min-height: 50px;
}

.page-footer {
  /* margin-top: 200px; */
  /* padding-bottom: 20px; */
}

/* --- instruction styles ---*/
.info h2, .info h3 {
  font-family: Oswald, sans-serif;
  font-size: 28px;
  color: #ffffff;
  /* font-weight: bold;
  font-stretch: ultra-condensed; */
  text-transform: uppercase;
  margin-bottom: 0;
}

.info h3 {
  font-size: 18px;
}

.info p{
  font-family: Merriweather, serif;
  font-size: 14px;
  color: #ffffff;
  /* font-stretch: extra-expanded; */

  margin-top: 0;
}

.info a{
  font-family: Merriweather, serif;
  font-size: 14px;
  color: #a0a0a0;
  font-weight:bold;
  text-decoration: none;
}

.info a:hover{
  color: #c00000;
  font-weight:bold;
}

.page-footer a, .page-footer p {
  font-family: Ariel, sans-serif;
  font-size: 10px;
}

.page-footer p {
  /* color: var(--login-bg); */
  color: var(--login-fg);
  text-align: center;
}

.page-footer a {
  color: var(--header-fg);
  text-decoration: none;
}


body#login .page-footer p {
  color: #111111;
  text-align: center;
}

body#login .page-footer a {
  color: #700000;
  text-decoration: none;
}

.full-width {
  width: 100%;
}

/* buttons and misc */
button, input[type="submit"] {
  color: white;
  background-color: #700000;
  /* border-radius: 6px; */
  border: none; /* 0 */
  padding: 10px 10px;
  margin: 0 10px 10px 0;
  /* opacity: 0.7; */
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
  transition-timing-function: ease-out;
  font-size: medium;
}

button:hover, input[type="submit"]:hover {
  background-color: rgba(180,0,0,1);
  /* opacity: 1.0; */
  transform: scale(1.05);
}

button:active, button:focus, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: rgba(255,0,0,1);
  /* opacity: 1.0; */
  transform: scale(1.05);
  border:none;
  outline:none;
}

form#login {
  margin: 0;
}

.login-wrapper {
  padding: 1rem;
}

.login-wrapper h2 {
  margin-top: 0;
}

.login-wrapper button, .login-wrapper input[type="submit"] {
  width:100%;
  margin: 0 0 10px 0;
}


/* animations and transitions -- DONT REMOVE TAILING COMMA ".info, {..." */
#background, #wrapper, .logo, .info, {
    opacity: 0;
    transition: opacity 1s;
    transition-timing-function: ease-out;
}