@font-face {
  font-family: 'SpicySale';
  src: url('fonts/Spicy Sale.ttf') format('truetype');
}

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

body {
  background-image: url(images/background.png);
  background-size: 100vw 150vh;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.taskbar {
  background: linear-gradient(to bottom, #3c2a74, #2a1c52);
  border: 2px solid white;
  border-radius: 16px;
  padding: 10px;
  margin: 10px;
  width: min(fit-content, 90vw);
  display: flex;
  justify-content: center;
  gap: 5px;
}

/* buttons */
.close {
  background: linear-gradient(#ffb6c1, #ff6c8f);
  color: #fff;
  border-radius: 4px;
  border: 1px solid #ff6c8f;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.close:hover {
  filter: brightness(1.1);
  transform: scale(1.1);
}

.button {
  font-size: 1.3em;
  background: linear-gradient(0deg,rgba(204, 184, 255, 1) 0%, rgba(241, 102, 148, 1) 19%, rgba(241, 102, 148, 1) 38%, rgba(255, 234, 205, 1) 93%);
  border: 2px solid #9b4744;
  border-radius: 10px;
  padding: 5px 10px;
  color: white;
  margin: 3px 1px;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.button:hover {
  filter: brightness(1.1);
  transform: scale(1.04);
  cursor: pointer;
}

.sub-button {
  width: 100%;
  font-size: 1.1em;
  background: linear-gradient(0deg,rgba(204, 184, 255, 1) 0%, rgba(241, 102, 148, 1) 19%, rgba(241, 102, 148, 1) 38%, rgba(255, 234, 205, 1) 93%);
  border: 1px solid #9b4744;
  border-radius: 1px;
  padding: 3px 5px;
  color: white;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.sub-button:hover {
  filter: brightness(1.1);
  transform: scale(1.01);
}

.container-button {
  background-color: #2a1c52;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  border: 2px solid #9b4744;
  border-radius: 2px;
}

.arrow-container-r {
  position: absolute;
  right: 10px;
  bottom: 40%;
}

.arrow-container-l {
  position: absolute;
  left: 10px;
  bottom: 40%;
}

.card-btn-right,.card-btn-left {
  background: linear-gradient(0deg,rgba(204, 184, 255, 1) 0%, rgba(241, 102, 148, 1) 19%, rgba(241, 102, 148, 1) 38%, rgba(255, 234, 205, 1) 93%);
  border: 2px solid #9b4744;
  border-radius: 50%;
  color: white;
  font-family: "Lilita One", sans-serif;
  font-size: 15px;
  position: relative;
  padding: 10px;
}

.card-btn-right:hover,.card-btn-left:hover {
  filter: brightness(1.1);
  transform: scale(1.09);
  cursor: pointer;
}



.window {
  background:linear-gradient(#804baf9a,#5c31819a);
  backdrop-filter:blur(6px);
  box-shadow:0 0 25px rgba(0,0,0,.6);
  border-radius: 10px;
  padding: 15px;
  padding-top: 10px;
  width: 90vw;
  max-width: 1400px;
  border: 2px solid #ccc;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  margin: 50px;
  transition: opacity 0.4s ease;
  opacity: 1;
}

.window.fade {
  opacity: 0;
}

/* yellow box */
.content {
  background: linear-gradient(0deg,#ffd29e 0%, #fff2c9 37%);
  border: 2px solid #f5b055;
  border-radius: 2px;
  padding: 10px;
}


.title {
  font-size: 2em;
  font-weight: bold;
  color: #ffffff;
  font-family: "Syne Mono", monospace;
}

.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}

/* boxes */

.box {
  background: linear-gradient(0deg,rgb(255, 218, 255) 0%, rgb(255, 167, 201) 25%, rgba(255, 205, 224, 1) 70%);
  border: 3px solid #f193b4;
}

.boxb {
  background-color: #ffcdde;
  border: 3px solid #f193b4;
}

.divider {
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  color: #7a2c45;
  display: flex;
  justify-content: center;
}

.pfp.box {
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  color: #7a2c45;
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.info {
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  width: 100%;
}

.links {
  border-radius: 4px;
  margin: 5px 15px;
  padding: 10px;
}

.square.box {
  background: linear-gradient(0deg,rgb(255, 218, 255) 0%, rgb(255, 167, 201) 15%, rgba(255, 205, 224, 1) 70%);
  border: 3px solid #f193b4;
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  width: 100%;
}

.nameplate {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-title {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
}


/* pfp image */
.pfp {
  width: 350px;
  border-radius: 4px;
  border: 2px solid #f193b4;
}

/* dusk */
.name {
  font-size: 60px;
  text-align: center;
  font-family: 'SpicySale';
  color:#a439b9;
}

.pronouns {
  text-align: center;
  font-size: 18px;
  color: #7a2c45;
}

.star {
  width: 45px;
  margin: 10px;
}

.sparkle {
  width: 20px;
  height: 20px;
  margin: 6px;
}

/* containers */
.container-horizontal {
  display: flex;
  flex-direction: row;
}

.container-vertical {
  display: flex;
  flex-direction: column;
}

.container-vertical-left {
  display: flex;
  align-items: left;
  flex-direction: column;
}

/* text */
::selection {
  background: #ad4cad;
  color: #fdc0ff;
}

h1 {
  font-size: 2.7em;
  font-weight: bold;
  color: #cf3566;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
}

h2 {
  font-size: 2.2em;
  font-weight: bold;
  color: #cf3566;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
}

h3 {
  font-size: 1.4em;
  font-weight: 200;
  color: #ec5384;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
}

p {
  font-size: 1.10em;
  color: #c22e5c;
  font-weight: bold;
  font-family: "Bpmf Iansui", cursive;
}

.small-txt {
  font-size: 0.9em;
}

.divider-text {
  font-size: 2.5em;
  font-weight: bold;
  color: #cf3566;
  font-family: "Lilita One", sans-serif;
}

/* oc card */
.card-container {
  background: linear-gradient(0deg,#000000ee 0%, #252525d8 37%);
  border: 2px solid #000000;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 15px;
}

.info {
  flex: 1 1 0;
  padding: 15px;
  height: 30%;
  overflow: auto;
}


.left, .right {
  flex: 1 1 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.pfp {
  width: 350px;
}

.container-vertical-b {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.activities span:not(:last-child)::after {
  margin: 5px;
  background: url("images/star.png") no-repeat center;
  background-size: contain;
}

/* gabby */

.gabby-box {
  background-color: #5e3b6e;
  border: 2px solid #000000;
  border-radius: 10px;
}

.gabby.pfp {
  border: 2px solid #d19424;
  border-radius: 9px;
}

.gabby-h2 {
  font-size: 1.7em;
  color: #e78d43;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
}

.gabby-h3 {
  font-size: 1.2em;
  color: #ffc75f;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 1px;
}

.gabby-p {
  font-size: 1.1em;
  color: #fdedd0;
  font-weight: bold;
  font-family: "Bpmf Iansui", cursive;
}