:root {
    --default-background: linear-gradient(90deg, #7C6D48 0%, rgb(36, 30, 22) 80%);
    --social-text-color: rgba(0,62,126, 1);
}

#background {
    min-height:600px;
    height:100%;
    width:100%;
    background-image:url('background.webp');
    background-size:auto 100%;
    background-position:-100px;
    background-repeat:no-repeat;
    overflow:hidden;
    animation: dimIn 2s, scaleIn 3s;
}

#background::after {
    content:"";
    border-bottom: 100vh solid rgba(62, 57, 50, 0.8);
    border-left: 10vw solid transparent;
    border-right: 0px solid transparent;
    right:45%;
    top:0;
    position:absolute;
    transition: right 1s;
}

#background::before {
    content: "";
    background:rgba(62, 57, 50, 0.8);
    height: 200px;
    width: 500px;
    position:absolute;
    transform: rotate(-72deg);
    left:-270px;
    top:0;
    background-color: #7C6D48;
    background-size:500px;
    background-position: bottom -50px center;
    background-repeat:no-repeat;
    background-image: url('texture.png');
}
#background-texture {
    width:45%;
    height:100%;
    position:absolute;
    right:0;
    transition: all 1s;
    background: linear-gradient(90deg, rgba(62, 57, 50, 0.8) 0%, rgba(62, 57, 50, 0.9) 10%, rgba(39, 34, 27, 1) 70%, rgba(36, 30, 23, 1) 90%);
}

#background-texture::after {
    content:"";
    height:100%;
    width:100%;
    position:absolute;
    background-size: 500px;
    background-position:bottom 20px right -160px;
    background-image: url('texture.png');
    background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
    #background-texture {
        width:100%;
        opacity:0.93;
    }
    #background {
        background-size:cover;
        background-position:0px;
    }

    #background::after {
        right:100%;
    }
    #background::before {
        content:none;
    }
}