/* Light mode */
:root {
    --body-bg: #F6F6F6;
    --body-color: #000000;
 }
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #303030;
        --body-color: #FFFFFF;
    }
 }
 
 body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
 body, html {
   height: 100%;
   background: var(--body-bg);
   color: var(--body-color);
   line-height: 1.8;
 }
 h2 {
  text-align: center;
 }
  
 .w3-wide {letter-spacing: 10px;}
 .w3-hover-opacity {cursor: pointer;}
 
 /* Turn off parallax scrolling for tablets and phones */
 @media only screen and (max-device-width: 1600px) {
   .bgimg-1, .bgimg-2, .bgimg-3 {
     background-attachment: scroll;
     min-height: 400px;
   }
 }

 .content {
  color: white;
 }
 
 .button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: #555555; 
  color: white; 
  border: 2px solid #2194f3;
}

.button1:hover {
  background-color: #2194f3;
  color: white;
}

.input {
  background-color: #555555;
  color: white;
  margin: 10px;
}

.userid{
  size: 250px;
}