/* Global reset to ensure consistent margin and box-sizing */
html {
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* Media Query for larger screens (800px and up) */
@media screen and (min-width: 800px) {
  body {
    overflow: hidden; /* Prevent scrolling on large screens */
  }
}
#spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 9999;
  color: black;
}

/* Hide page initially */
#content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
    min-height: 100vh;   /* full viewport height */
  width: 100%;
  position: relative;  /* so absolute children position correctly */
}

/* Fade in after page loaded */
body.loaded #content {
  opacity: 1;
  visibility: visible;
}

/* Spinner always visible while loading */
#spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 9999;
  color: black;
  background: white;
  padding: 10px 20px;
  border-radius: 8px;
}

/* Hide spinner after page loaded */
body.loaded #spinner {
  display: none;
}

/* Reset all margins and padding */
body {
  margin: 0;  /* Ensure no margin */
  padding: 0; /* Ensure no padding */
  font-family: 'finnshandwriting', sans-serif;
  background-color: #d2ffd3;
  color: #000000;
  font-size: clamp(1px, 2vw, 40px);
  text-align: center;
}
.datesizing {
  font-size: clamp(1px, 1vw, 15px)
}
/* Link Styles */
a:link {
  color: #000000;
}

a:hover {
  color: #034210;
}

/* Title container - no extra margin or padding */
.title-container {
  position: relative;
  z-index: 10; /* Title is on top */
  height: 70px;
}

#Titlebackground { position: absolute; z-index: 2; }
#Titleimage { position: absolute; z-index: 3; }

.claw {
  position: absolute;
  top: 75px;     /* adjust as needed */
  left: 22.5%;
  width: 110px;
  height: 160px;
  z-index: 1;    /* below title */
}

#claw {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;

  transform-origin: top center;
  animation: swing 5s ease-in-out infinite;
}

/* Mask to hide claw top */
.title-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;        /* height of your title container */
  background-color: #d2ffd3;  /* page background or match title bg */
  z-index: 5;           /* above claw but below any title images if needed */
  pointer-events: none; /* clicks pass through */
}

/* Background and Title Image */
#Titlebackground {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-width: 1100px;
  height: auto;
  z-index: 2;
}

#Titleimage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-width: 1000px;
  height: auto;
  z-index: 3;
}


.claw-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;       /* same height as title container */
  background-color: #d2ffd3; /* same as page background */
  z-index: 5;          /* above claw but below any title images if needed */
  pointer-events: none; /* allows clicks to pass through */
}

/* Fancy text styling */
#fancy {
  font-family: "Brush Script MT", cursive;
  font-size: clamp(12px, 3vw, 50px);
  font-weight: lighter;
}

/* Tumblr link styling */
#Tumblr-wrapper {
  margin-top: 2px;
  text-align: center;
}

/* Layout for columns (flexbox for three columns) */
.columns {
  display: flex;           /* Flexbox layout for the columns */
  position: relative;      /* Allow absolute positioning of elements inside */
  width: 100%;             /* Full width of the page */
  margin: 0;               /* No margin */
  padding: 0;              /* No padding */
}

/* Left column */
.left {
  width: 25%;  /* Left column takes 25% of the width */
  position: relative;  /* Set relative positioning for absolutely positioned child elements */
  margin: 0;           /* No margin */
  padding: 0;          /* No padding */
}

/* Middle column */
.middle {
  width: 50%;  /* Middle column takes 50% of the width */
  margin: 0;           /* No margin */
  padding: 0;          /* No padding */
}

/* Right column */
.right {
  width: 25%;  /* Right column takes 25% of the width */
  margin: 0;           /* No margin */
  padding: 0;          /* No padding */
}

/* Updates box inside left column */
.updates {
  position: absolute;  /* Absolutely position it relative to the left column */
  top: 60px;
  left: 80px;
  width: 180px; /* Adjust the width as needed */
  height: 221px; /* Adjust the height */
  margin: 0;
  padding: 0;
}

#Updates-background {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 180px;
  height: 223px;
}

#updatestext {
  position: absolute;  /* Absolutely position the updates text within the left column */
  top: 58.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #012b05;
  width: 70%;
  height: 150px;
  overflow-y: auto;
  background-color: white;
  font-size: 18px;
  line-height: 1.8em;
  padding-top: 10px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.8em - 1px), steelblue calc(1.8em - 1px), steelblue 1.8em);
  background-attachment: local;
  background-size: 100% 1.8em;
}

/* Clock styling */
/* Clock wrapper */
.clock-wrapper {
  position: relative;
  width: 220px;   /* Set the width of the clock wrapper */
  height: 140px;  /* Set the height of the clock wrapper */
  margin: 350px 50px 50px 5px;  /* Adjust margins if necessary */
}

/* Alarm clock image */
#alarmclock {
  width: 100%;  /* Make sure the image covers the full clock wrapper */
  height: auto; /* Keep the aspect ratio intact */
  display: block;
  object-fit: cover;  /* Ensure the image doesn't stretch and fills the container */
}

/* Time container */
#mytime {
  position: absolute;
  top: 67%;  /* Position the time vertically in the center of the wrapper */
  left: 50%; /* Position the time horizontally in the center of the wrapper */
  transform: translate(-50%, -50%); /* Perfect centering */
  text-align: center;  /* Center the text horizontally */
  z-index: 2;  /* Ensure it's above the image */
}

/* Date and time styling */
#date, #time {
  margin: 0;
  z-index: 3;  /* Ensure it is on top of everything */
  font-family: 'VT323', monospace;
  color: #ff3b3b;  /* Red text for visibility */
  font-size: 18px;  /* Adjust font size */
  text-shadow: 0 0 12px rgba(254, 118, 178, 0.88);  /* Neon-like glow */
  line-height: 1.2;  /* Add space between the date and time */
}

/* Optional: Add background or padding to improve readability */
#date, #time {
  padding: 5px 10px;  /* Padding for better readability */
  border-radius: 5px;  /* Optional rounded corners */
}

/* Middle Column Styles */
.middle {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

#Intro {
  position: relative;
  margin-top: 20px;
  padding: 5px;
}

#Intro h2,
#Intro p {
  margin: 0;
  padding: 0;
}

.popout {
  position: absolute;
  top: 220px;
  left: 61.5%;
  transform: translateX(-60%);
  width: 120px;
  height: 210px; /* added px */
}

#monster {
  width: 100%;  /* Make sure the image covers the full clock wrapper */
  height: auto; /* Keep the aspect ratio intact */
  display: block;
  object-fit: cover;  /* Ensure the image doesn't stretch and fills the container */
}

#List-of-page-items {
  
  margin-top: 5px;
  padding:5px;
  text-align: center;
  position: static;
  margin: auto;
  width:470px;
}

#List-of-page-items ul {
  list-style-type: none;
  padding: 0;
}

#List-of-page-items h3,
#List-of-page-items ul {
  margin: 0;
  padding: 0;
}

/* Right Column and Stats Wrapper */
.right {
  width: 25%;
  position: relative;
}

.pullup {
  position: absolute;
  top: 0;
  left: 80%;
  transform: translateX(-60%);
  width: 250px;
  height: 480px; /* added px */
}

#anim {
  width: 100%;  /* Make sure the image covers the full clock wrapper */
  height: auto; /* Keep the aspect ratio intact */
  display: block;
  object-fit: cover;  /* Ensure the image doesn't stretch and fills the container */
}



@keyframes swing {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}

/* Optional: Set a minimum height for the columns to make sure they display correctly */
.columns {
  min-height: 100vh; /* Ensures the columns take the full height of the page */
}