/**
 * system7.css
 * Copyright (c) 2023 OpenCo <openco.ca> and Startr LLC <startr.ca>
 * Copyright (c) 2022 Sakun Acharige <startr_.co>
 */

:root {
  --box-shadow: 2px 2px;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;

  /* Some detailed computations for radio buttons and checkboxes (from 98.css) */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 6px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2);

  --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 12px;
  --checkmark-top: 2px;
  --checkmark-left: 2px;

  /* ---- ⚫️ Colors ⚪️ ---- */
  /* Base Tokens */
  --sys-color-white: #FFFFFF;
  --sys-color-black: #000000;
  --sys-color-grey: #A5A5A5;
  --sys-color-darkgrey: #B6B7B8;

  /* Theme Tokens */
  --primary: var(--sys-color-black);
  --secondary: var(--sys-color-white);
  --tertiary: var(--sys-color-grey);

  /* Component Tokens */
  --disabled: var(--sys-color-darkgrey);
}

/* buttons */
.standard-button {
  background-image: url("wii-button.jpg");
  display: block;
  min-width: 59px;
  min-height: 20px;
  text-align:
}

/* title bar */
.title-bar {
  flex: none;
  display: flex;
  align-items: center;
  height: 1.5rem;
  margin-top: 0.1rem 0;
  padding-top: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  padding-bottom: 0.1rem;
  background: linear-gradient(var(--primary) 50%, transparent 50%);
  background-size: 6.6666666667% 13.3333333333%;
  background-clip: content-box;
}

.title-bar .title {
  padding: 0 0.5em;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  background: var(--secondary);
  cursor: default;
  font-family: "Krungthep";
}

.title-bar button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0.2rem;
  border: 4px solid var(--primary);
  background-color: var(--secondary);
  cursor: pointer;
  transform: scale(0.5);
}

.title-bar button span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.title-bar button.close::before,
.title-bar button.close::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.title-bar button.close::before {
  background: linear-gradient(var(--primary) 0%, var(--primary) 100%) left center, linear-gradient(var(--primary) 0%, var(--primary) 100%) right center, linear-gradient(var(--primary) 0%, var(--primary) 100%) center top, linear-gradient(var(--primary) 0%, var(--primary) 100%) center bottom;
  background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%;
  background-repeat: no-repeat;
}

.title-bar button.close::after {
  background: linear-gradient(var(--primary) 0%, var(--primary) 100%) left center, linear-gradient(var(--primary) 0%, var(--primary) 100%) right center, linear-gradient(var(--primary) 0%, var(--primary) 100%) center top, linear-gradient(var(--primary) 0%, var(--primary) 100%) center bottom;
  background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%;
  background-repeat: no-repeat;
  transform: rotate(45deg) scale(1.1);
}

.title-bar button.close:active::before,
.title-bar button.close:active::after {
  opacity: 1;
}

.title-bar button.resize {
  background: linear-gradient(var(--primary) 0%, var(--primary) 100%) left 58%, linear-gradient(to bottom, var(--primary) 0%, var(--primary) 100%) 58% top;
  background-size: 60% 4px, 4px 60%;
  background-repeat: no-repeat;
  background-color: var(--secondary);
}

.title-bar button.resize:active {
  background: var(--secondary);
}

.title-bar button.hidden {
  visibility: hidden;
}

.window {
  position: absolute;
  flex-direction: column;
  margin: 1rem;
  min-width: 150px;
  overflow: hidden;
  background-color: var(--secondary);
  border: 0.1em solid var(--primary);
  font-family: "Inconsolata", Menlo, Chicago, Geneva;
}

.separator {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*padding: 0.4rem 0.8rem;*/
  border-top: 0.1rem solid var(--primary);
  border-width: 0.1rem 0;
  font-size: 1rem;
}
@font-face {
  font-family: "Krungthep";
  src: url("fonts/ChicagoFLF.ttf");
}
@font-face {
  font-family: 'basiic';
  src: url(https://cinni.net/fonts/basiic.ttf);
}

body {
  background-image: url('wii.png');
  background-repeat: no-repeat;
  font-family: monospace;
  font-size: 0.9rem;
  margin: 0;
  overflow-x: hidden;
  min-height: 56rem;
  cursor: url("hand-grab.gif"), pointer;
  cursor: url("hand-standard.gif"), default;
}

.wrapper {
  max-width: 2500px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 10px;
}

/* grid container */
.holy-grail-grid {
  display:grid;
  grid-template-areas:
      'header'
      'main-content'
      'left-sidebar'
      'right-sidebar'
      'footer';
}

/* general column padding */
.holy-grail-grid > * {
  padding: 1rem;
}

/* assign columns to grid areas */
.holy-grail-grid > .header {
  grid-area: header;
  background: white;
}
.holy-grail-grid > .main-content {
  grid-area: main-content;
  padding-top: 3rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.holy-grail-grid > .left-sidebar {
  grid-area:left-sidebar;
  padding-top: 4rem;
}
.holy-grail-grid > .right-sidebar {
  grid-area:right-sidebar;
  padding-top: 4rem;
}
.holy-grail-grid > .footer {
  grid-area:footer;
}

.holy-grail-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        'header header header header'
        'left-sidebar main-content main-content right-sidebar'
        'footer footer footer footer';
}

a {
  color: black;
  text-decoration: none;
}

a:hover{
  color: blue;
}

.menu-deco {
  font-size: 1.3rem;
  font-family: "Krungthep", monospace;
  line-height: .9;
  user-select: none;
  pointer-events: none;
}

.menu {
  display: flex;
}

.header {
  background-color: white;
  border-bottom: 2px solid black;
  height: 1.3rem;
  width: 100%;
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 5px;
}

.header ul { list-style-type: none; display: flex; margin: 0; padding: 0; font-size: 1rem; font-weight: normal; }
.header li { margin: 0 15px; font-family: "Krungthep", monospace; }

.menu-btn { display: none; }
.menu-icon { display: none; cursor: pointer; padding: 10px; }


.window {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto 2rem auto;
}

.window p {
  padding: 0 10px 0 10px;
}

.window img {
  width: 100%;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: block;
}

.details {
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  padding: 4px;
  font-family: "Krungthep";
  font-size: 10px;
  user-select: none;
}

.details p {
  margin: 0;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  gap: 10px;
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "basiic";
}

.side-image {
  height: 25px;
}

.home-card {
  position: relative;
  width: 100%;
  max-width: 1800;
}

.rectangle {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 1000px;
  background-color: none;
  border: 0px solid black;
  padding: 10px;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 5px;
  padding: 40px 5px;
  width: 100%;
  max-height: 330px;
  overflow-y: auto;
  box-sizing: border-box;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-item a {
  font-size: 1.1rem;
  font-family: "basiic";
  margin-top: 5px;
}

.grid-item img {
  height: 35px;
  width: auto;
}

.grid-item a:hover {
  text-decoration: underline;
}

.arrow-container {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.buttons {
  background-image: "wii-button.png";
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  max-width: 600px;
  margin: 3rem 2.1rem;
  padding: 0 10px;
}

#info p {
  font-size: .9rem;
}

/* mobile */
@media (min-width: 100px) and (max-width: 600px) {

  .holy-grail-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'left-sidebar'
      'main-content'
      'right-sidebar'
      'footer';
    }
    .holy-grail-grid > .left-sidebar {
    min-height: 20rem;
    width: 100%;
    box-sizing: border-box;
    }
    .holy-grail-grid > .main-content {
      padding-top: 0;
      padding-bottom: 0;
    }
    .holy-grail-grid > .right-sidebar {
      display: none;
    }
    .center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
}
	
    #info {
      display: block;
      justify-content: center;
      margin-top: 1rem;
      width: 90%;
	  max-width: 300px;
    }
    #osage,
    #lab,
    #hyper,
	#updates-window,
	#status,
	#todo-window{
      display: none;
    }
    .menu {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: white; }
    .menu-deco {
      display: none;
    }
    .header {
      flex-direction: column;
      align-items: flex-start;
      height: auto;
      padding: 0 10px;
    }
    .menu-icon {
      display: block;
      font-size: 1.3rem;
      font-family: "Krungthep";
      align-items: center;
      height: 30px;
    }
    .menu-icon::before {
      content: "✸"; font-size: 1.4rem; margin-right: 10px; line-height: 1; }
    .menu-text {
      font-size: 1.2rem;
      font-family: "Krungthep", monospace;
      line-height: 1;
      margin-right: 10px;
      user-select: none;
      pointer-events: none;
    }
    .header ul {
      list-style-type: none;
      display: none;
      margin: 0;
      padding-bottom: 10px;
    }
    .menu li {
      margin: 10px 0;
      padding: 0 10px;
    }
    .menu-btn:checked ~ .menu { display: flex; flex-direction: column; }
    .grid-container {
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      padding: 30px 10px;
      overflow-y: auto;
      max-height: 300px;
    }
    .rectangle {
      border-right: 4px solid black;
      border-bottom: 4px solid black;
    }
    
}

/* tablet */
@media (min-width: 601px) and (max-width: 899px) {
  .holy-grail-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'left-sidebar'
      'main-content'
      'right-sidebar'
      'footer';
    }
    #info {
    width: 90%;
    max-width: 300px; 
  }
    .holy-grail-grid > .left-sidebar {
    min-height: 14rem;
    min-width: 100%;
    padding-top: 4rem; 
    display: flex;
    justify-content: center;
  }
  .holy-grail-grid > .main-content {
  padding-top: 0;
  display: flex;
  justify-content: center;
}

    .buttons, .holy-grail-grid > .right-sidebar {
      display: none;
    }
    #osage,
    #hyper,
    #lab,
	#updates-window,
	#status,
	#todo-window{
      display: none;
    }
    .grid-container {
      padding: 30px 10px;
      max-height: 360px;
      overflow-y: auto;
  }
}

/* desktop breakpoint */
@media (min-width:900px) {
    .holy-grail-grid {
        grid-template-columns: 325px 3fr 3fr 305px;
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
	
    .holy-grail-grid > .main-content {
      padding-top: 5.4rem;
      padding-left: .1rem;
    }
    .holy-grail-grid > .left-sidebar {
      padding-top: 4rem;
      min-height: 9rem;
      display: flex;
    }
    .holy-grail-grid > .right-sidebar {
      padding-top: 4rem;
    }
.holy-grail-grid > .footer {
  justify-content: center;
}
    #info {
      width: 245px;
      margin-left: 1.2rem;
    }
    #hyper {
    width: 250px;
    margin-top: 16rem;
    margin-left: .6rem;
    }
    #lab {
      width: 235px;
      margin-left: 1.2rem;
    }
    #osage {
      width: 230px;
      margin-left: 1.5rem;
      margin-top: 20rem;
    }
	#updates-window {
	  width: 310px;
		margin-top: 35rem;
	}
	#updates-window ul {
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
		
}
	#updates-window a {
    color: blue;
		margin-left: auto;
		margin-right: auto;
}
	#status{
    position: relative;
	  margin-top: -1.8rem;
	  max-width: 350px;
	  
	}
#todo-window {
  display: flex;
  flex-direction: column;
  width: 280px;
  margin-top: 36.5rem;
  margin-left: -1rem;
  max-height: 205px;
}

#todo-window .todo-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100px;  
  min-height: 0;      
}

  #PikRing {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 0;
  }
  
  #PikRing img {
    max-height: 50px;   
    width: auto;
    display: block;
  }
  #PikRing a {
    display: inline-flex;
    align-items: center;
  }
  #cdr{
    color: black;
    font-size: .9rem;
    padding-top: .7rem;
    text-align: center;
  }
  
  #cdr img{
    width: auto;
    height: auto; 
  }

  #todo-window #cdr {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  
  #todo-window #cdr br {
      display: none;
    }
  
  #todo-window #cdr a,
  #todo-window #cdr img,
  #todo-window #cdr span {
    display: inline-flex;
    align-items: center;
  }
  #cdr a {
  vertical-align: middle;
  position: relative;
}

#null {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  white-space: nowrap;
}

#null img {
 width: auto;
 height: auto;
}

#todo-window #null br {
  display: none;
}

#todo-window #null a,
#todo-window #null img,
#todo-window #null span {
  display: inline-flex;
  align-items: center;
}

    .buttons {
      transform: translateX(12px);
    }
    .buttons img {
      width: 88px;
      height: 31px; 
    }
}