:root{
    --main-bg-color: #DFD8CE;
    --main-color: #ab0e0e;
    --text-color: #242424;
    --border-r: 10px;
    --border-r-s: 5px;
    --futter-color: #E5E5E5;
}

body{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: var(--main-bg-color);
    color: var(--text-color);
    font-family: 'Muller', sans-serif;
}

body::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./images/main-bg.png) no-repeat;
    background-size: 100% auto;
    opacity: 1;
    z-index: -1;
}

body .content{
    width: 100%;
    margin: auto;
}

body .bodybox{
    z-index: 5;
}

.button{
    border: initial;
    color: #fff;
    border-radius: var(--border-r);
    background: linear-gradient(180deg, #FF7B7B 0%, #AB0E0E 100%);
    box-shadow: 0px 3px 8px rgba(255, 0, 0, 0.25);
    cursor: pointer;
    transition: .3s ease;
}

.center_box{
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
    width: 84%;
    height: 84%;
    margin: auto;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

.center_box .photo_box{
    width: 44%;
    transform: translate(6vw, 0);
}

.center_box .photo_box img{
    position: relative;
    width: 100%;
    height: auto;
}

@keyframes fade {
  0% { opacity: 0; }
  11.11% { opacity: 0; }
  33.33% { opacity: 1; }
  44.44% { opacity: 1; }
  55.55%{opacity:1; }
  66.66%{opacity:0; }
  100% { opacity: 0; }
}

.photo_box { position:relative; width:100%;}
.photo_box img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite; }
.photo_box img:nth-child(1) { animation-delay: 0s; }
.photo_box img:nth-child(2) { animation-delay: 6s; }

.Container{
    display: none;
}

.Container.visible{
    display: block;
}

@media (max-width: 800px){
    body .bodybox{
        padding: 0 4%;
    }

    :root{
        --border-r: 7px;
        --border-r-s: 3px;
    }

    body::after{
        height: 34%;
        background-size: auto 100%;
        background-position: center;
    }

    body::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 60px;
        top: calc(34% - 60px);
        left: 0;
        background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #DFD8CE 100%);
    }
}