body{
    background-color: #000000;
    font-family:sans-serif;
    color:white;
    overflow-x: hidden;
}

.home-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    width:100vw;
    height:auto;
    position:relative;
    margin-bottom:10vh;
}
.home-page-logo-area{
    position:relative;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    margin-bottom:10vh;
    animation: fade-out linear;
    animation-timeline: view();
}
@keyframes fade-out{
    60%{opacity: 1;}
    85%{opacity: 0;}
}
.home-page-logo-area img{
    width: 80vw;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.76));

}
.home-page-logo-area:hover img {
    filter: drop-shadow(0 0 1rem rgb(255, 255, 255, 0.9));
}

.bedbug-animation{
    width: 4vw;
    height: 4vw;
    position: absolute;
    top: 40vh;
    left: 15vh;
    z-index: 999;
    offset-path: path("M 0 0 C 45 -237 223 -331 415 -228 C 555 -171 769 -11 860 -95 C 1067 -288 1331 -238 1404 11 C 1440 320 955 751 721 369 C 358 237 -97 607 0 0");
    animation: move 15000ms infinite normal linear;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bedbug-animation img{
    width: 100%;
    height: 100%;
    transform:rotate(90deg);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.home-page-logo-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    -webkit-mask-image: 
        radial-gradient(
            ellipse at 80% 50%,
            transparent 0%,
            transparent 40%,
            black 60%
        );
    mask-image: 
        radial-gradient(
            ellipse at 80% 50%,
            transparent 0%,
            transparent 40%,
            black 60%
        );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: slowDim 1.25s ease-in-out forwards;
}
.home-page-logo-area:hover::after {
    background: rgba(0, 0, 0, 0.5); 
}
.extra-mask::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: radial-gradient(
                ellipse at 1000% 50%,
                rgba(255, 255, 255, 0.61),
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                rgba(255, 255, 255, 0.2) 75%
                );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: slowDim 1.25s ease-in-out forwards;
}
@keyframes slowDim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.home-page-logo-area::before {
    content: '';
    position: absolute;
    top: 30%;
    right: -4%;
    width: 70%;
    height: 30%;
    background: radial-gradient(
        ellipse at center,
        rgba(247, 18, 18, 0.699) 0%,
        rgba(214, 9, 9, 0.459) 20%,
        rgba(255, 0, 0, 0.068) 50%,
        rgba(255, 0, 0, 0)70%,
        rgba(255, 0, 0, 0)100%
    );
    pointer-events: none;
    z-index: 2;
    transform: rotate(-35deg);
    animation: flicker 6s infinite ease-in-out;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }
    2% {
        opacity: 0.95;
    }
    4% {
        opacity: 0.98;
    }
    8% {
        opacity: 0.92;
    }
    70% {
        opacity: 1;
    }
    72% {
        opacity: 0.85;
    }
    74% {
        opacity: 0.97;
    }
    76% {
        opacity: 0.88;
    }
    78% {
        opacity: 1;
    }
}
.extra-mask{
    width:100%;
    height:100%;
    position:relative;
}
.intro{
    display:flex;
    align-items: center;
    position:relative;
    width:100vw;
    height:80vh;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.05)
    );
}
.intro-description{
    font-size:3vw;
    width:45%;
    font-weight:600;
    margin-left:auto;
    padding-right:10%;
    text-shadow: 3px 3px #747474;
}
#img1{
    filter: drop-shadow(0 0 1rem rgba(255, 0, 0, 0.76));
    position:absolute;
    top:0;
    left:0;
    z-index: 1;
    width:60%;
}
#blood{
    width:40%;
    height:auto;
    position:absolute;
    top:42%;
    margin:0 auto;
    left:-5%;
}
.character-01{
    position:absolute;
    width:40%;
    height:40%;
    max-height: 25vh;
    max-width:25vh;
    top:0%;
    right:55%;
    z-index:4;
}
#think1{
    position:absolute;
    width:auto;
    height:auto;
    max-height: 100%;
    max-width:100%;
    bottom:10%;
    right:10%;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
#think2{
    position:absolute;
    width:auto;
    height:auto;
    max-height: 100%;
    max-width:100%;
    bottom:10%;
    right:10%;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
#think2-speech{
    position:absolute;
    font-size:100%;
    color:white;
    right:-10%;
    opacity:0;
    font-family: "Comic Sans MS";
}
.character-01:hover #think1 {
  opacity: 0;
}

.character-01:hover #think2{
  opacity: 1;
}
.character-01:hover #think2-speech{
  opacity: 1;
}
.problem-title{
    width:100vw;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    position:relative;
    top:0;
    flex-direction: column;
}
.problem-title-text{
    font-size: 18vw;
    font-weight:600;
    background-image: url("https://static.igem.wiki/teams/5703/home/bedbug-infestation.webp");
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    
}
.problem-title-description{
    font-size:2vw;
    font-weight:600;
    background-image: url("https://static.igem.wiki/teams/5703/home/bedbug-infestation.webp");
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    text-shadow: 0 0 2rem#ffffff;
}
.illustrate-severeity{
    display:flex;
    flex-direction:row;
    position:relative;
    width:100vw;
    height:auto;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.05)
    );
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
}
.bedbug-giant{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
}
.bedbug-giant-desc-container{
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content: space-evenly;
    align-items:center;
    margin-top:auto;
    padding-bottom:10%;
}
.illustrate-severeity-description {
    font-size: 2.5vw;
    width: 30%;
    text-align: right;
    z-index:2;
    position:relative;
}
.keyword {
    font-weight: 600;
    color: red;
    margin: 0 1vw;
    display: inline-block;
}

.illustrate-severeity-description .part1,
.illustrate-severeity-description .keyword,
.illustrate-severeity-description .part3 {
    opacity: 0;
    transform: translateY(-30px);
    display: inline-block;
}

.illustrate-severeity-description .part1.visible {
    animation: slideDown 0.4s ease-out 0.25s forwards;
}

.illustrate-severeity-description .keyword.visible {
    animation: slideDown 0.4s ease-out 0.75s forwards;
}

.illustrate-severeity-description .part3.visible {
    animation: slideDown 0.4s ease-out 1.5s forwards;
}
@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.row-wrapper-1{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:center;
    width:100%;
}
.row-wrapper-wrapper{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position:relative;
}
.row-wrapper-4{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:center;
}
@keyframes plantBounce {
    0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(10px);
        opacity: 1;
    }
    80% {
        transform: scale(0.95) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes turnRed {
    0% {
        fill: #797979;
    }
    100% {
        fill: rgb(197, 49, 49);
    }
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.human-figure {
    position: relative;
    display: inline-block;
    z-index:2;
}

.human-figure .human {
    height: 20vh;
    width: auto;
    opacity: 0;
    fill: #969696;
    position: relative;
    z-index: 3;
}

.human-figure .human.visible {
    animation: plantBounce 1s ease-out forwards;
}

#human1 .human.visible,
#human2 .human.visible,
#human3 .human.visible,
#human4 .human.visible,
#human5 .human.visible,
#human6 .human.visible,
#human7 .human.visible {
    animation: 
        plantBounce 1s ease-out forwards,
        turnRed 0.6s ease-out 1.2s forwards;
}

#human2 .human.visible { animation-delay: 0.1s, 1.2s; }
#human3 .human.visible { animation-delay: 0.2s, 1.2s; }
#human4 .human.visible { animation-delay: 0.3s, 1.2s; }
#human5 .human.visible { animation-delay: 0.4s, 1.2s; }
#human7 .human.visible { animation-delay: 0.1s, 1.2s; }
#human8 .human.visible { animation-delay: 0.2s; }
#human9 .human.visible { animation-delay: 0.3s; }
#human10 .human.visible { animation-delay: 0.4s; }

.bed-bug {
    position: absolute;
    top: 20%;
    left: 50%;
    height: 10vh;
    width: auto;
    opacity: 0;
    z-index: 2;
    fill: #ac7038;
}

.bed-bug.visible {
    animation: plantBounce 1s ease-out 1.4s forwards;
}
.illustrate-severeity2{
    display:flex;
    flex-direction: column;
    width:100vw;
    height:100vh;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.877);
    background-color: white;
    color:black;
    font-size:2vw;
    text-align: left;
    padding:4vw;
    font-weight: 600;
}
.right-container{
    display:flex;
    position:relative;
    margin-left:auto;
    width:50%;
    height:100%;
    overflow:hidden;
    justify-content: center;
    align-items: center;
}
.left-container{
    display:flex;
    position:relative;
    margin-right:auto;
    width:50%;
    height:100%;
    overflow:hidden;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.row-wrapper-2{
    display:flex;
    flex-direction: row;
    width:100%;
    height:80vh;
    position:relative;
}
.figure1{
    display: flex;
    flex-direction:column;
    color:rgb(168, 168, 168);
    font-weight:500;
    font-size:1.3vw;
    padding:3.8vw;
}
.figure-details{
    display: flex;
    flex-direction:row;
    position:relative;
    overflow: hidden;
}
.figure-details.visible{
    transition: all 0.5s ease-out;
    transition-delay: 0.3s;
}
.figure-details::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0%;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, #c4c4c4 0%, #adadad 100%);
    transition: width 0.6s ease-out;
}
.figure-details.visible::before{
    width:100%
}
.number{
    font-size:4.5vw;
    color:rgb(173, 20, 20);
    height:auto;
    opacity: 0;
    transform: translateY(-10vh);
}
.percentage{
    color:rgb(136, 16, 16);
    padding-top:1.3vw;
    font-weight:600;
    opacity: 0;
    transform: translateY(-10vh);
}
.figure-description{
    color:black;
    width:40%;
    margin: 0 auto;
    padding-top:1.3vw;
    font-size:1vw;
    font-weight: 400;
    opacity: 0;
    transform: translateY(-10vh);
}
.number.visible, .percentage.visible, .figure-description.visible{
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-out;
    transition-delay: 0.3s;
}
.illustrate-severeity3{
    display:flex;
    flex-direction: column;
    width:100vw;
    height:100vh;
    position:relative;
    overflow:hidden;
}
.illustrate-severeity3-title{
    text-align: left;
    text-shadow: 5px 5px #33618d;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.illustrate-severeity2-title{
    text-shadow: 5px 5px #d6d6d6;
}
.illustrate-severeity3 img{
    width:100%;
    height:auto;
    margin-top: auto;
}
.bedbug-map{
    position:relative;
    height:auto;
    width:100%;
}
.bedbug-speech{
    position:absolute;
    right:15%;
    top:15%;
    font-size: 1.7rem;
    font-family: "comic sans ms";
}
.country1{
    position:absolute;
    top:13%;
    left:6%;
    color:rgb(172, 218, 255);
    text-shadow: 2px 2px #dff0ff;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.country2{
    position:absolute;
    top:20%;
    left:26%;
    color:rgb(172, 218, 255);
    text-shadow: 2px 2px #dff0ff;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.country3{
    position:absolute;
    top:38%;
    left:36%;
    color:rgb(172, 218, 255);
    text-shadow: 2px 2px #dff0ff;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.country4{
    position:absolute;
    top:56%;
    left:40%;
    color:rgb(172, 218, 255);
    text-shadow: 2px 2px #dff0ff;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.country5{
    position:absolute;
    top:76%;
    left:42%;
    color:rgb(172, 218, 255);
    text-shadow: 2px 2px #dff0ff;
    font-size:2vw;
    padding:4vw;
    font-weight: 600;
}
.bedbug6 img{
    position:absolute;
    height:80%;
    width:auto;
    right:10%;
    bottom:0;
}
.illustrate-severeity4{
    display:flex;
    position:relative;
    height:100vh;
    width:100vw;
    background: linear-gradient(to bottom, black 50%, rgba(250,250,250) 50%);
}
.tapes {
    display: flex;
    position: absolute;
    transform: rotate(-10deg);
    left: -10%;
    top:24%;
    width: 100%;
}
.tapes::-webkit-scrollbar{
    display:none;
}
.group-tape{
    display:flex;
    align-items: center;
    justify-content: center;
    animation:spin 32s linear infinite;
}
.card{
    width:35%;
    height:auto;
}
@keyframes spin{
    from{translate: 0;}
    to{translate:-100%}
}
.illustrate-severeity4-text1{
    position:absolute;
    top:5%;
    left:5%;
    font-size: 2.5vw;
    color:white;
    text-shadow: 5px 5px #505050;
    width:50%;
    text-align:left;
}
.illustrate-severeity4-text2{
    position:absolute;
    bottom:5%;
    right:5%;
    font-size:2.5vw;
    color:black;
    text-shadow: 5px 5px #d4d4d4;
    width:50%;
    text-align: right;
}
.illustrate-severeity5 {
    display: flex;
    position: relative;
    width: 100vw;
    aspect-ratio: 169/100;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.05));
    overflow: hidden;
    flex-direction:column;
    background:white;
}
.illustrate-severeity5-text{
    position:absolute;
    top:5%;
    left:5%;
    font-size: 2vw;
    color:rgb(0, 0, 0);
    text-shadow: 5px 5px #e4e4e4;
    width:50%;
    text-align:left;
    z-index:6;
}
.illustrate-severeity5-img-container{
    width:30%;
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
}
.illustrate-severeity5-img-container img{
    width:100%;
    height:auto;
    object-fit: cover;
    z-index:2;
}
[name="bag"]{
    margin-left:3vw;
}
[name="bag"] img{
    width:80%;
    height:auto;
}
[name="bag"]::before{
    content: "";
    width:90%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: rgb(231, 231, 231);
    position:absolute;
    right:5;
    top:18%;
}
@keyframes walk-in-left {
    from {
        opacity: 0;
        transform: scale(0.5) translateX(-5vw) rotate(65deg);
    }
    to {
        opacity: 1;
        transform: scale(0.6) translateX(0) rotate(65deg);
    }
}

@keyframes walk-in-right {
    from {
        opacity: 0;
        transform: scale(0.5) translateX(5vw) rotate(-130deg);
    }
    to {
        opacity: 1;
        transform: scale(0.6) translateX(0) rotate(-130deg);
    }
}

.bedbug-left {
    position: absolute;
    width: 30% !important;
    z-index: 3 !important;
    left: 20%;
    bottom: 20%;
    opacity: 0;
    transform: scale(0.5) translateX(-20vw) rotate(65deg);
}

.bedbug-left.visible {
    animation: walk-in-left 0.8s linear forwards;
}

.bedbug-right {
    position: absolute;
    width: 30% !important;
    z-index: 3 !important;
    right: 0;
    top: 20%;
    opacity: 0;
    transform: scale(0.5) translateX(20vw) rotate(-130deg);
}

.bedbug-right.visible {
    animation: walk-in-right 0.8s linear forwards;
}
.illustrate-severeity6{
    display:flex;
    position:relative;
    height:100vh;
    width:100vw;
    overflow:hidden;
    background: white;
}
.illustrate-severeity6-text1{
    position:absolute;
    top:5%;
    left:5%;
    font-size: 2vw;
    color:black;
    text-shadow: 1px 1px #d4d4d4;
    width:50%;
    text-align:left;
    z-index:3;
}
.illustrate-severeity6-text2{
    position:absolute;
    bottom:5%;
    right:5%;
    font-size:2vw;
    color:black;
    text-shadow: 1px 1px #d4d4d4;
    width:50%;
    text-align: right;
}
.building img{
    height:60%;
}
@keyframes fall {
    from {
        top: 20%;
        left: 16%;
        transform: scale(0.5) rotate(0deg);
        opacity: 0.5;
    }
    to {
        top: 60%;
        left: 20%;
        transform: scale(1) rotate(-20deg);
        opacity: 1;
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(5vw) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.bun img {
    position: absolute;
    top: 20%;
    left: 18%;
    width: 10vw;
    height: auto;
    z-index: 3;
    transform: scale(0.5) rotate(0deg);
    opacity: 0.5;
}

.bun img.visible {
    animation: fall 0.9s ease-out forwards;
}

.bedbug-on-bun {
    width: 6vw !important;
    height: auto;
    transform: rotate(-20deg);
    z-index: 4 !important;
}

.arrow1 img {
    width: 8vw;
    height: auto;
    z-index: 3;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    margin-right:7vw;
}

.arrow1 img.visible {
    animation: fade-in-left 1s linear 0.5s forwards;
}

.arrow2 img {
    width: 8vw;
    height: auto;
    z-index: 3;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    margin-left:7vw;
}

.arrow2 img.visible {
    animation: fade-in-left 1s linear 1.3s forwards;
}

.bedbug-group {
    height: 15vw!important;
    position: relative;
}

@keyframes scatter-a {
    from {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.5;
    }
    to {
        top: 0;
        left: 0;
        transform: rotate(-60deg);
        opacity: 1;
    }
}

@keyframes scatter-b {
    from {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.5;
    }
    to {
        top: 10%;
        right: 0;
        left: auto;
        transform: rotate(-90deg);
        opacity: 1;
    }
}

@keyframes scatter-c {
    from {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.5;
    }
    to {
        bottom: 0;
        right: 30%;
        left: auto;
        transform: rotate(-120deg);
        opacity: 1;
    }
}

.bedbug-a {
    position: absolute;
    width: 6vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
    opacity: 0.5;
}

.bedbug-a.visible {
    animation: scatter-a 1s linear 0.6s forwards;
}

.bedbug-b {
    position: absolute;
    width: 6vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
    opacity: 0.5;
}

.bedbug-b.visible {
    animation: scatter-b 1s linear 0.9s forwards;
}

.bedbug-c {
    position: absolute;
    width: 6vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
    opacity: 0.5;
}

.bedbug-c.visible {
    animation: scatter-c 1s linear 0.2s forwards;
}
.bedbug-swarm img{
    top: -5%;
    right: -3%;
    height: auto;
    width: 45%;
    opacity: 0;
    transform: translateX(5vw) scale(0.9);
    position:absolute;
}

.bedbug-swarm.visible img {
    animation: fade-in-right 1s linear 1.8s forwards;
}
.row-wrapper-3{
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    position:relative;
    gap:1vw;
    align-items:center;
    padding: 0 5vw;
    width:100%;
    height:90vh;
}
.illustrate-severeity7{
    display:flex;
    position:relative;
    height:120vh;
    width:100vw;
    background: white;
    flex-direction: column;
    padding-top:20vh;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.877);
}
.illustrate-severeity7-text{
    font-size:2vw;
    color:#353535;
    font-weight: 600;
}
.bedbug-steamer{
    font-size:2vw;
    color:#7dd443;
    font-weight: 500;
}
.bedbug-pesticide{
    font-size:2vw;
    color:#ffe606;
    font-weight: 500;
}
.bedbug-items img{
    width:14vw;
    height:auto
}
.bedbug-hide{
    width:30vw;
    height:auto;
    margin-left:auto;
}
.outro{
    display:flex;
    flex-direction:column;
    width: 100vw;
    height:100vh;
    justify-content: center;
    align-items: center;
    position:relative;
}
.outro-title{
    display:flex;
    font-size:2.4vw;
    color:#000000;
    font-weight: 600;
    text-shadow: 0 0 1rem #fff;
    position:absolute;
    top:5%;
    
}
.black-bedbug img{
    width:60vw;
    height:auto;
    filter: drop-shadow(0 0 3rem rgba(255, 255, 255, 0.76));
}
.black-bedbug:hover img{
    filter: drop-shadow(0 0 3rem rgb(255, 255, 255));
}
.outro-ref{
    display:flex;
    font-size:1.3vw;
    color:#ffffff;
    font-weight: 600;
    position:absolute;
    bottom:15%;
}
.outro-ref a{
    margin:0 1rem;
    font-style:italic;
    color:white;
    cursor: pointer;
    text-decoration: none;
}
.game{
    width:100vw;
    height:60vh;
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}
.game-iframe{
    display:flex;
    width:100%;
    height:100%;
}
.room{
    position:absolute;
    width:100%;
    height:auto;
    bottom:0;
}
#running{
    position:absolute;
    width:auto;
    height:auto;
    max-height:40vh;
    max-width: 40vh;
    bottom:10%;
    left:20%;
}
.character-02{
    position:absolute;
    width:40%;
    height:40%;
    bottom:1%;
    left:10%;
    z-index:4;
}
#running-speech{
    position:absolute;
    top:10%;
    right:0;
    opacity: 0;
    font-size:1.7rem;
    font-family: "comic sans ms";
    color:white;
}
.character-02:hover #running-speech{
    opacity:1;
}
#travelled-bedbug{
    position:absolute;
    width:auto;
    height:auto;
    max-height:10vh;
    max-width: 10vh;
    bottom:10%;
    left:20%;
}
.character-03{
    position:absolute;
    width:10%;
    height:10%;
    bottom:42%;
    left:23%;
    z-index:4;
}
#travel-speech{
    position:absolute;
    top:-10%;
    right:0;
    opacity: 0;
    font-size:1.7rem;
    font-family: "comic sans ms";
    color:rgb(0, 0, 0);
}
.character-03:hover #travel-speech{
    opacity:1;
}