* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 10vw;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    perspective: 1000px;
}

.layout {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    border: 1px dashed gray;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    background-color: whitesmoke;
    cursor: grab;
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

a {
    text-decoration: none;
    color: black;
}

.room {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border: 1px dashed gray;
    border-radius: 1rem;
    min-height: 100px;
    transition: 1s;
}

.room:hover {
    transform: scale(1.03);
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-5px, 0) rotate(-2deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(5px, 0) rotate(2deg);
    }
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

.fall {
    animation: fall 1s cubic-bezier(0.5, 0.05, 0.8, 0.5) forwards;
}

.hard-link {
    transition: 1s;
}

.hard-link:hover {
    box-shadow: inset 0 0 100vw black;
    color: white;
}

::selection {
    color: darkgreen;
}