/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Georgia', serif;
    color: #e6d7b3;
    overflow: hidden;
}

body {
    position: relative;
    background-color: #000;
    overflow-x: hidden;
}

/* Background Styles */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: url('hat.jpg') center center/cover no-repeat;
    opacity: 0.35; /* Very faint background */
    filter: brightness(0.4) contrast(0.9);
}

/* Vignette Effect */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
    z-index: -1;
}

/* Password Container Styles */
.password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    z-index: 10;
}

.password-box {
    background-color: rgba(20, 20, 30, 0.85);
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 25px rgba(250, 220, 150, 0.2);
    text-align: center;
    border: 1px solid #5c4520;
    max-width: 400px;
    width: 90%;
}

.password-box h1 {
    color: #e6d7b3;
    font-family: 'Georgia', serif;
    margin-bottom: 30px;
    font-size: 28px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
}

.input-container {
    margin-bottom: 25px;
}

.dickens-password {
    width: 100%;
    padding: 12px;
    font-family: 'Georgia', serif;
    font-size: 16px;
    background-color: rgba(10, 10, 15, 0.8);
    border: 1px solid #5c4520;
    border-radius: 3px;
    color: #e6d7b3;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.dickens-password:focus {
    outline: none;
    border-color: #866a34;
    box-shadow: 0 0 8px rgba(230, 215, 179, 0.4);
}

.dickens-button {
    padding: 10px 25px;
    background-color: #5c4520;
    color: #e6d7b3;
    border: none;
    border-radius: 3px;
    font-family: 'Georgia', serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dickens-button:hover {
    background-color: #866a34;
}

/* Password Message Styles */
.password-message {
    margin-top: 15px;
    padding: 8px;
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 16px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.password-message.correct {
    background-color: rgba(40, 80, 40, 0.6);
    color: #b8e6b8;
    border: 1px solid #5a9d5a;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.password-message.incorrect {
    background-color: rgba(80, 40, 40, 0.6);
    color: #e6b8b8;
    border: 1px solid #9d5a5a;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Snow Styles - converted from SASS/SCSS */
.snow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    z-index: 5;
    filter: drop-shadow(0 0 5px white);
    opacity: 0.5;
}

/* Individual snow particles */
.snow:nth-child(1) {
    opacity: 0.7;
    transform: translate(20vw, -10px) scale(0.3);
    animation: fall-1 15s -2s linear infinite;
}

@keyframes fall-1 {
    50% {
        transform: translate(25vw, 50vh) scale(0.3);
    }
    100% {
        transform: translate(22.5vw, 100vh) scale(0.3);
    }
}

.snow:nth-child(2) {
    opacity: 0.4;
    transform: translate(70vw, -10px) scale(0.6);
    animation: fall-2 12s -5s linear infinite;
}

@keyframes fall-2 {
    50% {
        transform: translate(65vw, 50vh) scale(0.6);
    }
    100% {
        transform: translate(67.5vw, 100vh) scale(0.6);
    }
}

.snow:nth-child(3) {
    opacity: 0.3;
    transform: translate(30vw, -10px) scale(0.2);
    animation: fall-3 17s -9s linear infinite;
}

@keyframes fall-3 {
    50% {
        transform: translate(35vw, 50vh) scale(0.2);
    }
    100% {
        transform: translate(32.5vw, 100vh) scale(0.2);
    }
}

.snow:nth-child(4) {
    opacity: 0.6;
    transform: translate(90vw, -10px) scale(0.5);
    animation: fall-4 20s -1s linear infinite;
}

@keyframes fall-4 {
    50% {
        transform: translate(95vw, 50vh) scale(0.5);
    }
    100% {
        transform: translate(92.5vw, 100vh) scale(0.5);
    }
}

.snow:nth-child(5) {
    opacity: 0.8;
    transform: translate(10vw, -10px) scale(0.4);
    animation: fall-5 10s -7s linear infinite;
}

@keyframes fall-5 {
    50% {
        transform: translate(15vw, 50vh) scale(0.4);
    }
    100% {
        transform: translate(12.5vw, 100vh) scale(0.4);
    }
}

.snow:nth-child(6) {
    opacity: 0.5;
    transform: translate(50vw, -10px) scale(0.3);
    animation: fall-6 13s -4s linear infinite;
}

@keyframes fall-6 {
    50% {
        transform: translate(45vw, 50vh) scale(0.3);
    }
    100% {
        transform: translate(47.5vw, 100vh) scale(0.3);
    }
}

.snow:nth-child(7) {
    opacity: 0.7;
    transform: translate(80vw, -10px) scale(0.2);
    animation: fall-7 18s -3s linear infinite;
}

@keyframes fall-7 {
    50% {
        transform: translate(75vw, 50vh) scale(0.2);
    }
    100% {
        transform: translate(77.5vw, 100vh) scale(0.2);
    }
}

.snow:nth-child(8) {
    opacity: 0.4;
    transform: translate(40vw, -10px) scale(0.6);
    animation: fall-8 14s -8s linear infinite;
}

@keyframes fall-8 {
    50% {
        transform: translate(35vw, 50vh) scale(0.6);
    }
    100% {
        transform: translate(37.5vw, 100vh) scale(0.6);
    }
}

.snow:nth-child(9) {
    opacity: 0.6;
    transform: translate(60vw, -10px) scale(0.4);
    animation: fall-9 12s -6s linear infinite;
}

@keyframes fall-9 {
    50% {
        transform: translate(55vw, 50vh) scale(0.4);
    }
    100% {
        transform: translate(57.5vw, 100vh) scale(0.4);
    }
}

.snow:nth-child(10) {
    opacity: 0.3;
    transform: translate(5vw, -10px) scale(0.5);
    animation: fall-10 16s -2s linear infinite;
}

@keyframes fall-10 {
    50% {
        transform: translate(10vw, 50vh) scale(0.5);
    }
    100% {
        transform: translate(7.5vw, 100vh) scale(0.5);
    }
}

/* Styling for remaining snow particles */
.snow:nth-child(11) { opacity: 0.5; transform: translate(35vw, -10px) scale(0.35); animation: fall-1 14s -3s linear infinite; }
.snow:nth-child(12) { opacity: 0.6; transform: translate(45vw, -10px) scale(0.25); animation: fall-2 16s -6s linear infinite; }
.snow:nth-child(13) { opacity: 0.4; transform: translate(55vw, -10px) scale(0.45); animation: fall-3 11s -8s linear infinite; }
.snow:nth-child(14) { opacity: 0.7; transform: translate(65vw, -10px) scale(0.35); animation: fall-4 13s -4s linear infinite; }
.snow:nth-child(15) { opacity: 0.3; transform: translate(75vw, -10px) scale(0.55); animation: fall-5 17s -7s linear infinite; }
.snow:nth-child(16) { opacity: 0.5; transform: translate(85vw, -10px) scale(0.25); animation: fall-6 12s -2s linear infinite; }
.snow:nth-child(17) { opacity: 0.6; transform: translate(15vw, -10px) scale(0.4); animation: fall-7 15s -5s linear infinite; }
.snow:nth-child(18) { opacity: 0.7; transform: translate(25vw, -10px) scale(0.3); animation: fall-8 18s -3s linear infinite; }
.snow:nth-child(19) { opacity: 0.4; transform: translate(38vw, -10px) scale(0.5); animation: fall-9 11s -9s linear infinite; }
.snow:nth-child(20) { opacity: 0.5; transform: translate(48vw, -10px) scale(0.4); animation: fall-10 14s -1s linear infinite; }

/* Use similar animations for remaining particles */
.snow:nth-child(n+21) { animation: fall-1 15s linear infinite; }
.snow:nth-child(n+31) { animation: fall-2 12s linear infinite; }
.snow:nth-child(n+41) { animation: fall-3 17s linear infinite; }
.snow:nth-child(n+51) { animation: fall-4 20s linear infinite; }
.snow:nth-child(n+61) { animation: fall-5 10s linear infinite; }
.snow:nth-child(n+71) { animation: fall-6 13s linear infinite; }
.snow:nth-child(n+81) { animation: fall-7 18s linear infinite; }
.snow:nth-child(n+91) { animation: fall-8 14s linear infinite; }
.snow:nth-child(n+101) { animation: fall-9 12s linear infinite; }
.snow:nth-child(n+111) { animation: fall-10 16s linear infinite; }
.snow:nth-child(n+121) { animation: fall-1 15s linear infinite; }
.snow:nth-child(n+131) { animation: fall-2 12s linear infinite; }
.snow:nth-child(n+141) { animation: fall-3 17s linear infinite; }
.snow:nth-child(n+151) { animation: fall-4 20s linear infinite; }
.snow:nth-child(n+161) { animation: fall-5 10s linear infinite; }
.snow:nth-child(n+171) { animation: fall-6 13s linear infinite; }
.snow:nth-child(n+181) { animation: fall-7 18s linear infinite; }
.snow:nth-child(n+191) { animation: fall-8 14s linear infinite; }

/* Fog Styles */
.fogwrapper {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-filter: blur(1.5px) grayscale(0.15) saturate(1.1) sepia(0.25);
    filter: blur(1.5px) grayscale(0.15) saturate(1.1) sepia(0.25);
    z-index: 1;
    pointer-events: none;
    opacity: 0.95; /* Base opacity increased */
}

#foglayer_01, #foglayer_02, #foglayer_03 {
    height: 100%;
    position: absolute;
    width: 200%;
}

#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
    float: left;
    height: 100%;
    width: 50%;
}

#foglayer_01 {
    -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}

#foglayer_02, #foglayer_03 {
    -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* Moving Fog */
#foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}

#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* Fog Keyframes */
/* Keyframe Layer 1 */
@-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .25; }
    22% { opacity: .65; }
    40% { opacity: .5; }
    58% { opacity: .65; }
    80% { opacity: .45; }
    100% { opacity: .25; }
}

@-moz-keyframes foglayer_01_opacity {
    0% { opacity: .25; }
    22% { opacity: .65; }
    40% { opacity: .5; }
    58% { opacity: .65; }
    80% { opacity: .45; }
    100% { opacity: .25; }
}

@-o-keyframes foglayer_01_opacity {
    0% { opacity: .25; }
    22% { opacity: .65; }
    40% { opacity: .5; }
    58% { opacity: .65; }
    80% { opacity: .45; }
    100% { opacity: .25; }
}

@keyframes foglayer_01_opacity {
    0% { opacity: .25; }
    22% { opacity: .65; }
    40% { opacity: .5; }
    58% { opacity: .65; }
    80% { opacity: .45; }
    100% { opacity: .25; }
}

/* Keyframe Layer 2 */
@-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .6; }
    25% { opacity: .45; }
    50% { opacity: .3; }
    80% { opacity: .45; }
    100% { opacity: .6; }
}

@-moz-keyframes foglayer_02_opacity {
    0% { opacity: .6; }
    25% { opacity: .45; }
    50% { opacity: .3; }
    80% { opacity: .45; }
    100% { opacity: .6; }
}

@-o-keyframes foglayer_02_opacity {
    0% { opacity: .6; }
    25% { opacity: .45; }
    50% { opacity: .3; }
    80% { opacity: .45; }
    100% { opacity: .6; }
}

@keyframes foglayer_02_opacity {
    0% { opacity: .6; }
    25% { opacity: .45; }
    50% { opacity: .3; }
    80% { opacity: .45; }
    100% { opacity: .6; }
}

/* Keyframe Layer 3 */
@-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}

@-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}

@-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}

@keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}

/* Keyframe moveMe */
@-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}

@-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}

@-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}

@keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}

@media only screen
and (min-width: 280px)
and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
    }
}