*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --tan:#d7bc94;
  --tan2:#c8a576;
  --cream:#f2dfbd;
  --brown:#4a321f;
  --dark:#1f160e;
  --line:#6e4d30;
  --gold:#ffcf6a;
  --green:#72d66b;
  --red:#ff4d3f;
  --yellow:#ffd84c;
}

body{
  min-height:100vh;
  overflow-x:hidden;
  color:#17100a;
  font-family:"Trebuchet MS","Courier New",monospace;

  background-color:var(--tan);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.08) 0 1px,
    transparent 2px 5px
  );

  mix-blend-mode:overlay;
  z-index:999;
}

button{
  font:inherit;
  cursor:pointer;
}

.os{
  width:min(1400px,98vw);
  min-height:96vh;
  margin:1.5vh auto;

  border:3px solid var(--line);
  border-radius:18px;

  background:rgba(214,188,148,.88);

  box-shadow:
  0 30px 90px rgba(0,0,0,.55),
  inset 0 0 55px rgba(255,255,255,.25);

  overflow:hidden;
}

.topbar,
.taskbar{
  height:58px;

  background:
  linear-gradient(#efd7ae,#c79d67);

  border-bottom:2px solid var(--line);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;

  font-weight:900;
  font-size:1.15rem;
}

.spark{
  font-size:1.8rem;
}

.now-playing{
  display:flex;
  align-items:center;
  gap:14px;

  background:#130e09;
  color:var(--cream);

  padding:8px 14px;

  border-radius:6px;
  border:2px solid var(--line);

  min-width:360px;
}

.cover{
  width:36px;
  height:36px;
  object-fit:cover;
  border-radius:4px;
}

.track-text{
  font-size:.8rem;
}

.bars{
  flex:1;
  height:22px;

  background:
  repeating-linear-gradient(
    90deg,
    #1b120b 0 5px,
    #d8bc94 6px 8px,
    #1b120b 9px 15px
  );

  opacity:.8;
}

.time-text{
  font-size:.7rem;
}

.controls{
  display:flex;
  gap:12px;
  align-items:center;
}

.controls button{
  background:none;
  border:none;
  color:white;
  font-size:1rem;
}

.win-controls{
  display:flex;
  gap:7px;
}

.win-controls span{
  width:34px;
  height:30px;

  border:2px solid var(--line);

  display:grid;
  place-items:center;

  border-radius:5px;

  background:#e5c797;

  font-weight:900;
}

.layout{
  display:grid;
  grid-template-columns:200px 1fr;

  min-height:calc(96vh - 116px);
}

.sidebar{
  border-right:2px solid var(--line);

  padding:16px 12px;

  background:rgba(233,204,160,.72);
}

.side-card,
.status,
.connect{
  border:2px solid var(--line);
  border-radius:10px;

  background:rgba(245,220,180,.55);

  box-shadow:
  inset 0 0 18px rgba(255,255,255,.35);

  padding:14px;
  margin-bottom:18px;
}

.side-card img{
  width:100%;
  height:100px;
  object-fit:cover;

  border-radius:8px;
  border:1px solid var(--line);

  margin-bottom:10px;
}

.side-card h2{
  text-align:center;
  font-size:1.1rem;
  margin-bottom:10px;
}

.side-card p{
  font-size:.72rem;
  text-align:center;
  letter-spacing:.5px;
}

.nav button{
  width:100%;

  display:flex;
  gap:12px;
  align-items:center;

  padding:13px 8px;

  background:transparent;
  border:none;

  border-bottom:1px solid rgba(74,50,31,.25);

  text-align:left;
  font-weight:900;
}

.nav button:hover{
  background:rgba(255,255,255,.28);
  transform:translateX(4px);
}

.status-screen{
  background:#100b07;
  color:#ffd84c;

  border-radius:6px;

  padding:13px;

  text-align:center;

  font-size:1.05rem;
  line-height:1.15;

  margin:10px 0;
}

.meter{
  height:15px;

  border:1px solid var(--line);

  background:
  linear-gradient(
    90deg,
    #7a4d1f 0 72%,
    #ead5b0 72%
  );
}

.connect-icons{
  display:flex;
  justify-content:space-around;

  font-size:1.45rem;

  margin-top:10px;
}

.main{
  padding:0;

  display:grid;
  grid-template-rows:350px auto;
}

.hero{
  position:relative;

  min-height:350px;

  display:grid;
  place-items:center;

  text-align:center;

  overflow:hidden;

  border-bottom:2px solid var(--line);

  background:
  linear-gradient(
    rgba(215,188,148,.76),
    rgba(215,188,148,.86)
  ),
  url("img/y2k-bg.jpeg") center/cover no-repeat;
}

.hero::before{
  content:"Y2K";

  position:absolute;
  top:25px;
  left:13%;

  font-size:3.5rem;
  font-weight:900;

  opacity:.25;
}

.hero::after{
  content:"✦ ♡ ◎ ✧ Y2K ✦ ◌ ✧ ♡ Y2K";

  position:absolute;
  inset:20px;

  font-size:4rem;

  opacity:.23;

  word-spacing:70px;
  line-height:1.8;
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:clamp(3rem,8vw,5.6rem);
  letter-spacing:3px;

  color:#15100a;

  text-shadow:3px 3px rgba(255,255,255,.45);
}

.sub{
  font-size:clamp(1.2rem,3vw,2rem);

  letter-spacing:9px;

  margin:12px 0;
}

.japanese{
  font-family:"Malgun Gothic", sans-serif;

  letter-spacing:3px;

  font-weight:900;
}

.windows-grid{
  padding:14px;

  display:grid;
  grid-template-columns:1fr 1.35fr .95fr;

  gap:14px;
  align-items:start;
}

.window{
  border:2px solid var(--line);
  border-radius:10px;

  background:rgba(240,215,176,.82);

  box-shadow:
  0 12px 25px rgba(0,0,0,.2),
  inset 0 0 20px rgba(255,255,255,.28);

  overflow:hidden;
}

.head{
  height:36px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 12px;

  border-bottom:2px solid var(--line);

  background:
  linear-gradient(#f3dcb6,#c69b65);

  font-weight:900;
}

.dots span{
  display:inline-block;

  width:12px;
  height:12px;

  border-radius:50%;
  border:1px solid #6e4d30;

  margin-left:5px;
}

.dots span:nth-child(1){
  background:var(--red);
}

.dots span:nth-child(2){
  background:var(--yellow);
}

.dots span:nth-child(3){
  background:var(--green);
}

.welcome{
  min-height:365px;

  background:
  linear-gradient(
    rgba(0,0,0,.18),
    rgba(0,0,0,.45)
  ),
  url("img/asher-exe-cover.jpeg") center/cover no-repeat;

  color:white;

  padding:28px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  text-shadow:2px 2px #000;
}

.welcome h2{
  font-size:2rem;
  margin-bottom:25px;
}

.welcome p{
  line-height:1.5;
  max-width:280px;
}

.welcome button{
  margin-top:20px;
  width:max-content;

  padding:10px 18px;

  border-radius:6px;
  border:2px solid var(--cream);

  background:#2c1d10;
  color:var(--gold);
}

.story{
  padding:28px 34px;
  min-height:365px;

  color:#1c1209;
}

.story h2{
  font-size:2.15rem;
  margin-bottom:20px;
  letter-spacing:1px;
}

.story p{
  font-size:.98rem;
  line-height:1.65;
  margin-bottom:18px;

  font-family:"Courier New",monospace;
  font-weight:700;
}

.currently img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

.list{
  padding:12px 16px;
}

.list div{
  padding:11px 0;

  border-bottom:1px solid rgba(74,50,31,.25);

  font-weight:800;
}

.bottom-grid{
  grid-column:1 / -1;

  display:grid;
  grid-template-columns:.9fr 1.2fr .9fr;

  gap:14px;
}

.music-panel,
.feed{

  padding:0;
  min-height:220px;

  background-image:url("./img/brown\ dor.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:white;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.notes{

  padding:0;
  min-height:220px;

  background-image:url("./img/mikell.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:white;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}


.music-content{
  padding:28px;
}

.music-buttons{
  padding:20px 28px;
}
.music-content img{
  display:none;
}

.music-buttons button{
  background:transparent;
  border:none;
  font-size:1.4rem;
}

.feed{
  background:
  linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.25)),
  url("");

  background-size:cover;
  background-position:center;

  color:white;
}

.feed-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:10px;
}

.feed-row img{
  width:100%;
  height:110px;

  object-fit:cover;

  border-radius:10px;

  border:2px solid rgba(255,255,255,.25);

  transition:.25s ease;

  box-shadow:
  0 0 12px rgba(0,0,0,.25);
}

.feed-row img:hover{
  transform:scale(1.05);

  box-shadow:
  0 0 20px rgba(255,255,255,.35);
}
.caption{
  text-align:center;
  margin-top:10px;
  font-weight:900;
}

.notes p{
  padding:24px 16px;

  line-height:1.7;

  font-family:"Courier New",monospace;
  font-weight:900;
}

.taskbar{
  border-top:2px solid var(--line);
  border-bottom:none;

  height:58px;

  justify-content:flex-start;
}

.start{
  padding:10px 18px;

  border:2px solid var(--line);
  border-radius:6px;

  background:#e6c796;

  font-weight:900;
  font-size:1.1rem;
}

.task-item{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 16px;

  font-weight:800;
}

.clock{
  margin-left:auto;

  text-align:right;
  font-weight:900;
}

.dream-modal{
  display:none;

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.75);

  z-index:1000;

  place-items:center;
  padding:20px;
}

.modal-window{
  max-width:620px;
  background:#e7c99a;
}

.modal-window .head button{
  background:none;
  border:none;
  font-weight:900;
}

@media(max-width:1000px){

  .layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    display:none;
  }

  .windows-grid,
  .bottom-grid{
    grid-template-columns:1fr;
  }

  .main{
    grid-template-rows:auto auto;
  }

  .hero{
    min-height:300px;
  }

  .now-playing{
    min-width:0;
    flex:1;
  }

  .topbar{
    height:auto;
    flex-wrap:wrap;
    padding:10px;
  }

  .taskbar{
    overflow:auto;
  }

  .hero h1{
    font-size:3rem;
  }

}

/* =========================
   TABLET RESPONSIVE
========================= */

@media (max-width: 1024px){

  .os{
    width:100%;
    min-height:100vh;
    margin:0;
    border-radius:0;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    display:none;
  }

  .main{
    grid-template-rows:auto auto;
  }

  .topbar{
    height:auto;
    flex-wrap:wrap;
    justify-content:center;
    padding:12px;
  }

  .now-playing{
    width:100%;
    min-width:0;
  }

  .windows-grid{
    grid-template-columns:1fr;
    padding:12px;
  }

  .bottom-grid{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:340px;
  }

  .hero h1{
    font-size:clamp(2.4rem, 8vw, 4rem);
  }

  .sub{
    font-size:1.1rem;
    letter-spacing:5px;
  }

  .japanese{
    font-size:1.3rem;
    padding:10px 22px;
  }
}

/* =========================
   IPHONE RESPONSIVE
========================= */

@media (max-width: 600px){

  body{
    background-attachment:scroll;
  }

  .os{
    width:100%;
    margin:0;
    border:none;
    border-radius:0;
  }

  .topbar{
    gap:10px;
  }

  .brand{
    width:100%;
    justify-content:center;
    font-size:1.2rem;
  }

  .now-playing{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    padding:10px;
  }

  .cover{
    width:42px;
    height:42px;
  }

  .bars{
    width:100%;
    flex:none;
  }

  .controls{
    width:100%;
    justify-content:center;
  }

  .win-controls{
    display:none;
  }

  .hero{
    min-height:300px;
    padding:30px 12px;
  }

  .hero::before,
  .hero::after{
    font-size:2rem;
    word-spacing:20px;
  }

  .hero h1{
    font-size:2.5rem;
    line-height:1;
  }

  .sub{
    font-size:.9rem;
    letter-spacing:3px;
  }

  .japanese{
    font-size:1rem;
    padding:9px 16px;
  }

  .windows-grid{
    padding:10px;
    gap:12px;
  }

  .welcome,
  .story{
    min-height:auto;
    padding:22px;
  }

  .welcome h2,
  .story h2{
    font-size:1.7rem;
  }

  .story p{
    font-size:.9rem;
  }

  .currently img{
    height:180px;
  }

  .music-panel{
    min-height:230px;
    padding:18px;
  }

  .music-buttons{
    flex-wrap:wrap;
    gap:14px;
  }

  .feed-row{
    grid-template-columns:1fr;
  }

  .feed-row img{
    height:170px;
  }

  .notes p{
    padding:20px;
  }

  .taskbar{
    height:auto;
    flex-wrap:wrap;
    padding:10px;
    justify-content:center;
  }

  .start,
  .task-item{
    font-size:.9rem;
    padding:8px 10px;
  }

  .clock{
    width:100%;
    text-align:center;
    margin-left:0;
  }
}