@font-face {
    font-family: 'Libre';
    src: url('Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'precious';
    src: url('precious-font/Precious-y1JZ.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'Libre';
    letter-spacing: 3px;
}
.navbar {
    background-color: white;
    height: 175px;
}
/* Navbar */
.nav-link {
    font-size: 13px;
    color: #D6A9A9;
}
.navbar-brand {
    font-size: 35px;
    color: #D6A9A9;
    position: relative;
}
.navbar-nav {
    padding-left: 20px;
}
.active {
    color: #a96f6fff !important;
}
.brand-subtext {
    font-size: 14px;
    position: relative;
    top: -5px;
}
.line {
    width: 75px;
    height: 1px;
    background-color: #D6A9A9;
}
.right {
    position: relative;
    left: 280px;
}

/* body1 */
.main {
    width: 100%;;
    background: url(img/f83306656e265ab12fcf92f45e87d508.jpg);
    padding-top: 30px;
}
.cont-box {position: absolute;
    width: 200px;
    height: 50px;
    background-color: #D6A9A9;
    border: none;
    justify-content: center;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}

/* about */
.about {
    width: 100%;
    height: 300px;
    background-color: #f5d7d7;
    text-align: center;
}
.about-header {
    font-size: 25px;
}
.about-text {
    font-size: 15px;
}
.dots {
    width: 75px;
    height: 3px;
    background-color: black;
    border-radius: 50px;
    display: block;
    margin: auto;
}
/* updates form */
.update {
    width: 100%;
}
.update-header {
    font-size: 25px;
    letter-spacing: normal;
}
.form-updates {
    display: flex;
    justify-content: center;
}
.updates {
    width: 900px;
}
#email {
    border: none;
    background-color: #f3e8e7;
    height: 50px;
    width: 460px;
    padding-left: 20px;
}
.button-updates {
    color: black !important;
    width: 350px;
    height: 50px;
    border: 3px solid #f3e8e7;
    background-color: rgba(255, 255, 255, 0);
}
.page {
    width: 100%;
    height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    width: 410px;
    height: 400px;
    background-color: #eddddb;
    border: none;
}
/* Force everything inside .updates to align left */
.updates {
  text-align: left !important;
  margin: 0 auto;      /* centers the block itself */
  max-width: 800px;
}

/* Make input + button same height */
.updates .form-control {
  height: 100%;
}

.updates .button-updates {
  white-space: nowrap;
}
.form-text {
    letter-spacing: normal;
}
.title {
    width: 355px;
}
.img1, .img2, .img3 {
    width: 400px;
    height: 600px;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; /* important for absolute positioning of text */
}

/* Original background sizes */
.img1 { background: url(img/rosepetals.png); background-size: 550px 600px; }
.img2 { background: url(img/FB_IMG_1745446930709.jpg); background-size: 450px 600px; }
.img3 { background: url(img/28804476412fef9b813a34094d3c1d87.jpg); background-size: 400px 600px; }

/* Stepwise screen-width scaling */
@media screen and (max-width: 1350px) {
    .img1 { width: 380px; height: 570px; background-size: 498.75px 570px; }
    .img2 { width: 380px; height: 570px; background-size: 427px 570px; }
    .img3 { width: 380px; height: 570px; background-size: 380px 570px; }
    .button-updates { width: 300px;  }
    .main { height: 700px; }
}

@media screen and (max-width: 1300px) {
    .img1 { width: 360px; height: 540px; background-size: 472.5px 540px; }
    .img2 { width: 360px; height: 540px; background-size: 405px 540px; }
    .img3 { width: 360px; height: 540px; background-size: 360px 540px; }
    .button-updates { width: 275px;  }
}

@media screen and (max-width: 1250px) {
    .img1 { width: 340px; height: 510px; background-size: 446.25px 510px; }
    .img2 { width: 340px; height: 510px; background-size: 383px 510px; }
    .img3 { width: 340px; height: 510px; background-size: 340px 510px; }
    .button-updates { width: 250px;  }
}

@media screen and (max-width: 1200px) {
    .img1 { width: 320px; height: 480px; background-size: 420px 480px; }
    .img2 { width: 320px; height: 480px; background-size: 360px 480px; }
    .img3 { width: 320px; height: 480px; background-size: 320px 480px; }
    .button-updates { width: 225px;  }
}

@media screen and (max-width: 1150px) {
    .img1 { width: 300px; height: 450px; background-size: 393.75px 450px; }
    .img2 { width: 300px; height: 450px; background-size: 337px 450px; }
    .img3 { width: 300px; height: 450px; background-size: 300px 450px; }
    .button-updates { width: 200px;  }
    .navbar-brand { transform: scale(0.9);}
    .navbar { height: 150px; }
}

@media screen and (max-width: 1100px) {
    .img1 { width: 280px; height: 420px; background-size: 367.5px 420px; }
    .img2 { width: 280px; height: 420px; background-size: 315px 420px; }
    .img3 { width: 280px; height: 420px; background-size: 280px 420px; }
    .button-updates { width: 175px;  }
}

@media screen and (max-width: 950px) {
    .img1 { width: 260px; height: 390px; background-size: 341.25px 390px; }
    .img2 { width: 260px; height: 390px; background-size: 292px 390px; }
    .img3 { width: 260px; height: 390px; background-size: 260px 390px; }
    .button-updates { width: 150px;  }
    .navbar-brand { transform: scale(0.8);}
    .navbar { height: 125px; }
    .main { height: 1400px; }
}

@media screen and (max-width: 450px) {
    .img1 { width: 260px; height: 390px; background-size: 341.25px 390px; }
    .img2 { width: 260px; height: 390px; background-size: 292px 390px; }
    .img3 { width: 260px; height: 390px; background-size: 260px 390px; }
    .navbar-brand { transform: scale(0.5); top: -125px; left: -40px;}
    .navbar { height: 75px; }
    .main { height: 1400px; }
}

@media screen and (max-width: 400px) {
    .img1 { width: 240px; height: 360px; background-size: 315px 360px; }
    .img2 { width: 240px; height: 360px; background-size: 270px 360px; }
    .img3 { width: 240px; height: 360px; background-size: 240px 360px; }
}

/* Sidebar hidden by default */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px;  /* hide offscreen */
  width: 250px;
  height: 100%;
  background-color: #f8f9fa;
  overflow-y: auto;
  transition: left 0.3s ease;
  z-index: 1050;
  padding-top: 60px;
}
/* Make the toggle button vertically centered */
.navbar #sidebarToggle {
    height: 100%;              /* make button as tall as the navbar */
    display: flex;
    align-items: center;        /* center the icon vertically */
    justify-content: center;    /* optional: center horizontally */
    padding: 0 0.75rem;         /* adjust horizontal padding if needed */
    font-size: 1.5rem;          /* bigger hamburger icon */
    border: none;               /* optional, removes default border */
    background: transparent;    /* optional, clean look */
    cursor: pointer;
}
/* Sidebar visible */
.sidebar.show {
  left: 0;
}

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

.sidebar-nav li {
  padding: 15px 20px;
}

.sidebar-nav li a {
  text-decoration: none;
  color: #000;
  display: block;
}

/* Optional: hover effect */
.sidebar-nav li a:hover {
  background-color: #ddd;
}
/* Hide toggle on large screens */
@media(min-width: 1122px) {
  .sidebarToggle {
    display: none;
  }
    .text {
        position: relative;
        left: 470px;
    }
}
@media(max-width: 1122px) {
    .button-updates {
        width: 350px;
    }
    .right {
        position: relative;
        left: 307px;
    }
    .left {
        position: relative;
        left: 20px;
    }
}
@media screen and (max-width: 450px) {
    #email {
        width: 350px;
    }
    .brand-subtext {
        position: relative;
        left: 20px;
    }
    .title {
        position: relative;
        left: 20px;
    }
}