:root, [data-theme='light'] {

    /****** colours ******/
      --foreground:#2f2831;
      --background:#fefbf6;
      --background-dark: #fcf3e5;
      --light-background-dark: #fcf3e5;
      --background-darker: #eddfca;
  
      --primary:#4ac7e370; 
      --secondary: #385a2a;
      --tertiary: #c2d879;
      --boldital: #1b6461;
      --error: #a80000;
  
      --active: #ccedf1;
      --active-text:#4f5f1c;
  
      --button-primary: #dcf1f3;
      --button-primary-dark: #afe4ee;
      --button-hover: #e0e9b9;
      --button-hover-dark: #c2d879;
      --button-click: var(--button-hover-dark);
      --button-click-dark: #90a34e;
      --click-color: var(--foreground);
  
      --button-color: var(--foreground);
  
      --input-background: white;
      --input-color: black;
      --input-border: gray;
  
      --link-primary: #295570;
      --link-accent:#385a2a;
  
      --selection-background: var(--foreground);
      --selection-color: var(--button-primary);
  
      --cloud-color: var(--background);
      --cloud-text:  var(--foreground);
      --cloud-border: var(--foreground);
  
      --logo-line: var(--foreground);
      --desktop-taskbar: #dcf1f3;
      --bulb-glow: transparent;
  
    /****** images ******/
      --bullet-point: url(/assets/images/misc/lightbulletpoint.png);

      --sua: url(/assets/images/index/sua.png);
      --sky: url(/assets/images/index/day.png);
      --cloudy: url(/assets/images/index/cloudy.png);    
      --bulb:url(/assets/images/index/darkbulb.webp);
  
    /****** sizing ******/
    --cloudsize: 30px;
    --cloudround: 30;
  }
  
    
  [data-theme='dark'] {
  
    /****** colours ******/
      --foreground:#fefbf6;
      --background:#2f2831;
      --background-dark: #201b21;
      --light-background-dark: #eddfca;
      --background-darker: #140f14;
  
      --primary:#4ac7e370;
      --secondary:#eec9de;
      --tertiary:#b69bac;
      --boldital: #f8b4c9;
      --error: #e7acac;
  
      --active: #2f4855;
      --active-text:#f2d9e7;
  
      --button-primary: #3d6f81;
      --button-primary-dark: #344553;
      --button-hover: #eec9de;
      --button-hover-dark: #b69bac;
      --button-color: var(--background);
      --button-click: var(--button-hover-dark);
      --button-click-dark: #8a677d;
      --click-color: var(--foreground);
  
      --cloud-color: var(--background);
      --cloud-text:  var(--foreground);
      --cloud-border: var(--foreground);
  
      --link-primary:#83b3d0;
      --link-accent:#eec9de;
      
      --selection-background: var(--foreground);
      --selection-color: #2b4d5a;
      
      --logo-line: var(--foreground);
      --desktop-taskbar: var(--button-primary);
      --bulb-glow: var(--foreground);
  
    /****** images ******/
      --bullet-point: url(/assets/images/misc/darkbulletpoint.png);
      
      --sua: url(/assets/images/index/sua.png);
      --sky: url(/assets/images/index/night.png);
      --cloudy: url(/assets/images/index/cloudydark.png);
      --bulb:url(/assets/images/index/lightbulb.webp);
      
    /****** sizing ******/
    --cloudsize: 30px;
    --cloudround: 30;
    --sidebar: 280px;
  }

  @media (scripting: none) {
  @media (prefers-color-scheme: dark) {      
    :root, [data-theme='dark'] {
    
      /****** colours ******/
        --foreground:#fefbf6;
        --background:#2f2831;
        --background-dark: #201b21;
        --light-background-dark: #eddfca;
        --background-darker: #140f14;
    
        --primary:#4ac7e370;
        --secondary:#eec9de;
        --tertiary:#b69bac;
        --boldital: #f8b4c9;
        --error: #e7acac;
    
        --active: #2f4855;
        --active-text:#f2d9e7;
    
        --button-primary: #3d6f81;
        --button-primary-dark: #344553;
        --button-hover: #eec9de;
        --button-hover-dark: #b69bac;
        --button-color: var(--background);
        --button-click: var(--button-hover-dark);
        --button-click-dark: #8a677d;
        --click-color: var(--foreground);
    
        --cloud-color: var(--background);
        --cloud-text:  var(--foreground);
        --cloud-border: var(--foreground);
    
        --link-primary:#83b3d0;
        --link-accent:#eec9de;
        
        --selection-background: var(--foreground);
        --selection-color: #2b4d5a;
        
        --logo-line: var(--foreground);
        --desktop-taskbar: var(--button-primary);
        --bulb-glow: var(--foreground);
    
      /****** images ******/
        --bullet-point: url(/assets/images/misc/darkbulletpoint.png);
        
        --sua: url(/assets/images/index/sua.png);
        --sky: url(/assets/images/index/night.png);
        --cloudy: url(/assets/images/index/cloudydark.png);
        --bulb:url(/assets/images/index/lightbulb.webp);
        
      /****** sizing ******/
      --cloudsize: 30px;
      --cloudround: 30;
      --sidebar: 280px;
    }
  }
}
     
  
.themebulb {
    position: relative;
    z-index: 3;
    top: -30px;
    background-image:var(--bulb);
    background-position: bottom;
    background-color: transparent;
    border:0;
    height:230px;
    width:76px;
    filter: drop-shadow(var(--bulb-glow) 0 0 10px) drop-shadow(var(--bulb-glow) 0 0 3px);
    transition:filter 2s ease-in-out;
    margin:0 auto;
    display: block;
    }
    
    .on, .off {
      animation-name: pull;
      animation-duration: 1.2s;
      animation-timing-function: ease;
    }
    
      @keyframes pull {
        from {
            top: -30px;
        }
        50% {        
            top:-6px;
        }
        to {
            top: -30px;
        }
      }
       .centercontent {  scrollbar-width: auto;
  scrollbar-color: transparent transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
} 
  #login {
    position:absolute;
    width:100%;
    background:var(--background);
    color: var(--forekground);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100dvh;
    z-index: 999;
  }
  
  #error {
    color: var(--error);
    background: var(--background-dark);
    border: 1px solid var(--error);
    display: none;
    padding: 6px;
    margin-bottom: 10px;
  }
  
  .loginscreen1, .loginscreen2 {
    margin-bottom: 10px;
  }
  
  #usernameInput { width: 217px; }
  #pretendPass { width: 283px;}
  
  .loginscreen1, #pretendPass:disabled, .loginscreen2:disabled {
    opacity: 1;
    background-color: var(--input-background);
    color: var(--input-color);
    border: 1px solid var(--input-border);
    filter: none;
    -webkit-text-fill-color: var(--input-color);
    box-shadow: none;
    border-radius: 3px;
  }
  
  #greeting {
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    width: 100%;
  }
  .overflow { overflow: hidden;}
  .mainhide { display:none;}
  .mainshow { display:flex;}
  .yourname { color: var(--secondary);}
  .yourusername {
    text-decoration: wavy underline;
    text-underline-offset: 4px;
    color:var(--secondary);
    font-weight: bold;
  }
  
  .fadeout {
      animation: poof 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
  }
  
   @keyframes poof {
    0% {
      transform: scale(1);
      filter: blur(0px);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      filter: blur(4px);
      opacity: 0;
    }
  }
  
  .curtaincall {
    animation: vanish 0.75s linear;
    animation-fill-mode: forwards;
  }
  
  @keyframes vanish {
    from {opacity: 1; }
    to {opacity: 0; }
  }
  
  #floatzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
  }
  
  #eventmessage {
    background: var(--button-hover);
    color: var(--button-color);
    display: none;
    width:200px;
    padding: 5px;
    border: 1px var(--foreground) solid;
    max-height: 66px;
    position:relative;
    top: 125px;
    text-align: center;
  }
  
  .fadein {
    animation: fadingin 1s linear;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadingin {
    from {display:none;}
    to {display:block;}
  }

  .overall {
    max-width: 980px;
  }
  
  .info {
    position:relative;
    top: 5px;
  }
  
  
  .welcome {
    width: 500px;
    height: 55dvh;
  }

  .onehundred {
    margin-top: 3px;
    height: 51dvh;
  }

  .twohundred {
    width: 50%;
    height: 86px;
  }

  .doubleabv {
    width: 100%;
    height: 86px;
  }
  
  .themebox {
  width:100%;
  max-width: 190px;
    height: 279px;
  }
  
  .fivehundred {
    width: 500px;
  }
  
  .hold {
    width: 500px;
    height: 200px;
    margin:0 auto;
  }
  .eventhold {
    height: 0;
  }

  .logohold {
    width: 500px;
    height:64px;
    margin:0 auto;
    pointer-events: none;
  }

  .logo {
    pointer-events: none;
    width: 366px;
    height: 200px;
    background-image:url(/assets/images/index/logo.png);
    background-size:cover;
    background-repeat: no-repeat;
    position:relative;
    z-index: 5;
    filter: drop-shadow(var(--logo-line) 1px 0 0) drop-shadow(var(--logo-line) -1px 0 0)
    drop-shadow(var(--logo-line) 0 1px 0) drop-shadow(var(--logo-line) 0 -1px 0);
  }
  
  html[data-theme="light"] .logo {
    filter: drop-shadow(var(--background) 1px 0 0) drop-shadow(var(--background) -1px 0 0)
    drop-shadow(var(--background) 0 1px 0) drop-shadow(var(--background) 0 -1px 0) drop-shadow(var(--logo-line) 1px 0 0) drop-shadow(var(--logo-line) -1px 0 0)
    drop-shadow(var(--logo-line) 0 1px 0) drop-shadow(var(--logo-line) 0 -1px 0);
  }
  
  .sua {
    float: right;
    width: 300px;
    height: 246px;
    background-image:var(--sua);
    background-size:cover;
    background-repeat: no-repeat;
    position:relative;
    z-index: 4;
    margin:0 auto;
  }

  
  /* 
  @media only screen and (max-width: 1300px) {
    .welcome { height: 351px !important; }
    .onehundred { height: 325px !important; }
  } */
     
  /* smaller screens */
  @media only screen and (max-width: 920px) {     
    #eventmessage {
      position: relative;
      top: 55px;
    }
  
    #eventmessage:hover {
      z-index: 5;
    }

    .hold, .logohold, .themebox, .welcome, .statwindow {
      width: 100%;
    }
  
    .hold {
      height: 130px;
    }
  
    .sua {
      width: 200px;
      height: 164px;
    }
  
    .logo {
      width:300px;
      height:164px;
      float:left;
    }
  
    .logohold {
      height: 70px;
    }
  
  }
  
  @media only screen and (max-width: 400px) {    
    .logohold {
      height: 110px;
    }
  }