/* surferstyle.css */

/* Theme vars */
:root {
    --primary: #ffffff;
    --primary-light: #151055;
    --secondary: #f3f6f7;
    --accent: #1100aa;
}

/* Original dark-blue wave background behind canvas */
html,
body {
    margin: 0;
    padding: 0;
    background-color: hsl(195, 100%, 7%);
}

/* Fixed full-screen canvas for the wave animation */
#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    margin: 0;
    display: block;
    filter: url('#shadowed-goo');
}

.white {
    color: white !important;
}

/* Typography + layout helpers */
.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2rem;
}

.font {
    font-family: "Original Surfer", serif;
    font-style: normal;
    font-weight: 700;
}

/* Outer container should be transparent so waves show through */
.container {
    background-color: transparent;
    border-radius: 10px;
    position: relative;
    z-index: 2; /* above canvas */
}

/* Top time card: glass background with 0.46 border */
.time .rounded-3 {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 20px;
}

/* Weather boxes: glass background with 0.46 border */
.time .text-box {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 20px;
}

/* Pull the weather display up to overlap the waves */
.centered.font.position-sticky.top-0.border-bottom {
    margin-top: -120px;
    z-index: 2;
    position: relative;
}

/* Colors */
.primary { color: var(--primary); }
.primary-light { color: var(--primary); font-weight: 400; }

/* Components */
.windSpeed { font-size: 4rem; font-weight: 700; color: var(--primary); }
.windSpeed-unit { font-size: 2rem; font-weight: 400; color: var(--primary); }

.temperature { font-size: 5rem; font-weight: 700; color: var(--primary); }
.temperature-unit { font-size: 2.5rem; font-weight: 400; color: var(--primary); }

.windDirection-img {
    width: auto;
    height: 150px;
}

.windDirection {
    color: var(--primary);
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: -25px;
}

.weather-icon { font-size: 5rem; padding: 5px; }

.current-weather {
    color: var(--primary);
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: -25px;
}

.huntingtime {
    font-size: 1.3rem;
    color: var(--primary);
    margin-top: 10px;
    border-bottom: var(--secondary) 5px solid;
    border-radius: 15px;
}

.vampire { font-size: 2.5rem; }

/* Hide the inline SVG element but keep filter available */
svg { display: none; }

/* Navbar translucency so waves remain visible under it */
.navbar.bg-body-tertiary {
    background-color: #1c1c1cf4 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    z-index: 3;
}