html, body {
    font-family: "w95font";
    font-size: 14px;
    line-height: 16px;
    
    -webkit-font-smoothing: none;
}


/* -‐---------------------------- */
/* -- || DECORATIVE MONITOR || -- */
/* ------------------------------ */

/* -- decorative monitor: outer case -- */
.monitor {
  align-items: center;
  
  background-color: #d6d2c4;
  border-radius: 90% / 3%; /* bulge */
  
  width: 1180px;
  height: 1020px;
  
  box-sizing: border-box;
  box-shadow: inset -3px -3px 15px 6px rgba(0, 0, 0, 0.3);
  
  display: flex;
  flex-direction: column;
}

.bevel-wrap {
  position: relative;
  top: 120px;
  display: flex;
  justify-content: center;
  
  width: 960px;
  height: 740px;
  
  background:
  linear-gradient(
    142.4deg,
    rgba(64,64,64,0.1) 0%,
    rgba(64,64,64,0.1) 50%,
    rgba(64,64,64,0.0) 50%,
    rgba(64,64,64,0.0) 100%,
    transparent 
  ),
  linear-gradient(
    37.6deg,
    rgba(64,64,64,0.2) 0%,
    rgba(64,64,64,0.2) 50%,
    rgba(64,64,64,0.1) 50%,
    rgba(64,64,64,0.1) 100%
  );
  /* background-blend-mode: multiply; */
    
      align-items: center;
   z-index: 1;
}

/* -- decorative monitor: screen-edge -- */
.screen-edge {
    align-items: center;
    position: relative;
  /*  top: 80px;*/
    
    background-color: #242424;
    border-radius: 95% / 1%;
  
    box-sizing: border-box;
    box-shadow: inset 1px 1px 10px 1px black;
    width: 840px;
    height: 652px;
    padding: 10px;
}

/* -- screen effect: radial gradient -- */
.screen {
    position: relative;
    top: 15px;
    right: 10px;
    bottom: 15px;
    left: 10px;
    
    background-color: #008080;
    background-image: radial-gradient(ellipse, #008080 0%, #002734 80%);
    border-radius: 5px;
    
    width: 800px;
    height: 600px;
    
    box-sizing: border-box;
    box-shadow: inset 1px 1px 10px 1px black;
    
    overflow: hidden;
}

/* -- screen effect: screen flicker -- */
/* credit: https://codepen.io/rafael_madureira/pen/Rwrqvbe */
.screen::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  
  z-index: 2;
  
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* -- screen effect: scan-line -- */
/* credit: https://codepen.io/rafael_madureira/pen/Rwrqvbe */
.scan-line {
  position: absolute;
  bottom: 100%;
  
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0.2) 10%,
    rgba(0, 0, 0, 0.1) 100%);
  opacity: 0.1;
  
  width: 100%;
  height: 100px;
  
  z-index: 2;
  
  pointer-events: none;
  animation: scan-line 10s linear infinite;
}

/* -- main screen area -- */
.terminal {
    align-items: center;
    position: relative;
    
    width: 800px;
    height: 600px;
}

/* -------------------------- */
/* -- || WELCOME SCREEN || -- */
/* ---‐---------------------- */

/* -- login container -- */
.login-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    
    font-size: 14px;
    color: #f2f2f2;
    opacity: 0.85;
    
    overflow: hidden;
    z-index: 1;
}

.account-row {
    display: flex;
    gap: 32px;
}

.account-button img {
    margin-bottom: 7px;
    
    width: 96px;
    height: 96px;
    
    object-fit: cover;
    
    border: 2px solid #cfcfcf;
    border-radius: 6px;
    
    background: #111;
}

.account-button span {
    font-size: 14px;
}

.account-button,
.account-button:link,
.account-button:visited {
    text-decoration: none;
    color: #f2f2f2;
}

.account-button:hover img {
    border-color: #9fffd8
}

.account-button:hover span {
    text-decoration: underline;
}

/* ----------------- */
/* -- || FONTS || -- */
/* ---‐------------- */

/* -- Win95 -- */
/* source: https://arnesava.github.io/w95font/ */
@font-face {
  font-family: "w95font";
  src: url("fonts/w95font.woff") format("woff"),
       url("fonts/w95font.woff2") format("woff2"),
       url("fonts/w95font-bold.woff") format("woff"),
       url("fonts/w95font-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* ---------------------- */
/* -- || ANIMATIONS || -- */
/* ---‐------------------ */

/* -- flicker -- */
/* source: https://codepen.io/rafael_madureira/pen/Rwrqvbe */
@keyframes flicker {
  0%    { opacity: 0.27861; }
  5%    { opacity: 0.34769; }
  10%   { opacity: 0.23604; }
  15%   { opacity: 0.90626; }
  20%   { opacity: 0.18128; }
  25%   { opacity: 0.83891; }
  30%   { opacity: 0.65583; }
  35%   { opacity: 0.67807; }
  40%   { opacity: 0.26559; }
  45%   { opacity: 0.84693; }
  50%   { opacity: 0.96019; }
  55%   { opacity: 0.08594; }
  60%   { opacity: 0.20313; }
  65%   { opacity: 0.71988; }
  70%   { opacity: 0.53455; }
  75%   { opacity: 0.37288; }
  80%   { opacity: 0.71428; }
  85%   { opacity: 0.70419; }
  90%   { opacity: 0.70030; }
  95%   { opacity: 0.36108; }
  100%  { opacity: 0.24387; }
}

/* -- scan-line -- */
/* source: https://codepen.io/rafael_madureira/pen/Rwrqvbe */
@keyframes scan-line {
  0%    { bottom: 100%; }
  80%   { bottom: 100%; }
  100%  { bottom: -20%; }
}