@font-face {
    font-family: 'Monument Extended';
    src: url(./assets/fonts/MonumentExtended-FreeForPersonalUse/MonumentExtended-Regular.otf);
}
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 1600px;
    background: #161616;
}

body {
    box-sizing: border-box;
    padding: 0 120px;
    overflow-x: hidden;
}

.content {
    width: 70%;
    margin: 200px auto;
}

.container {
    margin: 80px 0;
}

h1{
    text-transform: uppercase;
    color: #fff;
    font-family: 'Monument Extended';
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 1.4px;
    padding: 10px 0;
    margin-bottom: 16px;
}

p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: #fff;
}

.text{
    color: transparent;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: 0.8s;
}

.text.reveal{
    color:#fff;
    animation: revealTextAnimation 0.64s ease forwards;
}

.text::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.text.reveal::before{
    background: #6c2e13;
    animation: blockRevealAnimation 0.8s ease forwards;
}

.img {
    position: relative;
    display: block;
    overflow: hidden;
}

.img img {
    max-width: 100%;
    opacity: 0;
}

.img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.img.reveal::before{
    background: #544c26;
    animation: blockRevealAnimation 0.8s ease forwards;
}

.img.reveal img {
    animation: revealImgAnimation 0.8s ease forwards;
}


@keyframes blockRevealAnimation {
    0%{
        left: -100%;
    }
    40%{
        left: 0%;
    }
    60%{
        left: 0%;
    }
    100%{
        left: 100%;
    }
    
}

@keyframes revealTextAnimation {
        0% {
            color: transparent;
        }
        40% {
            color: transparent;
        }
        60%{
            color: #fff;
        }
}

@keyframes revealImgAnimation {
    0%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}