@import url('https://fonts.googleapis.com/css2?family=Obra+Letra&family=Open+Sans&display=swap');

/* Base & background */
body {
  margin: 0;
  font-family: 'Share Tech Mono', monospace;
  background: url('bluecherry.png') center / cover no-repeat fixed;
  color: #000;
}

/* Cherry animation */
@keyframes fall {
  0%   { transform: translateY(-50px) rotate(0); opacity: 1; }
  100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}
.cherry {
  position: absolute;
  top: -50px;
  font-size: 1.2em;
  animation: fall 5s ease-in infinite;
  pointer-events: none;
}
.cherry1 { left: 10%; animation-delay: 0s; }
.cherry2 { left: 30%; animation-delay: 1s; }
.cherry3 { left: 50%; animation-delay: 2s; }
.cherry4 { left: 70%; animation-delay: 3s; }
.cherry5 { left: 90%; animation-delay: 4s; }

/* Container with nav & content */
.site-header {
  background-color: rgba(173, 216, 230, 0.75); /* robin’s egg blue with translucency */
  padding: 10px;
  text-align: center;
  
}
.site-header nav a {
  font-family: 'Share Tech Mono', monospace;
  color: #00334d;
  font-size: 1.1em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  margin: 0 12px;
  padding: 4px 8px;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  text-shadow: 0 0 3px #add8e6;
}
.site-header nav a:hover {
  color: #fff;
  background-color: #00334d;
  box-shadow: 0 0 8px #00ffffaa, inset 0 0 5px #00ffff55;
  text-shadow: 0 0 6px #00ffff;
}

/* Page layout */
.page-content {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.left-sidebar, .right-sidebar {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main-content {
  flex: 1;
}

/* Lined paper style */
.lined-paper {
  background: url('linedpaper.png') center / cover no-repeat;
  padding: 15px;
  border: 1px dashed #333;
}

/* Thought bubble */
.thought-bubble {
  background: #fff;
  border: 2px dashed #555;
  border-radius: 50% 50% 50% 10%;
  padding: 10px;
  animation: sway 4s ease-in-out infinite alternate;
}
@keyframes sway {
  0%   { transform: translateX(0) rotate(0); }
  100% { transform: translateX(10px) rotate(2deg); }
}

/* Time pill */
.time-pill {
  padding: 8px 12px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50px;
  text-align: center;
  font-family: 'Obra Letra', serif;
}

/* Phone wiggle */
.phone-img {
  width: 200px;
  transition: transform 0.3s;
  
}
.phone-img:hover {
  transform: rotate(-10deg) translateY(-5px);
}

/* Clock wiggle */
.clock-img {
  width: 200px;
  transition: transform 0.3s;
  
}
.clock-img:hover {
  transform: rotate(-10deg) translateY(-5px);
}

/* ✨ Fancy border style for boxes */
.fancy-border {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border: 3px solid #000000;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8); /* Optional background */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /* Optional depth */
}
/* Thought Bubble */
.thought-bubble {
  position: relative;
  background: white;
  padding: 20px;
  width: 150px;
  border: 3px solid #000;
  border-radius: 30px;
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Share Tech Mono', monospace;
}

.thought-bubble::before,
.thought-bubble::after {
  content: '';
  position: absolute;
  background: white;
  border: 3px solid #000;
  border-radius: 50%;
}

.thought-bubble::before {
  width: 30px;
  height: 30px;
  bottom: -25px;
  left: 20px;
}

.thought-bubble::after {
  width: 20px;
  height: 20px;
  bottom: -45px;
  left: 50px;
}
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

#datetime-pill {
  background-color: #0e0e0e;
  color: #ffae00;
  border: 3px solid #ffae00;
  border-radius: 50px;
  padding: 10px 20px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1em;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 0 10px #ffae0055, inset 0 0 5px #ffae0033;
  transition: all 0.3s ease-in-out;
}

#datetime {
  animation: flicker 0.2s ease-in-out;
  display: inline-block;
}

/* Flicker Keyframes */

.flicker-temp {
  animation: flicker 0.25s ease-in-out;
}

@keyframes flicker {
  0% { opacity: 0.3; }
  30% { opacity: 1; }
  50% { opacity: 0.6; }
  70% { opacity: 1; }
  100% { opacity: 0.9; }
}
#datetime {
  animation: flicker 0.2s ease-in-out;
  display: inline-block;
  text-shadow:
    0 0 5px #ffae00,
    0 0 10px #ffae00,
    0 0 15px #ffae00,
    0 0 20px #ffae00;
}
#commentForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
}

#commentForm input,
#commentForm textarea {
  padding: 6px;
  font-family: 'Share Tech Mono', monospace;
}

#commentForm button {
  align-self: start;
}

.comment {
  border: 1px solid #000;
  padding: 8px;
  margin: 6px 0;
  font-family: 'Share Tech Mono', monospace;
}