/* --- Global Styles --- */
body {
    margin: 0;
    font-family: 'Merriweather', serif;
    background: #FFFDF5;
    color: #000;
    scroll-behavior: smooth;
}

a { text-decoration: none; color: #2f73ff; transition: color 0.2s; }
a:hover { color: #1a3dbb; }

header {
    background: #FFB800;
    padding: 15px 30px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  flex: 0.5;               /* equal space left & right */
  display: flex;
  align-items: center;
}
.nav-right {
  flex: 0.5;               /* equal space left & right */
  display: flex;
  align-items: center;
}

.nav-center {        
  display: flex;
  justify-content: center;
  flex-wrap: wrap;        /* wrap on small screens */
  gap: 20px;
  margin-left:50px;
}

.nav-logo {
  height: 100px;          /* ALWAYS full navbar height */
  width: auto;
  object-fit: contain;
}

nav a {
  font-weight: 700;
  color: #000;
}

nav a.active {
  border-bottom: 2px solid #2f73ff;
  padding-bottom: 3px;
}

/* Mobile adjustments */
@media (max-width: 900px) {

  .nav-center {
    gap: 10px;
  }

  nav a {
    font-size: 14px;
  }
  
  .nav-logo {
  height: 60px;         
  width: auto;
  object-fit: contain;
}
  
}

section { padding: 40px 12%; border-bottom:1px solid #e0d4c4; position: relative; }
h1,h2 { margin-bottom:20px; }
p, li { line-height:1.7; }

button, .btn {
    background-color: #2f73ff; color: #fff;
    border: none; padding:10px 20px; cursor:pointer;
    font-family: 'Merriweather', serif; border-radius:5px;
    transition: background 0.2s ease;
}
button:hover, .btn:hover { background-color:#1a3dbb; }

/* Sleep Resister balls */
#resister-screen .ball {
    position:absolute; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #2f73ff, #1a3dbb);
    opacity:0.9; pointer-events:none;
    box-shadow:0 0 20px rgba(47,115,255,0.9),
               0 0 40px rgba(47,115,255,0.7),
               0 0 60px rgba(47,115,255,0.5);
    filter: drop-shadow(0 0 10px #2f73ff);
    will-change: transform,left,top;
    z-index:1;
}

footer { text-align:center; padding:25px; background:#FFB800; color:#000; }

@media screen and (max-width:768px) {
    section{padding:60px 6%;}
    nav{flex-direction:row; flex-wrap:wrap;}
    nav a{margin:10px;}
}




.signup-box {
    background: #ffffff;
    width: 500px;                  
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Titles & spacing */
.section-title {
    margin-top: 25px;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Inputs full width */
.signup-box input,
.signup-box textarea,
.signup-box select {
    width: 100%;
    padding: 10px;
    margin: 6px 0 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* Submit button */
.signup-box button {
    width: 100%;
    padding: 12px;
    background: #2f73ff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
}

.signup-box button:hover {
    background: #111;
}

/* --- Center the signup form on the page --- */
.signup-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px; /* keeps space from sticky header */
}

/* --- Signup Box (Desktop + Mobile Responsive) --- */
.signup-box {
    background: #ffffff;
    width: 90%;               /* responsive width */
    max-width: 500px;         /* desktop limit */
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    margin: 0 auto;           /* ensures centering */
}

/* Adjust spacing on small screens */
@media screen and (max-width: 480px) {
    .signup-box {
        padding: 20px;
        border-radius: 10px;
    }
}

.float-right {
  float: right;
  margin: 0 0 1rem 0.5rem; /* adds spacing between image and text */
  max-width: 40%;       /* optional: keeps image from being too large */
}

.blue-underline {
color: #2f73ff; /* Text color */
text-decoration-line: underline; /* Underline the text */
text-decoration-color: #2f73ff; /* Underline color */
}

:root{
    --bg:#fafafa;
    --card:#ffffff;
    --muted:#8e8e8e;
    --accent:#3897f0;
    --shadow: 0 6px 18px rgba(0,0,0,0.06);
    --radius:12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  body{
    margin:0;
    background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
    color:#111;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:28px;
  }

  .container{
    max-width:980px;
    margin:0 auto;
  }

  header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
  }
  .logo{
    width:54px;height:54px;border-radius:12px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
    box-shadow:var(--shadow);
  }
  h1{font-size:20px;margin:0;}
  p.lead{margin:0;color:var(--muted);font-size:13px;}

  /* Grid */
  .feed{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:18px;
  }

  /* Instagram-like card */
  .post{
    background:var(--card);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
  }
  .post-top{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
  }
  .avatar{
    width:44px;height:44px;border-radius:50%;background:#ddd;flex:0 0 44px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#555;
  }
  .meta{
    display:flex;flex-direction:column;
  }
  .meta .user{font-weight:700;font-size:14px;}
  .meta .sub{font-size:12px;color:var(--muted);}
  .ellipsis{margin-left:auto;font-weight:700;color:var(--muted);}

  /* image area */
  .media{
    width:100%;
    background:#eee;
    position:relative;
    aspect-ratio:1/1;
    display:block;
  }
  .media img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
 

  /* actions */
  .actions{
    display:flex;
    gap:12px;
    align-items:center;
    padding:10px 12px;
  }
  .like-btn{
    background:#2f73ff;border:0;padding:6px;cursor:pointer;font-size:18px;
  }
  .likes{font-weight:700;font-size:14px;margin-left:6px;}

  /* caption */
  .caption{
    padding:0 12px 14px 12px;
    font-size:14px;
    line-height:1.35;
  }
  .caption .muted{color:var(--muted);font-size:13px;margin-top:6px;display:block;}
  .timestamp{color:var(--muted);font-size:12px;margin-top:8px;}

  /* responsive tweaks */
  @media (max-width:420px){
    body{padding:12px;}
    .feed{grid-template-columns:1fr;}
  }
  
  .break {
  flex-basis: 100%;
  height: 0;
}

  /* small heart animation */
  .heart-anim{
    position:absolute;
    width:96px;height:96px;
    left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:44px;color:#e0245e;pointer-events:none;
    transition:transform 360ms cubic-bezier(.2,.9,.2,1),opacity 360ms;
    opacity:0;
  }
  .heart-anim.show{transform:translate(-50%,-50%) scale(1);opacity:1;}