@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Roboto:ital,wght@0,300;1,300&display=swap');

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

body {
    background: #111;
    font-family: "Lilita One", sans-serif;
    color: white;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

p, .roboto {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}

img {
    filter: drop-shadow(5px 5px 10px #000);
}

.center {
    text-align: center;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.gradient-background > h1 {
    font-size: 76px;
}

.projectlist, .sociallist {
    display: flex;
    justify-content: center;
}

.projectlist {
    column-gap: 70px;
}

.sociallist {
    column-gap: 20px;
}

.socialicon {
    height: 35px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.socialicon:hover {
    opacity: 1;
}

.hello {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    column-gap: 70px;
    font-size: 18px;
}

#Hello {
    width: 180px;
    filter: drop-shadow(3px 0 0 white) 
            drop-shadow(0 3px 0 white)
            drop-shadow(-3px 0 0 white) 
            drop-shadow(0 -3px 0 white);
}

.gradient-background {
    background: linear-gradient(300deg, deepskyblue, darkviolet, blue);
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;
    padding-bottom: 25px;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes text-focus-in {
    0% { filter: blur(12px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

/* Опционально: медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    .gradient-background > h1 {
        font-size: 48px;
    }
    
    .projectlist {
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
    }
    
    .hello {
        flex-direction: column;
        align-items: center;
        text-align: center;
        row-gap: 20px;
    }
}