@font-face {
  font-family: VocaloidRegular;
  src: url(../fonts/VOC-RE.ttf);
}

@font-face {
  font-family: Moliga;
  src: url(../fonts/Moliga\ DEMO.otf);
}

@font-face {
  font-family: LegacySansstdBold;
  src: url(../fonts/LegacySansStd-Bold.otf);
}

@font-face {
  font-family: Miku01;
  src: url(../fonts/miku-01.ttf);
}

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

html {
  font-size: 16px;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #16161e;
  color: #fff;
}

/* Typography */
h1,
h2,
h3 {
  font-family: 'Signika', sans-serif;
  color: #b3fff0;
}

h1 {
  font-family: Moliga;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  letter-spacing: 0.5rem;
  color: #e40181;
  -webkit-text-stroke: 0.4rem #019bb5;
}

.h1outline {
  -webkit-text-stroke: 0.1rem white;
  transform: translateX(-100%);
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-top: -5px;
  margin-bottom: 5px;
  letter-spacing: 5px;
  font-family: VocaloidRegular;
  color: #b3fff0;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1rem;
  color: #fff;
}

a {
  color: #19c9ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Main Content */
.container {
  width: 95%;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
}

.top-grid {
  display: flex;
  gap: 2rem;
  width: 100%;
}

@media (max-width: 1068px) {
  .top-grid {
    flex-direction: column;
    gap: 0;
  }
}

.about-section,
.status-section,
.music-section,
.message-section,
.cat-section {
  background: #2a3a4459;
  border-radius: 10px;
  padding: 1.5rem;
  border: 2px solid #019bb5;
  box-shadow: 0 0 10px #019bb5, 0 0 20px #019bb5;
  margin-bottom: 2rem;
}

.title-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.overlayedtitle {
  display: flex;
  margin-bottom: -1%;
}

/* About Section */
.about-grid {
  gap: 1.5rem;
  align-items: center;
}

.about-info ul {
  list-style: none;
}

.about-info li {
  margin-bottom: 0.2rem;
  font-size: clamp(0.85rem, 2.2vw, 1.2rem);
}

.about-card {
  float: left;
  width: 150px;
  height: auto;
  border: none;
  border-radius: 10px;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  border: 2px solid #019bb5;
}


/* Links Section */
.links-section h2 {
  text-align: center;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: -1rem;
}

.link-item {
  text-align: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.link-item:hover {
  transform: scale(1.1);
  color: #b3fff0;
}

.link-icon {
  width: 3rem;
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 10px;
  object-fit: cover;
}

.link-text {
  font-size: 0.875rem;
  white-space: nowrap;
  text-decoration: none;
}

/* Music Section */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

@media (max-width: 900px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

.music-section h2 {
  text-align: center;
}

.album-card {
  text-align: center;
  overflow: hidden;
}

.album-card:hover p {
  white-space: unset;
}

.album-card:hover img {
  border: 2px solid #e40181;
}

.album-cover {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.album-title {
  font-size: clamp(0.8rem, 2vw, 1rem);
  margin-top: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bolder;
  white-space: nowrap;
  color: #b3fff0;
}

.album-artist {
  font-size: clamp(0.675rem, 2vw, 0.875rem);
  color: #019bb5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-date {
  font-size: clamp(0.475rem, 2vw, 0.675rem);
  color: #019ab5b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Anon Message */
#messageInput {
  resize: none;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #b3fff0;
  background: #d7f9ff;
  outline: none;
  font-family: LegacySansstdBold;
  letter-spacing: 2px;
  font-size: 20px;
  margin: 10px;
}

#messageInput:focus {
  border: 2px solid #e40181;
}

#messageInput:hover {
  border: 2px solid #e40181;
}

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

.anonmsgbtn {
  width: auto;
  font-family: VocaloidRegular;
  font-size: large;
  letter-spacing: 5px;
  padding: 15px;
  margin: 10px;
  color: #b3fff0;
  border-radius: 10px;
  background: rgb(44, 72, 90);
  cursor: pointer;
  border: none;
  border: 2px solid #00000000;
}

.anonmsgbtn:hover {
  border: 2px solid #19c9ff;
  box-shadow: 0 0 10px #019bb5, 0 0 20px #019bb5;
}

.message-section {
  min-width: 58%;
}

.message-section h2 {
  text-align: center;
}

.bottom-grid {
  display: flex;
  gap: 2rem;
  width: 100%;
}

@media (max-width: 768px) {
  .bottom-grid {
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
  }
}

.ad {
  width: 100%;
  height: 100%;
  aspect-ratio: 7/5;
  position: relative;
  display: inline-block;
}

@media (max-width: 1168px) {
  .ad {
    align-self: center;
  }
}

.ad-label {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
}

.cat {
  aspect-ratio: 1/1;
  width: 100px;
  image-rendering: pixelated;
  display: block;
}

.pet-count {
  font-family: miku01;
  color: #e23749;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.pet-count-div {
  display: flex;
  text-align: center;
  flex-direction: column;
  width: 120px;
}

.cat-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: right;
}

@media (max-width: 768px) {
  .cat-div {
    justify-self: center;
  }
}

/* Splash Text */
.splash {
  font-family: LegacySansstdBold;
  font-size: clamp(0.9rem, 3.1vw, 1.5rem);
  color: #e40181;
  margin-bottom: 1rem;
  margin-left: -0.2rem;
}








/* control */
#api-key-input {
  resize: none;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #19c9ff;
  background: rgb(236, 248, 255);
  outline: none;
  font-family: 'Signika', sans-serif;
  letter-spacing: 2px;
  font-size: 20px;
  margin: 10px;
}

.message-card {
  width: auto;
  min-height: 150px;
  height: auto;
  border: none;
  border-radius: 10px;
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
}

#message-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 90%;
  z-index: 1001;
  display: none;
  font-family: LegacySansstdBold;
  color: #fff;
  background: rgb(44, 72, 90);
  border-radius: 10px;
  padding: 1.5rem;
  border: 2px solid #019bb5;
  box-shadow: 0 0 10px #019bb5, 0 0 20px #019bb5;
}

#message-modal h3 {
  font-size: 1rem;
  margin-top: -5px;
  margin-bottom: 5px;
  letter-spacing: 3px;
  font-family: VocaloidRegular;
}

#message-modal .timestamp {
  color: #019ab5b0;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

#message-modal .message-content {
  font-size: 1.2rem;
  overflow-wrap: break-word;
  border-radius: 5px;
}