@import url('https://fonts.googleapis.com/css2?family=Micro+5&family=Silkscreen:wght@400;700&display=swap');

/* Silkscreen + Micro 5 */
@import url('https://fonts.googleapis.com/css2?family=Micro+5&family=Silkscreen:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  color: #655b63;

/* MAIN BODY FONT */
body {
  font-family: "Geist Pixel", "Silkscreen", monospace;
}


/* HEADINGS */
h1,
h2,
h3 {
  font-family: "Micro 5", "Silkscreen", monospace;
}


/* WINDOWS TITLE BARS */
.titlebar {
  font-family: "Silkscreen", "Geist Pixel", monospace;
}


/* NAVIGATION */
.nav-links a {
  font-family: "Silkscreen", "Geist Pixel", monospace;
}


/* SMALL COMPUTER TEXT */
.tiny,
.date,
.status,
.counter,
.small-link,
.read-more,
footer {
  font-family: "Geist Pixel", "Silkscreen", monospace;
}


/* BIG HOMEPAGE TITLE */
.hero h1 {
  font-family: "Silkscreen", "Micro 5", monospace;
  font-size: clamp(65px, 9vw, 100px);
  letter-spacing: 1px;
}


/* PROFILE NAME */
.profile h2 {
  font-family: "Micro 5", "Silkscreen", monospace;
  font-size: 38px;
}


/* DIARY TITLE */
.diary h2 {
  font-family: "Micro 5", "Silkscreen", monospace;
  font-size: 48px;
}


/* FANDOM CARDS */
.fandom-card p {
  font-family: "Micro 5", "Silkscreen", monospace;
  font-size: 27px;
}


/* STICKY NOTE */
.sticky {
  font-family: "Geist Pixel", "Silkscreen", monospace;
}

  background-color: #fff8f1;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.55)
    ),
    repeating-linear-gradient(
      0deg,
      #f8dfe8 0px,
      #f8dfe8 1px,
      #fff9f1 1px,
      #fff9f1 24px
    );

  cursor: default;
}


/* ---------- LINKS ---------- */

a {
  color: #a66f88;
}

a:visited {
  color: #96748e;
}

a:hover {
  color: #e07fa3;
}


/* ---------- MAIN WEBSITE CONTAINER ---------- */

.desktop {
  width: 94%;
  max-width: 1100px;

  margin: 40px auto 60px auto;
}


/* =========================================
   WINDOWS
   ========================================= */

.window {
  background: rgba(255, 252, 247, 0.96);

  border: 1px solid #c9bcc2;

  border-radius: 4px;

  overflow: hidden;

  box-shadow:
    4px 4px 0 rgba(166, 143, 153, 0.13),
    0 2px 12px rgba(135, 112, 122, 0.07);
}


/* ---------- WINDOWS TITLE BAR ---------- */

.titlebar {
  min-height: 30px;

  padding: 5px 8px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background:
    linear-gradient(
      90deg,
      #f4bfd1 0%,
      #f9d9e4 45%,
      #dceafb 100%
    );

  border-bottom: 1px solid #bcaeb4;

  color: #62555c;

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;

  font-weight: bold;

  letter-spacing: 1px;

  text-transform: lowercase;
}


/* ---------- FAKE WINDOWS BUTTONS ---------- */

.buttons {
  display: flex;

  gap: 3px;
}

.buttons button {
  width: 19px;
  height: 19px;

  padding: 0;

  background: #fffaf6;

  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid #9f9398;
  border-bottom: 1px solid #9f9398;

  color: #766b70;

  font-family: Arial, sans-serif;

  font-size: 10px;

  line-height: 15px;
}


/* ---------- WINDOW CONTENT ---------- */

.window-content {
  padding: 20px;
}


/* =========================================
   HERO / TOP AREA
   ========================================= */

.welcome-window {
  margin-bottom: 14px;
}

.hero {
  min-height: 245px;

  padding: 35px 50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}

.hero > div:first-child {
  flex: 1;
}

.hero h1 {
  margin: 10px 0 25px 0;

  color: #67545d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(44px, 7vw, 74px);

  font-weight: normal;

  line-height: 0.9;

  letter-spacing: -3px;
}

.hero h1 span {
  color: #d48da8;

  font-size: 0.55em;

  font-style: italic;

  letter-spacing: -1px;
}

.hero p {
  max-width: 520px;

  margin-top: 10px;

  font-size: 13px;

  line-height: 1.8;
}


/* ---------- SMALL COMPUTER TEXT ---------- */

.tiny {
  color: #9f818e;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* ---------- HEART DECORATION ---------- */

.hero-decoration {
  position: relative;

  flex: 0 0 180px;

  width: 180px;
  height: 165px;

  color: #d795ad;

  font-size: 28px;
}

.big-heart {
  position: absolute;

  top: -25px;
  left: 5px;

  color: #edbfd0;

  font-family:
    Georgia,
    serif;

  font-size: 125px;

  line-height: 1;
}

.hero-decoration span {
  position: absolute;
}

.hero-decoration span:nth-of-type(1) {
  top: 5px;
  right: 8px;
}

.hero-decoration span:nth-of-type(2) {
  bottom: 10px;
  left: 0;
}

.hero-decoration span:nth-of-type(3) {
  right: 0;
  bottom: 22px;
}


/* =========================================
   ONLINE STATUS
   ========================================= */

.status {
  margin-top: 20px;

  display: flex;

  align-items: center;

  gap: 7px;

  color: #89767f;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
}

.dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  background: #9acba6;

  border: 1px solid #7cab88;

  border-radius: 50%;

  box-shadow:
    0 0 5px rgba(118, 183, 133, 0.45);
}


/* =========================================
   NAVIGATION
   ========================================= */

.nav-window {
  margin-bottom: 25px;
}

.nav-links {
  padding: 12px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  background:
    rgba(255, 250, 246, 0.85);
}

.nav-links a {
  padding: 7px 17px;

  color: #7e6873;

  background: #fffaf5;

  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid #c9b9bf;
  border-bottom: 1px solid #c9b9bf;

  text-decoration: none;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;

  transition:
    transform 0.15s,
    background 0.15s,
    color 0.15s;
}

.nav-links a:hover {
  color: #c87394;

  background: #fce5ed;

  transform: translateY(-2px);
}


/* =========================================
   HOMEPAGE LAYOUT
   ========================================= */

.homepage-grid {
  display: grid;

  grid-template-columns:
    minmax(190px, 0.8fr)
    minmax(330px, 1.6fr)
    minmax(190px, 0.8fr);

  gap: 18px;

  align-items: start;
}


/* =========================================
   PROFILE
   ========================================= */

.profile {
  transform: rotate(-1deg);
}

.profile-pic {
  width: 100%;

  aspect-ratio: 1 / 1;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #a58c96;

  background:
    linear-gradient(
      135deg,
      #f8d9e4,
      #e5effa
    );

  border: 1px dashed #caaeba;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: 1px;
}

.profile h2 {
  margin: 15px 0 3px 0;

  color: #c77f9b;

  font-family:
    Georgia,
    serif;

  font-size: 27px;

  font-style: italic;

  font-weight: normal;
}

.subtitle {
  margin-top: 0;

  color: #a28c95;

  font-size: 11px;
}

.mini-info {
  margin-top: 20px;

  padding-top: 10px;

  border-top: 1px dashed #d7c6cc;

  color: #786a70;

  font-size: 11px;

  line-height: 1.5;
}


/* =========================================
   DIARY
   ========================================= */

.diary {
  min-height: 390px;
}

.diary .window-content {
  padding: 30px;
}

.date {
  margin-top: 0;

  color: #ad8797;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: 2px;
}

.diary h2 {
  margin-top: 15px;

  color: #cf89a4;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 35px;

  font-style: italic;

  font-weight: normal;
}

.diary h3 {
  margin-top: 30px;

  color: #a7778a;

  font-family:
    Georgia,
    serif;

  font-weight: normal;
}

.diary p {
  color: #665d63;

  font-size: 13px;

  line-height: 1.85;
}

.read-more {
  display: inline-block;

  margin-top: 10px;

  padding-bottom: 2px;

  border-bottom: 1px dotted #c78da2;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;

  text-decoration: none;
}


/* =========================================
   CURRENTLY BOX
   ========================================= */

.currently {
  transform: rotate(1deg);
}

.currently p {
  margin: 0 0 13px 0;

  padding-bottom: 12px;

  border-bottom: 1px dotted #cabdc2;

  color: #756970;

  font-size: 12px;

  line-height: 1.5;
}

.currently p:last-child {
  margin-bottom: 0;

  border-bottom: none;
}

.currently b {
  color: #bd7893;

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-weight: normal;
}


/* =========================================
   STICKY NOTE
   ========================================= */

.sticky {
  position: relative;

  min-height: 180px;

  padding: 25px;

  background:
    linear-gradient(
      135deg,
      #fff6ce,
      #fff1c0
    );

  border: 1px solid #e7dba9;

  box-shadow:
    3px 5px 10px rgba(0, 0, 0, 0.08);

  transform: rotate(2deg);

  color: #756b63;

  font-family:
    "Comic Sans MS",
    "Trebuchet MS",
    cursive;

  font-size: 13px;
}

.sticky h3 {
  margin-top: 5px;

  color: #d087a2;

  font-size: 17px;

  font-weight: normal;
}

.tape {
  position: absolute;

  top: -10px;
  left: calc(50% - 33px);

  width: 66px;
  height: 21px;

  background:
    rgba(207, 226, 244, 0.72);

  border-left:
    1px dashed rgba(153, 174, 194, 0.35);

  border-right:
    1px dashed rgba(153, 174, 194, 0.35);

  transform: rotate(-3deg);
}

.doodle {
  margin-top: 25px;

  color: #c28da1;

  text-align: right;
}


/* =========================================
   FANDOM SECTION
   ========================================= */

.fandom-preview {
  margin-top: 5px;
}

.fandom-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;
}

.fandom-card {
  min-height: 130px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  color: #6d5d65;

  background:
    linear-gradient(
      160deg,
      #f9e1e9,
      #e4effa
    );

  border: 1px solid #d6c4cb;

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

.fandom-card:hover {
  transform: translateY(-4px);

  box-shadow:
    3px 4px 0 rgba(197, 166, 177, 0.15);
}

.fandom-card span {
  color: #a48692;

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
}

.fandom-card p {
  margin-bottom: 3px;

  color: #9c6f81;

  font-family:
    Georgia,
    serif;

  font-size: 18px;

  font-style: italic;
}

.small-link {
  display: inline-block;

  margin-top: 15px;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
}


/* =========================================
   VISITOR COUNTER
   ========================================= */

.visitor {
  text-align: center;
}

.visitor p {
  font-size: 11px;
}

.counter {
  width: fit-content;

  margin: 10px auto;

  padding: 7px 10px;

  color: #f6d3df;

  background: #514b50;

  border-top: 3px solid #373237;
  border-left: 3px solid #373237;
  border-right: 3px solid #ded4d8;
  border-bottom: 3px solid #ded4d8;

  font-family:
    "Courier New",
    monospace;

  font-size: 18px;

  letter-spacing: 4px;
}


/* =========================================
   SCROLLING TEXT
   ========================================= */

.marquee {
  width: 100%;

  margin-top: 30px;

  padding: 9px 0;

  overflow: hidden;

  color: #b77e94;

  border-top: 1px dashed #cdbcc3;
  border-bottom: 1px dashed #cdbcc3;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  white-space: nowrap;
}

.marquee div {
  width: max-content;

  animation:
    scrolling-text 25s linear infinite;
}

@keyframes scrolling-text {

  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }

}


/* =========================================
   FOOTER
   ========================================= */

footer {
  padding: 30px;

  color: #a28d96;

  text-align: center;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  letter-spacing: 1px;
}


/* =========================================
   TEXT SELECTION
   ========================================= */

::selection {
  color: #715864;

  background: #f7cddd;
}


/* =========================================
   SCROLLBAR
   Chrome / Edge / Safari
   ========================================= */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #fff7f1;
}

::-webkit-scrollbar-thumb {
  background: #edbfd0;

  border: 3px solid #fff7f1;

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d99bb2;
}


/* =========================================
   CUSTOM CURSOR
   ========================================= */

body {
  cursor: url("cursor.png"), auto;
}

a,
button {
  cursor: url("cursor-click.png"), pointer;
}


/* =========================================
   MOBILE / SMALL SCREENS
   ========================================= */

@media screen and (max-width: 800px) {

  .desktop {
    width: 94%;

    margin-top: 20px;
  }

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

  .profile,
  .currently,
  .sticky {
    transform: none;
  }

  .hero {
    min-height: auto;

    padding: 28px;

    display: block;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-decoration {
    display: none;
  }

  .fandom-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================
   PHONE
   ========================================= */

@media screen and (max-width: 500px) {

  .desktop {
    width: 96%;

    margin-top: 10px;
  }

  .nav-links {
    gap: 5px;
  }

  .nav-links a {
    padding: 7px 10px;

    font-size: 10px;
  }

  .hero {
    padding: 22px;
  }

  .hero h1 {
    font-size: 39px;

    letter-spacing: -2px;
  }

  .diary .window-content {
    padding: 20px;
  }

  .diary h2 {
    font-size: 29px;
  }

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

}