body {
  background-color: black;
  color: white;
  overflow: hidden;
}

.mainbody {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  height: max-content;
}

.image {
    height: 550px;
    background-color: aqua;
    position: relative;
    z-index: -1;
    justify-content: center;
}

#guy {
    justify-content: center;
    align-content: center;
}

#Atlas {
    width: fit-content;
    height: 550px;
    display: block;
  margin: auto;
}

#cercelee {
    width: fit-content;
    height: 550px;
    display: none;
  margin: auto;
}

.textshit {
  border: 3px solid green;
  padding: 10px;
  position: absolute;
  bottom: 40px;
  background-color: black;
  width: 45.8%;
    margin-left: 10px;
    margin-right: 10px;
}

.text {
    position:relative;
    line-height:2em;
    overflow:hidden;
    /* for demo purpose */
    width:fit-content;
    margin:0 auto;
    margin-bottom: 10px;
}

#choices {
    width: fit-content;
    height:fit-content;
    position: absolute;
    margin: auto;
    bottom: 90px;
    left: 50%;
    padding-top: 50%;
    display: none;
    
}

#scene6A {
    display:block;
    margin:auto;
    margin-bottom: 20px;
}

#scene6B {
    display:block;
    margin:auto;
    z-index: 99;
}

#scene2 {
    display: none;
}

#scene3 {
    display: none;
}

#scene4 {
    display: none;
}

#scene6A {
    display: none;
}

#scene6B {
    display: none;
}

#buttons {
    display: flexbox;
}

#but3 {
    display: none;
}

#but4 {
    display: none;
}

#but5 {
    display: none;
}

#but7 {
  display: none;
}

#fadingEffect {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
    height: 100%;
    background:black;
    animation: show 0s ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    
}

#fadingEffect2 {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
    background:black;
    animation: show 0s ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    display: none;
}

#fadingEffect3 {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
    background:black;
    animation: show 0s ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    display: none;
}

@keyframes show {
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:0%;}
}