html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Custom styles for Elizabeth Musa's violin website */
.hero-section {
    background: linear-gradient(135deg, #0a1128 0%, #1a1f3a 30%, #2c3e7a 70%, #3d5a9e 100%);
    padding: 80px 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero-section h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 1px;
}

.navbar-brand {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem;
}

.violin-illustration {
    text-align: center;
    padding: 2rem;
}

.violin-silhouette {
    /* font-size: 150px;
    color: #8b4513;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1); */
    animation: gentle-sway 3s ease-in-out infinite;
}

@keyframes gentle-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

.navbar-brand {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem;
}

.card {
    transition: transform 0.2s ease-in-out;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.btn-primary {
    background-color: #d4af37;
    border-color: #d4af37;
    color: #0a1128;
}

.btn-primary:hover {
    background-color: #b8941f;
    border-color: #b8941f;
    color: #0a1128;
}

.btn-outline-primary {
    color: #d4af37;
    border-color: #d4af37;
}

.btn-outline-primary:hover {
    background-color: #d4af37;
    border-color: #d4af37;
    color: #0a1128;
}

.text-muted {
    color: #c0c0c0 !important;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: #f8f9fa;
}

.contact-info {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin-top: 2rem;
}

/* Musical note decorations */
/* Musical note decorations - DISABLED */
/*
.hero-section::before {
    content: '🌟✨🥂🎊🎉';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    color: rgba(212, 175, 55, 0.9);
    z-index: 10;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
                 0 0 20px rgba(192, 192, 192, 0.6);
}
*/

@keyframes celebrationSparkle {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% { 
        transform: scale(1.1) rotate(5deg);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.2) rotate(-5deg);
        opacity: 1;
    }
    75% { 
        transform: scale(1.1) rotate(3deg);
        opacity: 0.9;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Repertoire section styling */
#repertoire .card-header {
    font-weight: 600;
}

#repertoire .card-body ul li {
    padding: 2px 0;
    font-size: 0.95rem;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-info:hover {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

/* Media page styling */
.video-container {
    margin-bottom: 1rem;
    width: 100%;
}

.video-container iframe {
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

/* Force equal video container sizes */
.video-container .ratio {
    width: 100%;
}

/* Clean CSS Grid Layout for video grid */
.video-grid-container,
.media-video-grid .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.video-item,
.media-video-grid .row > div {
    width: 100%;
    margin-bottom: 2rem;
    padding: 0 !important;
    max-width: none !important;
    flex: none !important;
    position: static !important;
}

/* Mobile layout - single column */
@media (max-width: 767.98px) {
    .video-grid-container,
    .media-video-grid .row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Ensure video containers are consistent */
.video-item .video-container,
.media-video-grid .video-container {
    width: 100%;
    display: block;
}

.video-item .video-container .ratio,
.media-video-grid .video-container .ratio {
    width: 100%;
    height: auto;
}

.placeholder-video {
    border-radius: 8px;
    border: 2px dashed #dee2e6;
    min-height: 200px;
    transition: border-color 0.3s ease;
}

.placeholder-video:hover {
    border-color: #adb5bd;
}

.video-info h5, .video-info h6 {
    color: #6f4e37;
    margin-bottom: 0.5rem;
}

.youtube-icon, .vimeo-icon {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.placeholder-video:hover .youtube-icon,
.placeholder-video:hover .vimeo-icon {
    opacity: 1;
}

/* Snowfall animation */
.snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation-name: snowfall;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: #e0f2ff;
    font-size: 1.5em;
    opacity: 0.9;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 
                 0 0 6px rgba(200, 230, 255, 0.6),
                 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes snowfall {
    0% {
        transform: translateY(0vh) rotate(0deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

/* Create multiple snowflakes with different positions, speeds, and sizes */
.snowflake:nth-of-type(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 1.2em; }
.snowflake:nth-of-type(2) { left: 10%; animation-duration: 12s; animation-delay: 1s; font-size: 1.8em; }
.snowflake:nth-of-type(3) { left: 15%; animation-duration: 9s; animation-delay: 2s; font-size: 1em; }
.snowflake:nth-of-type(4) { left: 20%; animation-duration: 11s; animation-delay: 0.5s; font-size: 1.6em; }
.snowflake:nth-of-type(5) { left: 25%; animation-duration: 10s; animation-delay: 1.5s; font-size: 1.3em; }
.snowflake:nth-of-type(6) { left: 30%; animation-duration: 13s; animation-delay: 2.5s; font-size: 2em; }
.snowflake:nth-of-type(7) { left: 35%; animation-duration: 8.5s; animation-delay: 0.8s; font-size: 0.9em; }
.snowflake:nth-of-type(8) { left: 40%; animation-duration: 11.5s; animation-delay: 1.8s; font-size: 1.4em; }
.snowflake:nth-of-type(9) { left: 45%; animation-duration: 9.5s; animation-delay: 2.2s; font-size: 1.1em; }
.snowflake:nth-of-type(10) { left: 50%; animation-duration: 10.5s; animation-delay: 0.3s; font-size: 1.7em; }
.snowflake:nth-of-type(11) { left: 55%; animation-duration: 12.5s; animation-delay: 1.3s; font-size: 1.5em; }
.snowflake:nth-of-type(12) { left: 60%; animation-duration: 8.8s; animation-delay: 2.8s; font-size: 0.8em; }
.snowflake:nth-of-type(13) { left: 65%; animation-duration: 11.2s; animation-delay: 0.6s; font-size: 1.3em; }
.snowflake:nth-of-type(14) { left: 70%; animation-duration: 9.8s; animation-delay: 1.6s; font-size: 1.9em; }
.snowflake:nth-of-type(15) { left: 75%; animation-duration: 13.5s; animation-delay: 2.6s; font-size: 1.6em; }
.snowflake:nth-of-type(16) { left: 80%; animation-duration: 10.2s; animation-delay: 0.9s; font-size: 1.2em; }
.snowflake:nth-of-type(17) { left: 85%; animation-duration: 11.8s; animation-delay: 1.9s; font-size: 1.4em; }
.snowflake:nth-of-type(18) { left: 90%; animation-duration: 9.2s; animation-delay: 2.9s; font-size: 1em; }
.snowflake:nth-of-type(19) { left: 95%; animation-duration: 12.2s; animation-delay: 0.4s; font-size: 1.8em; }
.snowflake:nth-of-type(20) { left: 3%; animation-duration: 10.8s; animation-delay: 1.4s; font-size: 1.5em; }

/* New Year's confetti animation */
.confetti {
    position: fixed;
    top: -10px;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation-duration: 10s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-iteration-count: infinite;
    width: 10px;
    height: 6px;
    opacity: 0.9;
}

/* Stringy/streamer confetti - longer and thinner */
.confetti-streamer {
    width: 3px;
    height: 25px;
}

/* Confetti colors for New Year's */
.confetti-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    box-shadow: 0 0 3px rgba(212, 175, 55, 0.6);
}

.confetti-silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    box-shadow: 0 0 3px rgba(192, 192, 192, 0.6);
}

.confetti-blue {
    background: linear-gradient(135deg, #3d5a9e 0%, #5a7fc0 100%);
    box-shadow: 0 0 3px rgba(61, 90, 158, 0.6);
}

.confetti-white {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}
.confetti-red {
    background: linear-gradient(135deg, #ff3333, #cc0000);
    box-shadow: 0 0 3px rgba(255, 51, 51, 0.8);
}

.confetti-green {
    background: linear-gradient(135deg, #33ff33, #00cc00);
    box-shadow: 0 0 3px rgba(51, 255, 51, 0.8);
}

.confetti-yellow {
    background: linear-gradient(135deg, #ffff33, #ffcc00);
    box-shadow: 0 0 3px rgba(255, 255, 51, 0.8);
}

.confetti-pink {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    box-shadow: 0 0 3px rgba(255, 105, 180, 0.8);
}

.confetti-purple {
    background: linear-gradient(135deg, #9933ff, #6600cc);
    box-shadow: 0 0 3px rgba(153, 51, 255, 0.8);
}

/* Alternating realistic confetti animations */
@keyframes confettifall1 {
    0% {
        transform: translateY(0vh) translateX(0) rotateZ(0deg) rotateY(0deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(-15px) rotateZ(90deg) rotateY(180deg);
    }
    50% {
        transform: translateY(50vh) translateX(10px) rotateZ(180deg) rotateY(360deg);
    }
    75% {
        transform: translateY(75vh) translateX(-20px) rotateZ(270deg) rotateY(540deg);
    }
    100% {
        transform: translateY(100vh) translateX(5px) rotateZ(360deg) rotateY(720deg);
        opacity: 0.3;
    }
}

@keyframes confettifall2 {
    0% {
        transform: translateY(0vh) translateX(0) rotateZ(0deg) rotateX(0deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(20px) rotateZ(-90deg) rotateX(180deg);
    }
    50% {
        transform: translateY(50vh) translateX(-15px) rotateZ(-180deg) rotateX(360deg);
    }
    75% {
        transform: translateY(75vh) translateX(25px) rotateZ(-270deg) rotateX(540deg);
    }
    100% {
        transform: translateY(100vh) translateX(-10px) rotateZ(-360deg) rotateX(720deg);
        opacity: 0.3;
    }
}

@keyframes confettifall3 {
    0% {
        transform: translateY(0vh) translateX(0) rotateZ(45deg) rotateY(0deg) rotateX(0deg);
        opacity: 1;
    }
    20% {
        transform: translateY(20vh) translateX(-25px) rotateZ(135deg) rotateY(144deg) rotateX(144deg);
    }
    40% {
        transform: translateY(40vh) translateX(30px) rotateZ(225deg) rotateY(288deg) rotateX(288deg);
    }
    60% {
        transform: translateY(60vh) translateX(-15px) rotateZ(315deg) rotateY(432deg) rotateX(432deg);
    }
    80% {
        transform: translateY(80vh) translateX(20px) rotateZ(405deg) rotateY(576deg) rotateX(576deg);
    }
    100% {
        transform: translateY(100vh) translateX(-5px) rotateZ(495deg) rotateY(720deg) rotateX(720deg);
        opacity: 0.3;
    }
}

/* Create multiple confetti pieces with different positions, speeds, and animations */
.confetti:nth-of-type(1) { left: 5%; animation-name: confettifall1; animation-duration: 6s; animation-delay: 0s; font-size: 1.3em; }
.confetti:nth-of-type(2) { left: 10%; animation-name: confettifall2; animation-duration: 8.5s; animation-delay: 0.8s; font-size: 1.6em; }
.confetti:nth-of-type(3) { left: 15%; animation-name: confettifall3; animation-duration: 7.2s; animation-delay: 1.6s; font-size: 1.1em; }
.confetti:nth-of-type(4) { left: 20%; animation-name: confettifall1; animation-duration: 9s; animation-delay: 0.3s; font-size: 1.8em; }
.confetti:nth-of-type(5) { left: 25%; animation-name: confettifall2; animation-duration: 6.8s; animation-delay: 1.2s; font-size: 1.4em; }
.confetti:nth-of-type(6) { left: 30%; animation-name: confettifall3; animation-duration: 10s; animation-delay: 2.1s; font-size: 2em; }
.confetti:nth-of-type(7) { left: 35%; animation-name: confettifall1; animation-duration: 7.5s; animation-delay: 0.5s; font-size: 1em; }
.confetti:nth-of-type(8) { left: 40%; animation-name: confettifall2; animation-duration: 8.8s; animation-delay: 1.5s; font-size: 1.5em; }
.confetti:nth-of-type(9) { left: 45%; animation-name: confettifall3; animation-duration: 7s; animation-delay: 2.2s; font-size: 1.2em; }
.confetti:nth-of-type(10) { left: 50%; animation-name: confettifall1; animation-duration: 9.5s; animation-delay: 0.2s; font-size: 1.9em; }
.confetti:nth-of-type(11) { left: 55%; animation-name: confettifall2; animation-duration: 7.8s; animation-delay: 1.1s; font-size: 1.6em; }
.confetti:nth-of-type(12) { left: 60%; animation-name: confettifall3; animation-duration: 6.5s; animation-delay: 2.5s; font-size: 0.9em; }
.confetti:nth-of-type(13) { left: 65%; animation-name: confettifall1; animation-duration: 9.2s; animation-delay: 0.4s; font-size: 1.4em; }
.confetti:nth-of-type(14) { left: 70%; animation-name: confettifall2; animation-duration: 8.2s; animation-delay: 1.4s; font-size: 2em; }
.confetti:nth-of-type(15) { left: 75%; animation-name: confettifall3; animation-duration: 10.2s; animation-delay: 2.3s; font-size: 1.7em; }
.confetti:nth-of-type(16) { left: 80%; animation-name: confettifall1; animation-duration: 7.3s; animation-delay: 0.7s; font-size: 1.3em; }
.confetti:nth-of-type(17) { left: 85%; animation-name: confettifall2; animation-duration: 8.5s; animation-delay: 1.8s; font-size: 1.5em; }
.confetti:nth-of-type(18) { left: 90%; animation-name: confettifall3; animation-duration: 7.8s; animation-delay: 2.7s; font-size: 1.1em; }
.confetti:nth-of-type(19) { left: 95%; animation-name: confettifall1; animation-duration: 10.5s; animation-delay: 0.3s; font-size: 1.8em; }
.confetti:nth-of-type(20) { left: 3%; animation-name: confettifall2; animation-duration: 8.8s; animation-delay: 1.3s; font-size: 1.6em; }
.confetti:nth-of-type(21) { left: 8%; animation-name: confettifall3; animation-duration: 7.6s; animation-delay: 0.6s; font-size: 1.2em; }
.confetti:nth-of-type(22) { left: 12%; animation-name: confettifall1; animation-duration: 9.3s; animation-delay: 1.9s; font-size: 1.5em; }
.confetti:nth-of-type(23) { left: 18%; animation-name: confettifall2; animation-duration: 6.9s; animation-delay: 0.9s; font-size: 1.1em; }
.confetti:nth-of-type(24) { left: 23%; animation-name: confettifall3; animation-duration: 8.7s; animation-delay: 2.4s; font-size: 1.7em; }
.confetti:nth-of-type(25) { left: 28%; animation-name: confettifall1; animation-duration: 7.1s; animation-delay: 0.4s; font-size: 1.3em; }
.confetti:nth-of-type(26) { left: 33%; animation-name: confettifall2; animation-duration: 9.8s; animation-delay: 1.7s; font-size: 1.9em; }
.confetti:nth-of-type(27) { left: 38%; animation-name: confettifall3; animation-duration: 6.7s; animation-delay: 2.8s; font-size: 1em; }
.confetti:nth-of-type(28) { left: 43%; animation-name: confettifall1; animation-duration: 8.4s; animation-delay: 0.1s; font-size: 1.6em; }
.confetti:nth-of-type(29) { left: 48%; animation-name: confettifall2; animation-duration: 7.4s; animation-delay: 1.6s; font-size: 1.4em; }
.confetti:nth-of-type(30) { left: 53%; animation-name: confettifall3; animation-duration: 9.6s; animation-delay: 2.6s; font-size: 2em; }
.confetti:nth-of-type(31) { left: 58%; animation-name: confettifall1; animation-duration: 6.6s; animation-delay: 0.5s; font-size: 1.1em; }
.confetti:nth-of-type(32) { left: 63%; animation-name: confettifall2; animation-duration: 8.9s; animation-delay: 1.4s; font-size: 1.7em; }
.confetti:nth-of-type(33) { left: 68%; animation-name: confettifall3; animation-duration: 7.7s; animation-delay: 2.1s; font-size: 1.2em; }
.confetti:nth-of-type(34) { left: 73%; animation-name: confettifall1; animation-duration: 9.1s; animation-delay: 0.8s; font-size: 1.8em; }
.confetti:nth-of-type(35) { left: 78%; animation-name: confettifall2; animation-duration: 7.9s; animation-delay: 1.2s; font-size: 1.5em; }
.confetti:nth-of-type(36) { left: 83%; animation-name: confettifall3; animation-duration: 8.3s; animation-delay: 2.9s; font-size: 1.3em; }
.confetti:nth-of-type(37) { left: 88%; animation-name: confettifall1; animation-duration: 6.8s; animation-delay: 0.2s; font-size: 1.6em; }
.confetti:nth-of-type(38) { left: 93%; animation-name: confettifall2; animation-duration: 10.3s; animation-delay: 1.5s; font-size: 1.9em; }
.confetti:nth-of-type(39) { left: 98%; animation-name: confettifall3; animation-duration: 7.3s; animation-delay: 2.3s; font-size: 1.1em; }
.confetti:nth-of-type(40) { left: 2%; animation-name: confettifall1; animation-duration: 8.6s; animation-delay: 0.9s; font-size: 1.4em; }