/****************************
start background image
****************************/
.index-background {
    position: relative;
}

.index-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/banner_offline_1920_1080.jpg') no-repeat center center fixed;
    background-size: auto 100vh;
    opacity: 0.6;
    z-index: -1;
    background-position-y: 100px;
}

/* ensure content is visible above the overlay */
.container > *:not(.gradient-overlay) {
    position: relative;
    z-index: 1;
}

/****************************
body background image
****************************/
body {
    background-image: url('/images/willrivendell-bg-mid.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #e6e4f1;
  }  

/****************************
will waving character 
****************************/
.right-container-img {
    background: url('/images/will-wave-suit-cloud-65.gif') no-repeat;
    background-size: contain;
    position: absolute;
    margin-left: 1200px;
    margin-top: 100px;
    /* top: 50px; */
    background-position: right center;
    z-index: 0;
    /* width: 613px;
    height: 702px; */
    width: 500px;
    height: 600px;
    animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1900px) {
    .right-container-img {
        display: none;
    }
}

/* @media (min-width: 5100px) {
    .right-container-img {
        right: 1590px;
        width: 13%;
        height: 100vh;
        top: -110px;
    }
}

@media (min-width: 3800px) and (max-width: 3840px) {
    .right-container-img {
        right: 650px;
        width: 25%;
        height: 100vh;
        top: -330px;
    }
}

@media (min-width: 3000px) and (max-width: 3799px) {
    .right-container-img {
        right: 650px;
        width: 25%;
        height: 100vh;
        top: -330px;
    }
}

@media (min-width: 2500px) and (max-width: 2999px) {
    .right-container-img {
        right: 245px;
        width: 28%;
        height: 100vh;
        top: -96px;
    }
}

@media (min-width: 1901px) and (max-width: 2499px) {
    .right-container-img {
        right: 50px;
    }
}

@media (min-width: 1801px) and (max-width: 1900px) {
    .right-container-img {
        right: px;
    }
}

@media (min-width: 1751px) and (max-width: 1800px) {
    .right-container-img {
        right: -5px;
    }
}

@media (min-width: 1651px) and (max-width: 1750px) {
    .right-container-img {
        right: -10px;
    }
}

@media (min-width: 1600px) and (max-width: 1650px) {
    .right-container-img {
        right: -15px;
    }
}

/* MOBILE */
/* @media (max-width: 1599px) {
    .right-container-img {
        display: none;
    }
}

@media (max-height: 1080px) {
    .right-container-img {
        right: 340px;
        width: 18%;
        height: 100vh;
        top: -15px;
    }
}

@media (max-height: 800px) {
    .right-container-img {
        right: 340px;
        width: 18%;
        height: 100vh;
        top: 25px;
    }
}

@media (max-height: 700px) {
    .right-container-img {
        right: 360px;
        width: 14%;
        height: 100vh;
        top: 55px;
    }
}

@media (max-height: 650px) {
    .right-container-img {
        display: none;
    }
} */