/* ===== Status Cafe Section CSS ===== */

.status-container {
  display: flex;
  justify-content: center;
}

.status {
  width: 100%;
  height: 260px;
  overflow: auto;
  border: 1px;
  padding: 3px;
}

/* ===== Status cafe CSS ===== */
#statuscafe {
  height: 55px;
  overflow: auto;
  background-color: azure;
  border: 1px dashed #c3c6e5;
  border-radius: 10px;
  padding: 10px;

  /* hide scrollbar (Firefox) */
  scrollbar-width: none;

  /* hide scrollbar (IE/Edge old) */
  -ms-overflow-style: none;
}

/* hide scrollbar (Chrome, Safari) */
.logbox::-webkit-scrollbar {
  display: none;
}

#statuscafe-username {
  margin-bottom: 0.5em;
}

#statuscafe-content {
  margin: 3px;
}

/* Updates */
.logbox-container {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-image: url("../asset/styling/itinerae@neocities_6235f.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6px;
  border: 1px dashed #c3c6e5;
  color: #918d84;
}

.logbox {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 1px;
  padding: 5px;

  /* hide scrollbar (Firefox) */
  scrollbar-width: none;

  /* hide scrollbar (IE/Edge old) */
  -ms-overflow-style: none;
}

/* hide scrollbar (Chrome, Safari) */
.logbox::-webkit-scrollbar {
  display: none;
}

/* To do */
.todo-container {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-image: url("../asset/styling/itinerae@neocities_6235f.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6px;
  border: 1px dashed #c3c6e5;
  color: #918d84;
}

.todo {
  width: 100%;
  height: 100px;
  overflow: auto;
  border: 1px;
  padding: 5px;

  /* hide scrollbar (Firefox) */
  scrollbar-width: none;

  /* hide scrollbar (IE/Edge old) */
  -ms-overflow-style: none;
}

/* hide scrollbar (Chrome, Safari) */
.todo::-webkit-scrollbar {
  display: none;
}

/* Cliques */
.cliques-container {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 10px;
  background-image: url("../asset/styling/itinerae@neocities_6235f.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6px;
  border: 1px dashed #c3c6e5;
  color: #918d84;
}

.cliques {
  width: 100%;
  height: 320px;
  overflow: auto;
  border: 1px;
  padding: 5px;

  /* hide scrollbar (Firefox) */
  scrollbar-width: none;

  /* hide scrollbar (IE/Edge old) */
  -ms-overflow-style: none;
}

/* hide scrollbar (Chrome, Safari) */
.todo::-webkit-scrollbar {
  display: none;
}

/* test */
ul {
  list-style: none;
  /* remove default bullets */
  padding: 0;
  /* remove left indent */
  margin: 0;
}

li {
  margin: 4px 0;
  /* small spacing between items */
}
/* ========================================= */
/* 1ST SECTION LAYOUT */
/* ========================================= */

.welcome-layout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* left column */
.welcome-section {
  flex: 2;
}

/* right column */
.lovelies-section {
  flex: 1;
}

/* ========================================= */
/* WELCOME IMAGE */
/* ========================================= */

.welcome-image {
  float: left;
  margin-right: 10px;
  border-radius: 10px;
}

/* ========================================= */
/* CENTERED CONTENT */
/* ========================================= */

.center {
  text-align: center;
}

/* ========================================= */
/* LOVELIES IMAGES */
/* ========================================= */

.lovelies-section img {
  border-radius: 8px;
  margin: 2px;
  transition: transform 0.1s ease;
}

.lovelies-section img:hover {
  transform: scale(1.05);
}

/* ========================================= */
/* GIFYPET + CLIQUES LAYOUT */
/* ========================================= */

.gify-layout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* left side (miku) */
.gify-layout .box {
  flex: 0;
}

/* right side */
.cliques-side {
  flex: 1;
}

/* ========================================= */
/* GIFYPET FRAME */
/* ========================================= */

.gifypet-frame {
  width: 330px;
  height: 330px;
  border: 0;
  overflow: hidden;
}

/* ========================================= */
/* CLIQUES LIST */
/* ========================================= */

.web p {
  margin: 6px 0;
}

.web a {
  text-decoration: none;
}

.web a:hover {
  text-decoration: underline;
}

/* ========================================= */
/* FANLISTINGS */
/* ========================================= */

.fanlistings-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding-bottom: 10px;
}

.fanlistings-grid img {
  width: 50px;
  height: auto;
  display: block;
  transition: transform 0.1s ease;
}

.fanlistings-grid a:hover img {
  transform: scale(1.05);
}
/* ========================================= */
/* WEBRING LAYOUT ONLY */
/* ========================================= */

.webring-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
}

.webring-box {
  flex: 1;
}
/* ========================================= */
/* COMMENTS SECTION */
/* ========================================= */

.cbox-frame {
  margin-bottom: 5px;
}

/* rules block */
.rules p {
  margin: 10px 0;
}

/* image cluster spacing */
.cliques-container img {
  margin: 2px;
}

/* center helper stays reusable */
.center {
  text-align: center;
}