/* Hi! */

  :root {
    /* Page & Text */
    --color-bg-page: #5ab3f2;
    --color-text-light: white;
    --color-text-dark: #0c0c0c;
    --color-text-accent: #f9d3d2;
  
    /* Win95 UI Elements */
    --color-ui-grey: #C0C0C0;
    --color-ui-grey-active: #b9b9b9;
    --color-ui-title-bar: #055995;
    --color-border-highlight: #FFFFFF;
    --color-border-shadow: #404040;
    --color-shadow-hard: #000000;
  
    /* Gradients */
    --color-gradient-start: #5ab3f2;
    --color-gradient-end: #f4a5a5;
    
    /* Ticker */
    --color-ticker-bg: #000000;
    --color-ticker-text: #26dcf4;
    
    /* Profile */
    --color-profile-bg: #0d1a24;
    --color-profile-border: black;
  }
  
  /* Trying to make multiple themes readily available */
  
  .pink {
    /* Page & Text */
    --color-bg-page: #5ab3f2;
    --color-text-light: white;
    --color-text-dark: #0c0c0c;
    --color-text-accent: #f9d3d2;
  
    /* Win95 UI Elements */
    --color-ui-grey: #FDBFC5;
    --color-ui-grey-active: #b9b9b9;
    --color-ui-title-bar: #FCABB3;
    --color-border-highlight: #FFE5E8;
    --color-border-shadow: #FB98A1;
    --color-shadow-hard: #fcabb3;
  
    /* Gradients */
    --color-gradient-start: #5ab3f2;
    --color-gradient-end: #f4a5a5;
    
    /* Ticker */
    --color-ticker-bg: #000000;
    --color-ticker-text: #26dcf4;
    
    /* Profile */
    --color-profile-bg: #0d1a24;
    --color-profile-border: black;
  }
  
  /* ============================================= */
  /* Actual styling and all
  /* ============================================= */
  
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background-color: var(--color-bg-page);
    font-family: Tahoma;
    color: var(--color-text-dark);
  }
  
  #cool-main-text {
    width: 900px;
    color: var(--color-text-dark);
    border: var(--color-text-accent) dashed 2px;
    margin: 0 auto;
    padding: 10px;
  }
  
  /*Banner Stuff */
  #banner-wrapper {
    width: 100%;
    background: var(--color-bg-page);
    padding: 0 0;
  }
  
  .win95-window {
    width: 900px;
    margin: 0 auto;
    padding: 3px;
    background: var(--color-ui-grey);
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
  }
  
  .win95-window .title-bar {
    background: var(--color-ui-title-bar);
    color: var(--color-text-dark);
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    padding: 4px 5px;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .win95-window .title-bar-buttons {
    display: flex;
  }
  
  .win95-window .win95-button {
    width: 20px;
    height: 20px;
    background: var(--color-ui-grey);
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin-left: 3px;
    cursor: default;
  }
  
  .win95-window .window-content {
    padding: 10px;
    background: linear-gradient(45deg, var(--color-gradient-start), var(--color-gradient-end));
    background-size: 100% 100%;
    border-top: 2px solid var(--color-border-shadow);
    border-left: 2px solid var(--color-border-shadow);
    border-right: 2px solid var(--color-border-highlight);
    border-bottom: 2px solid var(--color-border-highlight);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .win95-window .window-content#banner1995 {
    height: 300px;
    pointer-events: none;
  }
  
  .window-content#banner1995 img {
    z-index: 10;
    pointer-events: none;
  }
  
  .banner-logo {
    flex-basis: 300px;
    flex-shrink: 0;
    width: 300px;
    height: auto;
    transform: translateY(58px);
    pointer-events: none;
  }
  
  .banner-name {
    flex-basis: 500px;
    flex-shrink: 0;
    max-width: 100%;
    height: auto;
  }
  
  /* Cool gifs on the sides */
  .Spades {
    position: fixed;
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  
  /* Stuff for the top buttons */
  .nav-bar-container {
    width: 900px;
    height: 90px;
    background: var(--color-ui-title-bar);
    padding: 10px 0px;
    margin: 0px auto;
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
    position: relative;
    display: flex;
    z-index: 1;
  }
  
  .nav-bar {
    width: 850px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
  }
  
  .cassette-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    color: var(--color-text-dark);
    background: var(--color-ui-grey);
    padding: 5px;
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
    position: relative;
  }
  
  .cassette-button:active {
    background: var(--color-ui-grey-active);
    border-top: 2px solid var(--color-border-shadow);
    border-left: 2px solid var(--color-border-shadow);
    border-right: 2px solid var(--color-border-highlight);
    border-bottom: 2px solid var(--color-border-highlight);
    box-shadow: none;
    z-index: 2;
  }
  
  .cassette-button img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    z-index: 2;
  }
  
  .cassette-button .button-text {
    padding: 0 10px;
    font-size: 16px;
  }
  
  /* Pseudo buttons for blog and art */
  
  .cassete-button:nth-child(1)::before,
  .cassete-button:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 11;
  }
  
  /* Stuff for the marquee */
  
  .stock-ticker {
    background-color: var(--color-ticker-bg);
    color: var(--color-ticker-text);
    font-family: Ticker;
    text-transform: uppercase;
    padding: 0px;
    border: 4px solid var(--color-ui-grey);
    border-left: 0px;
    border-right: 0px;
    display: flex;
    font-size: 32px;
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
    overflow: hidden;
    position: fixed;
    z-index: 1000;
  }
  
  .stock-ticker a {
    color: var(--color-ticker-text);
  }
  
  .stock-ticker img {
    vertical-align: middle;
    margin-left: 0px;
    height: 50px;
  }
  
  .stock-ticker a,
  .stock-ticker span {
    margin-left: 0px;
    text-decoration: none;
  }
  
  .stock-ticker-content {
    display: flex;
    width: max-content;
    position: relative;
  }
  
  /* Stuff for the grid */
  
  .cool-grid {
    display: flex;
    width: 900px;
    margin: 0 auto;
    gap: 6px;
  }
  
  .home-boxes {
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
    margin: 3px 0;
    padding: 10px;
    background: var(--color-ui-grey);
    color: var(--color-text-dark);
  }
  
  .home-boxes#WebStats {
    margin: 0 0 3px 0;
  }
  
  #who-am-I {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 0px;
    flex: 4;
    aspect-ratio: 1/1;
  }
  
  #updates {
    flex: 1.5;
  }
  
  #sum-stuff {
    flex: 1.5;
  }
  
  #profile {
    border: 5px solid var(--color-profile-border);
    background: var(--color-profile-bg);
    border-radius: 10px;
    aspect-ratio: 1/1;
  }
  
  #profile img {
    display: flex;
    justify-content: center;
    height: 100%;
  }
  
  #icon-stack {
    margin-top: 10px;
    padding-left: 10px;
  }
  
  #icon-stack img {
    display: block;
    width: 100%;
    margin-bottom: 5px;
  }
  
  #profile-info {
    display: block;
    height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-text-light);
    padding: 10px;
    width: 100%;
    grid-column: 1/3;
    overflow-wrap: break-word;
    font-family: Tahoma;
  }
  
  /* WebStat */
  
  #WebStats {
    flex: 1;
    height: 60px;
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  
  #WebStats img {
    height: 25px;
    width: auto;
  }
  
  /* Drawers */
  
  .drawer {
    position: fixed;
    top: 55px; 
    z-index: 1; 
    background: var(--color-ui-grey);
    color: var(--color-text-dark);
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
    width: 350px;
    
    transform: translateY(calc(-100% + 12px)); 
    transition: transform 1s ease-in-out; 
  }
  
  .drawer.is-open {
    transform: translateY(0);
  }
  
  .drawer-content {
    padding: 10px;
  }
  
  .drawer-handle {
    width: 100%;
    height: 12px;
    background: var(--color-ui-title-bar);
    border-bottom: 2px solid var(--color-border-shadow);
    border-top: 2px solid var(--color-border-highlight);
    cursor: pointer;
  }
  
  #left-drawer {
    left: calc(50% - 530px - 350px);
  }
  
  #right-drawer {
    left: calc(50% + 530px);
  }
  
  .drawer-title-bar {
    background: var(--color-ui-title-bar);
    color: var(--color-text-dark);
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    padding: 4px 5px;
    user-select: none;
  }
  
  .drawer-item {
    border-bottom: 2px solid var(--color-border-shadow);
    border-top: 2px solid var(--color-border-highlight);
    padding: 8px; 
  }
  
  .drawer-title-bar + .drawer-item {
    border-top: none;
  }
  
  .drawer-item:last-child {
    border-bottom: none;
    border-top: none;
  }
  
  .obsession-box {
    display: flex;       
    align-items: center; 
    gap: 8px;            
  }
  
  .obsession-cover img {
    width: 70px;  
    height: 70px; 
    display: block;
    
    border-top: 2px solid var(--color-border-shadow);
    border-left: 2px solid var(--color-border-shadow);
    border-right: 2px solid var(--color-border-highlight);
    border-bottom: 2px solid var(--color-border-highlight);
  }
  
  .obsession-info p {
    margin: 4px 0 0 0;
    font-size: 14px;
  }
  
  /* Requesting a username */
  
  .popup-content {
    display: block; 
    background: var(--color-ui-grey); 
    padding: 20px;
  }
  
  .popup-content .popup-text {
    margin-top: 0;
    margin-bottom: 8px;
    text-align: center; 
  }
  
  .input-group {
    display: flex; 
  }
  
  /* Context-specific layout for the input */
  .input-group #name-input {
    flex: 3;
  }
  
  /* Context-specific layout for the button */
  .input-group #name-submit-btn {
    flex-shrink: 0; 
    margin-left: 6px; 
    white-space: nowrap; 
  }
  
  #name-popup-wall {
    display: none; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 10; 
  }
  
  /* Base styles for the input field */
  #name-input {
    padding: 8px 5px; /* Kept the winning padding rule */
    font-size: 1rem;
    font-family: Tahoma, sans-serif;
    border-top: 2px solid var(--color-border-shadow);
    border-left: 2px solid var(--color-border-shadow);
    border-right: 2px solid var(--color-border-highlight);
    border-bottom: 2px solid var(--color-border-highlight);
    background: var(--color-border-highlight); 
    box-shadow: none;
    color: var(--color-text-dark);
  }
  
  /* Base styles for the submit button */
  #name-submit-btn {
    font-family: Tahoma, sans-serif;
    font-size: 0.5rem;
    font-weight: bold;
    color: var(--color-text-dark);
    background: var(--color-ui-grey);
    padding: 8px;
    border-top: 2px solid var(--color-border-highlight);
    border-left: 2px solid var(--color-border-highlight);
    border-right: 2px solid var(--color-border-shadow);
    border-bottom: 2px solid var(--color-border-shadow);
    box-shadow: 1px 1px 0px var(--color-shadow-hard);
  }
  
  #name-submit-btn:active {
    background: var(--color-ui-grey-active);
    border-top: 2px solid var(--color-border-shadow);
    border-left: 2px solid var(--color-border-shadow);
    border-right: 2px solid var(--color-border-highlight);
    border-bottom: 2px solid var(--color-border-highlight);
    box-shadow: none;
  }
  
  /* Status Cafe */
  
  #statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
  }
  
  #statuscafe-username {
      margin-bottom: .5em;
  }
  
  #statuscafe-content {
      margin: 0 1em 0.5em 1em;
  }