tło
body {
margin: 0;
padding: 0;
background: url('https://frutiger-aero.org/img/frutiger-eco-2.webp') no-repeat center center fixed;
background-size: cover;
font-family: 'Segoe UI', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
ikonka
link rel="icon" type="image/png" href="https://64.media.tumblr.com/5136c2aee0a9af6f0b23ba8c59700763/2627608fa20911ea-a4/s400x600/a8eb87ab023815a3a93c001dd2fd6e8384f92194.pnj"
ramka
.ramka {
max-width: 90%;
padding: 20px;
background: linear-gradient(145deg, rgba(200,255,255,0.5), rgba(255,255,255,0.2));
border: 2px solid rgba(255,255,255,0.6);
border-radius: 25px;
box-shadow: 0 0 30px rgba(225,255,255,0.4), inset 0 0 10px rgba(255,255,255,0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #003344;
text-align: center;
}
śnieżynki
/* customizable snowflake styling */
.snowflake {
color: white;
font-size: 1em;
font-family: Pixelify Sans , sans-serif;
text-shadow: 0 0 5px black;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
chmurki
.cloud {
position: absolute;
top: 20px;
width: 100px;
animation: float 5s ease-in-out infinite;
transition: filter 0.3s;
cursor: pointer;
z-index: 5;
}
.cloud:hover {
filter: brightness(1.2);
}
.cloud:active {
filter: brightness(2);
}
.cloud1 {
left: 10%;
animation-delay: 0s;
}
.cloud2 {
right: 10%;
animation-delay: 2.5s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
