@font-face {
    font-family: strawberry-muffins;
    src: url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.eot);
    src: url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.eot?#iefix) format('embedded-opentype'),
         url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.woff2) format('woff2'),
         url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.woff) format('woff'),
         url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.ttf) format('truetype'),
         url(https://sleepyy.neocities.org/font/strawberry_muffins_demo-webfont.svg#strawberry-muffins) format('svg');
    font-weight: 400;
    font-style: normal;
}

/* Base */
html, body {
    margin: 0;
    height: 100%;
    font-size: 16px;
    font-family: "Hahmlet", serif;
    background-image: url(background.jpg);
    overflow: hidden;
}

/* Wrapper hides outer scrollbars */
.wrapper {
    width: 1200px;
    height: 800px;
    position: relative;
}

/* Scrollable stage */
.stage {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stage::-webkit-scrollbar {
    width: 0;
    height: 0; /* hide scrollbars in Chrome/Safari/Opera */
}

/* Scrollable content container */
.stage-content {
    position: relative; /* absolute children are relative to this */
}

/* Keep windows absolute */
.window {
    position: absolute;
}

/* Example window styling */
.card {
    position: relative;
    z-index: 1;
    border: 4px ridge #80807f;
    background-color: silver;
}

.card-header {
    background-color: navy;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 6px;
    display: flex;
    justify-content: space-between;
    cursor: grab;
}

.card-header:active {
    cursor: grabbing;
}

.card-body, .text {
    padding: 4px;
}

.text {
    padding: 4px;
    color: #000;
}

.circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-bottom: 15px;
}

/* Blinkie window */
.blinkie-container {
  width: 170px;
  position: absolute;
  left: 1200px;
  top: 80px;
  z-index: 50;
}

/* Links */
a:link {
    text-decoration: underline;
    color: #000;
    box-shadow: inset 0 -4px 0 navy;

}

a:hover {
    color: #fff;
    box-shadow: none;
}

/* Buttons */
.close-btn {
    background-color: #bfbfbf;
    color: #131315;
    font-size: 10px;
    font-weight: 700;
    border-radius: 0;
}

.close-btn:hover {
    background-color: #d9d9d9;
}


.close-btn:active {
    border: 2px inset #fff;
    background-color: #a6a6a6;
}

/* Utility */
.row::after {
    content: "";
    display: table;
    clear: both;
    
}

.column {
    float: left;
    padding: 15px;
    width: 100px;
    height: 100px;
}

/* Minimized state */
.card.minimized .card-header {
    border-bottom: none;
}

.letter-row {
  display: flex;
}

.header .row {
  margin: 0;
}

.window.minimized .card .text,
.window.minimized .card iframe,
.window.minimized .card table,
.window.minimized .card .card-body {
  display: none; /* hide content only */
}

.window.minimized {
  display: none;
}

.parent {
  font-size: 10px;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9998;
}

.parent .item {
  text-align: center;
  margin-bottom: 10px; /* space between each button */
}

.parent .item img {
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block; /* ensures label appears below image */
  margin: 0 auto; /* center image */
}

.parent .item .label {
  margin-top: 2px; /* space between image and text */
  color: white;
  font-size: 10px;
}

.bottom-bar {
  position: fixed;      /* Stays at the bottom */
  bottom: 0;            /* Align to bottom */
  left: 0;              /* Start from left edge */
  width: 100%;          /* Span full width */
  height: 40px;         /* Height of the bar */
  background-color: #bfbfbf; /* Bar color */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.3); /* Optional shadow for depth */
  z-index: 9999;        /* Stay above other content */
  border-top: 4px ridge #80807f;
 padding: 2px;
 padding-left: 10px;
}