/*  */
html{
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.header{
    background-color: #3A086F!important;
}

.hero{
    background: radial-gradient(circle at 30% -20%, #3a086f, #3a0a76, #3a0c7c, #3a0e83, #38118a, #371491, #341698, #3119a0, #2c1ca7, #261faf, #1c22b6, #0a25be);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    position: relative;
}

#footer{
    background: radial-gradient(circle at 30% 120%, #3a086f, #3a0a76, #3a0c7c, #3a0e83, #38118a, #371491, #341698, #3119a0, #2c1ca7, #261faf, #1c22b6, #0a25be);
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 576px) {
    .hero{
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }
    #footer{
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    }
}

@media (min-width: 768px) {
    .hero{
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    }
    #footer{
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    }
}

@media (min-width: 992px) {
    .hero{
        clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    }
    #footer{
        clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%);
    }
}

#hero-mask {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url("./img/hero.webp") no-repeat center;
    background-size: cover;
    clip-path: circle(0% at 50% 50%);
}

#hero-mask-upper{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}