body{
    background-image: url('/img/twinkling-stars.gif');
    background-repeat: repeat;
    background-size: 300px;
    overflow: hidden;
}
main{
    width:60vw;
    height: calc(80vh - 50px);
    margin: auto;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "bulletin portrait shelf"
    "desk desk shelf";
    gap: 6rem;
}
img{
    width: 100%;
}
#bulletin{
    display: block;
    animation: floating-1 5s ease-in-out infinite;
    grid-column: span 1;
    grid-area: bulletin;
}
#desk{
    display: block;
    grid-area: desk;
    animation: floating-2 6s ease-in-out infinite;
}
#shelf{
    transform: rotate(-3deg);
    height: 40vh;
    grid-area: shelf;
    animation: floating-3 4s ease-in-out infinite;
}
#selfPortrait{
    display: block;
    animation: floating-4 3s ease-in-out infinite;
    grid-area: portrait;
}
#chatHolder{
    height: calc(80% - 2rem);
    min-height: 300px;
    width: 300px;
    position: absolute;
    bottom: 0;
    right: -150px;
    margin: 1rem;
    transform: rotate(5deg);
    transform-origin: bottom;
    transition: all 1s ease;
}
#chatHolder:hover, #chatHolder:active{
    transform: translateX(-150px) rotate(0deg);
}
#chatHolder iframe{
    height: 100%;
    min-height: 300px;
    border: none;
}

@keyframes floating-1 {
    0% {
        transform: translateY(0) rotate(5deg);
    }
    50% {
        transform: translateY(-20px) rotate(3deg);
    }
    100% {
        transform: translateY(0) rotate(5deg);
    }
}
@keyframes floating-2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes floating-3 {
    0% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(-15px) rotate(-1deg);
    }
    100% {
        transform: translateY(0) rotate(-3deg);
    }
}
@keyframes floating-4 {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}
#bulletin:hover, #desk:hover, #shelf:hover, #selfPortrait:hover{
    animation-play-state: paused;
}
@media screen and (max-width: 900px){
    body{
        overflow-y: auto;
    }
    #chatHolder{
        right: -250px;
    }
    main{
        width: 60vw;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "bulletin"
        "portrait"
        "desk"
        "shelf"
        ;
    }
#chatHolder:hover, #chatHolder:active{
    transform: translateX(-150px) rotate(-2deg);
}

}