/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*ヘッダー*/
    .header {
      width: 40%;
      line-height: 0;
    }
    .header img {
      width: 100%;
      height: auto;
    }
    body {
      font-family: "WDXL Lubrifont JP N", sans-serif;
      color: white;
      text-align: center;
      background-image: url('pattern 591.gif');
      background-repeat: repeat;
    }
    .board {
      background: rgba(255, 255, 255, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 16px;
      padding: 2rem 2.5rem;
      box-shadow: 0 4px 24px rgba(0,0,0,0.15),
                  inset 0 1px 0 rgba(255,255,255,0.9);
      position: relative;
      overflow: hidden;
      width: 1200px;
      min-height: 600px;
      margin: 20px auto 80px auto;
      color: black;
    }
    .board::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0.55),
        rgba(255,255,255,0.1));
      border-radius: 16px 16px 0 0;
      pointer-events: none;
      z-index: 0;
    }
    .board * {
      position: relative;
      z-index: 1;
    }
    .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 8px 0;
      text-align: center;
      background: rgba(255, 255, 255, 0.45);
      border-top: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    }
    .banner-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
    }
    .banner-row img {
      height: 40px;
    }
    
/*サイドバー*/
    .layout {
  display: flex;
  gap: 16px;
  width: 1200px;
  margin: 20px auto 80px auto;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  margin: 0;       
}

.main {
  flex: 1;
  margin: 0;
}

.sidebar img {
  width: 90%;    /* サイドバーの幅に収める */
  height: auto;   /* 縦横比を保つ */
}

/* ボタン */

.capsule-button {
  text-decoration: none;
  display: block;
  width: 100%; max-width: 150px;
  margin: 0 auto;
  padding: 14px 32px;
  border-radius: 50px;
  border: 1px solid #ffffff;
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    #7DD8F0 0%,
    #00ced1 55%,
    #ffffff 100%
  );

  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;

  box-shadow:
    0 2px 10px rgba(29, 160, 200, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);

  transition: box-shadow 0.2s, transform 0.1s;
}

.capsule-button::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; width: 90%; height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.06) 100%
  );
  border-radius: 50px 50px 60% 60%;
  pointer-events: none;
}

.capsule-button:hover {
  box-shadow:
    0 4px 18px rgba(29, 160, 200, 0.65),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

.capsule-button:active {
  transform: translateY(0) scale(0.98);
}
    

    /*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */

.title-bar-controls button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
padding:0 12px;
text-shadow:0 0 #222;
}

.title-bar-controls button {
background:silver;
box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.title-bar-controls button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}

@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {
outline:1px dotted #000;
outline-offset:-4px;
}

.title-bar-controls button::-moz-focus-inner { border:0 }
    
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/1za99g.woff") format("woff");
src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}   

.window, .title-bar {
font-family: "Pixelated MS Sans Serif", Arial;
-webkit-font-smoothing: none;
font-size: 11px;
}

.window {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
background: #c0c0c0;
color:#000;
padding: 3px;
width:100%;
}

.title-bar {
background:linear-gradient(90deg, purple, orchid, pink);
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}

.title-bar-controls {
display: flex;
}

.title-bar-controls button {
padding: 0;
display: block;
min-width: 16px;
min-height: 14px;
}

.title-bar-controls button:active {
padding: 0;
}

.title-bar-controls button:focus {
outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat
}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat;
}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px;
}

.window-body {
margin: 8px;
}

/* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */
.fieldset {
border:1px gray solid;
box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
margin:0;
padding:10px;
overflow-y:auto; 
height: 190px;
}