@font-face {
    font-family: 'MinGothic';
    src: url('../MinGothic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.snow-container { position: fixed; top: 0; left: 0; overflow: hidden; width: 100vw;height: 100vh; z-index: 99999; pointer-events: none;}
.snowflake {position: absolute; background-color: white; border-radius: 50%; opacity: 0.8;pointer-events: none;}

@keyframes fall {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
        transform: translateY(100vh);
    }
}

@keyframes diagonal-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
        transform: translate(10vw, 100vh);
    }
}

  
body {background-color: rgb(71, 71, 71); width: 100%; height: 100%;font-family: 'MinGothic'; color: white;word-break: keep-all; }
.login { display: flex; align-items: center; color: white; justify-content: center; height: 100vh; flex-direction: column; gap: 3rem;}
button { background-color: white; border: none; color:black; padding: 0; margin: 0;}
header { display: flex; justify-content: center; gap:1rem; position: fixed; top: 0; width: 100%;padding: 1rem; }
a { color: white; text-decoration: none;}
.e-list { width: 21vw;flex-direction: column; height: 81vh;display: flex;border: 1px solid white;max-width: 60vw;margin: 7rem auto; overflow-y: scroll;}
.pagination { display: flex;gap:1rem; justify-content: center; padding: 1rem;}
.e-list-item {    padding: 1rem;display: flex;flex-direction: column;gap: 0.5rem; line-height: 1.7; margin:5rem 0; height: fit-content;}
.e-list-item-header { display: flex; justify-content: space-between;}
img { margin: 1rem 0; }
hr { border: 0.3px dashed white;}
select {    font: 'MinGothic'; background: none; color: white; border: 0.3px dashed white; padding: 0.5rem;}
p { word-break: break-all; }
.modal { display: none;align-items: center; position: fixed; top: 0; left: 0; width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;}
.modal-content {width: 21vw;height: 82vh;margin: 0 auto;border: 1px solid white;background-color: rgb(224, 176, 194); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2rem; }
.close-button {float: right;cursor: pointer; }
.pagination-list li.active a {background-color: #333;color: #fff;font-weight: bold;}
.pagination-list {     display: flex; flex-direction: row-reverse; gap: 1rem; width: 100%; flex-wrap: wrap-reverse; justify-content: start;}
span { cursor: pointer; }
.footprint { display: flex; gap: 1rem; align-items: center; flex-direction: column;}
#like-button { border: 1px solid white; background-color: black; color:white ; padding:0.5rem }

@media (orientation:portrait) {
    header { background-color: black; mix-blend-mode: difference;}
    .e-list {         width: 100%; height: 100%;max-width: unset;margin: 3rem auto;border:none}
    .modal-content {padding:1rem; width: 100%; height: 100%; max-width: unset; margin: 3rem 0; border: none; }
    hr { display: none; }
}