html, body{
    height: 100%;
}

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

main{
    /*background-color: #DEC8EA;*/
}

@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;
    }
}

.clip-mask{
    clip-path: url(#hero-clip-path);
    object-fit: cover;
    width: 100%;
}

.hero{
    background: url("img/99546c6e-746a-4117-9ff3-d55809192c76.png") no-repeat center top;
    mask-image: url("img/mask.png");
    -webkit-mask-image: url("img/mask.png");
    mask-repeat: no-repeat;
    background-size: cover;

    mask-size:cover;
    height: 43rem;
}

.content{
    margin-top: -5rem;
}

@media (min-width: 992px) {
    .content{
        margin-top: 0;
    }
}