/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  margin: 0;
  padding: 0;
  font-family: 'Bitter', serif;
  background-color: #1a1a1a; 
  color: #f1ede3; 
  line-height: 1.6;
}

a {
  color: #a2d2a2; /* soft forest green */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* === Layout Container === */
.container {
  display: flex;
  min-height: 100vh;
}

/* === Sidebar === */
.sidebar {
  width: 220px;
  background-color: #2b2b2b;
  padding: 20px;
  border-right: 2px solid #444;
  position: sticky;
  top: 0;
}

.sidebar h2 {
  color: #d6b88a; /* warm tan */
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  margin: 12px 0;
}

.sidebar a {
  color: #d6b88a;
}

.sidebar a:hover {
  color: #a2d2a2;
}

/* === Main === */
/*=.floating-playlist {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  overflow: hidden;
}=*/

.floating-playlist {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  border-radius: 12px;
  overflow: hidden;
  width: 320px;
  height: 352px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.content {
  flex: 1;
  padding: 40px;
  background-color: #1a1a1a;
  text-align: center;
}

/* === Headings === */

li
{
  list-style-type: none;
  padding-left: 0;
}

h1, h2, h3 {
  color: #e5dfd0;
  font-weight: 600;
  margin-top: 0;
}

/* === Paragraphs and Lists === */
p, ul, li {
  font-size: 1rem;
}

/* === Images === */
img {
  border-radius: 10px;
  margin: 10px 0;
  max-width: 100%;
  height: auto;
}

/* === Frog sticker === */
.frog-sticker {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 60px;
  opacity: 0.9;
  z-index: 100;
}

/*==about==*/

.about-wrapper {
  max-width: 850px;
  margin: 60px auto;
  padding: 0;
  text-align: center;
  position: relative;
}

.about-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
}

.about-title {
  font-family: 'Bitter', serif;
  font-size: 1.8rem;
  color: #e7dbc7; 
  margin: 0;
}

/* stack wrapper */
.cardboard-stack {
  position: relative;
  margin-top: 40px;
}

/* tag: top-left corner */
.hello-tag {
  width: 250px;
  position: absolute;
  top: -70px;
  left: -200px;
  z-index: 2;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

/* cardboard full image */
.cardboard-box {
  background-image: url('cardboard.png');
  background-size: contain;       
  background-repeat: no-repeat;
  background-position: center;
  padding: 200px 30px 60px 30px; 
  height: 500px;
  color: #2b2b2b;
  font-family: 'Bitter', serif;

  position: relative;
  z-index: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cardboard-stack {
  max-width: 450px;
  margin: 0 auto;
  z-index: 2;
}

/* text inside cardboard */
.cardboard-box h1,
.cardboard-box p {
  max-width: 90%;
  margin: 0 auto 1rem auto;
  line-height: 2;
}

.my-button {
  display: inline-block;
  background-color: #e7dbc7;
  color: #2b2b2b;
  padding: 10px 20px;
  margin-top: 12px;
  font-family: 'Bitter', serif;
  font-size: 1rem;
  border: 2px solid #2b2b2b;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

.my-button:hover {
  background-color: #d5c8b4;
  transform: scale(1.03);
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

.music-container {
  position: absolute;
  bottom: 60px;
  right: 30px;
  width: 300px;
  height: 200px;
  z-index: 3;
  animation: float 4s ease-in-out infinite;
}

.floating-cloud {
  width: 700px;
  height:200px;
  position: absolute;
  bottom: 80px;    
  right: -187px;   
  z-index: 3;
  filter: drop-shadow(4px 8px 10px rgba(0, 0, 0.3, 1.5));
}

.on-loop{
  position: absolute;
  bottom: 50px;
  right: -150px;
  width: 220px;
  height: 140px;
  z-index: 3;
  font-size: 0.75rem;
  font-family: 'Bitter', serif;
  text-align: center;
  padding: 4px;
  color: #2b2b2b;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* cute coffee cat */
.coffee-cat {
  width: 100px;
  position: absolute;
  bottom: 110px;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.float-apple {
  width: 240px;
  position: absolute;
  top: 20px;
  right: -60px;
  transform: rotate(-5deg);
  z-index: 1;
}

.float-bow {
  width: 240px;
  position: absolute;
  top: 30%;
  left: -70px;
  transform: rotate(10deg);
  z-index: 1;
}

.float-domo {
  width: 280px;
  position: absolute;
  bottom: 30px;
  left: -50px;
  transform: rotate(-3deg);
  z-index: 1;
}

/*==writing==*/
.content {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.prompt-form {
  background-color: #2b2b2b;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Bitter', serif;
  color: #f1ede3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.prompt-form textarea,
.prompt-form input {
  width: 90%;
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: none;
  font-family: 'Bitter', serif;
}

.prompt-form button {
  display: inline-block;
  background-color: #e7dbc7;
  color: #2b2b2b;
  padding: 10px 20px;
  margin-top: 12px;
  font-family: 'Bitter', serif;
  font-size: 1rem;
  border: 2px solid #2b2b2b;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}

.prompt-form button:hover {
   background-color: #d5c8b4;
  transform: scale(1.03);
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

.floating-miso {
  position: fixed;
  top: 100px;
  left: 300px;
  width: 180px; 
  z-index: 50;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.floating-miso:hover {
  transform: scale(1.05);
}


@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  .prompt-form {
    max-width: 100%;
    padding: 10px;
  }

  .floating-cloud,
  .music-container,
  .coffee-cat,
  .float-apple,
  .float-bow,
  .float-domo {
    display: none; /* hide on small screens OR reposition */
  }

  .sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #444;
  }

   .content {
    padding: 20px;
  }
  .about-wrapper {
  margin: 20px auto;
  padding: 0 10px;
}

.about-header {
  flex-direction: column;
  align-items: center;
  padding-left: 0;
  gap: 10px;
}

.hello-tag {
  position: static;
  width: 200px;
  margin-bottom: 10px;
}

.cardboard-box {
  background-size: contain;
  background-position: center;
  padding: 160px 20px 40px 20px;
  height: auto;
  font-size: 0.95rem;
}

.cardboard-stack {
  max-width: 100%;
}

.cardboard-box h1,
.cardboard-box p {
  max-width: 100%;
  line-height: 1.7;
}

.my-button {
  margin-top: 20px;
  font-size: 0.9rem;
  padding: 8px 16px;
}
}