@keyframes homepage-move-fade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes homepage-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;       
    }
}

#logo-homepage {
    width: auto;
    display: block;
    animation: homepage-move-fade 1s ease-out both;
}

@media (max-width: 799px) {
    #logo-homepage {
        height: 80px;
        margin: 30px auto;
    }
}

@media (min-width: 800px) {
    #logo-homepage {
        height: 110px;
        margin: 50px auto 30px auto;
    }
}


#homepage-subtitle {
    width: fit-content;
    text-align: center;
    color: var(--color-black);
    padding: 5px 15px;
    border-radius: 10px;
    margin: 0 auto;
    background-color: var(--color-beige-light);
    box-shadow: 0 0 7px 7px var(--color-beige-light);
    animation: homepage-move-fade 1s ease-out both;
    animation-delay: 0.3s;
}

@media (max-width: 599px) {
    #homepage-subtitle {
        font-size: 19px;
    }
}

@media (min-width: 600px) {
    #homepage-subtitle {
        font-size: 21px;
    }
}

#homepage-text {
    max-width: 900px;
    margin: 50px auto 10px auto;
    padding: 10px 0;
    animation: homepage-fade 1s ease-out both;
    animation-delay: 0.6s;
    border-bottom: 1px solid var(--color-gray-light);
}

#homepage-text p {
    color: var(--color-black);
    margin: 17px 0;
}

@media (max-width: 599px) {
    #homepage-text p {
        font-size: 15px;
    }
}

@media (min-width: 600px) {
    #homepage-text p {
        font-size: 16px;
    }
}

#homepage-text ul {
    margin-left: 30px;
    margin-bottom: 30px;
}

#homepage-text li {
    list-style-type: none;
    color: var(--color-black);
    margin: 23px 0;
    font-size: 17px;
    display: flex;
    align-items: center;
}

#homepage-text li img {
    margin-right: 11px;
    border: 1px solid var(--color-gray-light);
    border-radius: 2px;
    width: 40px;
    height: auto;
    box-shadow: 0 0 7px rgba(0,0,0,0.2);
}

#icons-block {
    max-width: 900px;
    margin: 0 auto 50px auto;
    animation: homepage-fade 1s ease-out both;
    animation-delay: 0.6s;
}

#icons-block i {
    color: var(--color-gray-dark);
    cursor: pointer;
    margin-right: 11px;
}

#icons-block a {
    text-decoration: none;
}

#mail-icon {
    font-size: 20px;
}

#mail-icon:hover {
    color: var(--color-blue);
}

#youtube-icon {
    font-size: 21px;
}

#youtube-icon:hover {
    color: #ff0033;
}

#bug-icon {
    font-size: 20px;
}

#bug-icon:hover {
    color: var(--color-beige-dark);
}

#erasmus-block {
    animation: homepage-fade 1s ease-out both;
    animation-delay: 0.9s;
}

#erasmus-block p {
    text-align: center;
    color: var(--color-gray-dark);
    margin: 12px 0;
    font-size: 14px;
}

#erasmus-block a {
    color: var(--color-blue);
    padding: 1px 3px;
    border-radius: 3px;
}

#erasmus-block a:hover {
    background-color: var(--color-blue-light);
}

#erasmus-block img {
    display: block;
    margin: 20px auto 0 auto;
}