@keyframes appearimage{
    from {opacity: 0}
    to{opacity: 1;}
}
@keyframes hideagain{
    from{opacity: 1}
    to{opacity: 0;}
}

*{

    padding: 0px;
    margin: 0px;
}

.wrapper{

    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;

    overflow-y: hidden;
    overflow-x:hidden;

    width: 100%;
    height: 100vh;

    display: grid;

    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.hideimage{
    opacity: 0%;
}

.hideagain{
    animation: hideagain 2s linear 1 forwards;
}

.appearimage{

    animation: appearimage 3s linear 1s forwards;
    z-index: auto;
}

#location{

    grid-area: 1/1/25/25;
    background-image: none;

    width: 100%;
    height:100%;

    object-fit: cover;

}

#location2{

    grid-area: 1/1/25/25;
    background-image: none;

    width: 100%;
    height:100%;

    object-fit: cover;

}

#noun1wrap{
  
    position: relative;

    grid-area: 3/4/25/10;
    

    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;

    z-index: 3;

}

#noun2wrap{
  
    position: relative;
    
    grid-area: 3/16/25/22;
   

    width: 100%;
    height:100%;
    padding:0px;
    margin: 0px;

    z-index: 3;


}

.noun1{
  
    position: absolute;

    width: 100%;
    height:100%;
    object-fit: contain;
}

.noun2{
  
    position: absolute;

    width:100%;
    height: 100%;
    object-fit: contain;

}

#image1{
  z-index:4;
}

#image2{
  z-index:4;
  }

#image3{
  z-index:5;
}

#image4{
  z-index: 5;
  }

iframe{
    grid-area: 4/10/10/16;
    width: 100%;
    height: 100%;

    z-index: 7;
}