@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

* {
    margin: 0;
    padding: 0;
}

p {
    font-family: 'Fira Code', sans-serif;
    font-size: 4vmin;
    font-weight: bold;
    text-align: center;
    color: #00000074;
}

/* Overall container styles */
.canvas {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%2388b0df' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Only Floor styles - includes the grid but not the CSS art*/
.floor-container {
    position: relative;
    height: 100vh;
    width: 40vw;
    display: flex;
    flex-direction: column;
}

#heading1 {
    position: absolute;
    top: 20vmin;
    left: 20vmin;
}

#heading2 {
    position: absolute;
    top: 68vmin;
    left: 20vmin;
}

.highlight {
    color: #255186bf;
    font-size: 5vmin;
}

.walk-in-grid,
.walk-out-grid {
    height: 50vh;
    width: 40vw;
    display: flex;
    flex-wrap: wrap;
    font-size: 40px;
    overflow: hidden;
}

.walk-in-grid-item {
    height: 10vmin;
    width: 12vmin;
    opacity: 0;
    transition: opacity 2s ease 0.4s, transform 0.8s ease;
    transform: scale(1);
}

.walk-in-grid-item:hover {
    opacity: 1;
    transition: opacity 0.2s ease;
    transform: scale(1.04) rotate(10deg);
}

.walk-out-grid-item {
    height: 10vmin;
    width: 12vmin;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 2s ease 0.4s, transform 0.8s ease;
    transform: rotateY(180deg);
}

.walk-out-grid-item:hover {
    opacity: 1;
    transition: opacity 0.2s ease;
    transform: scale(1.04) rotateY(180deg) rotate(10deg);
}

/* Only workspace styles - main CSS Art is here */
.workspace-container {
    position: relative;
    height: 100vh;
    width: 60vw;
    top: 0;
    display: flex;
    flex-direction: row;
}

/* Chair and other items styles starts here*/
.not-desk-container {
    position: relative;
    height: 100vh;
    width: 40vw;
}

/* Styling for potted plant*/
.potted-plant {
    height: 30vmin;
    width: 40vmin;
}

.plant {
    position: relative;
    top: 8vmin;
    left: 10vmin;
    width: 20vmin;
    height: 20vmin;
    background: #b86433;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.soil {
    width: 16vmin;
    height: 16vmin;
    background: #3a2e2b;
    border-radius: 50%;
    position: relative;
    overflow: visible;
}

.leaf {
    position: absolute;
    top: -4vmin;
    left: 6vmin;
    width: 4vmin;
    height: 12vmin;
    background: linear-gradient(0deg, rgba(58, 46, 43, 1) 0%, rgba(39, 105, 53, 1) 36%, rgba(32, 201, 41, 1) 100%);
    border-radius: 50% 50% 50% 50%;
    transform-origin: bottom center;
    transition: transform 0.3s ease;
}

.l1 {
    --angle: 0deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.l2 {
    --angle: 60deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.l3 {
    --angle: 120deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.l4 {
    --angle: 180deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.l5 {
    --angle: 240deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.l6 {
    --angle: 300deg;
    transform: rotate(var(--angle)) translateY(-1vmin);
}

.plant:hover .leaf {
    animation: wiggle 0.8s ease-in-out;
}

.l2 {
    animation-delay: 0.05s;
}

.l3 {
    animation-delay: 0.1s;
}

.l4 {
    animation-delay: 0.15s;
}

.l5 {
    animation-delay: 0.2s;
}

.l6 {
    animation-delay: 0.25s;
}

@keyframes wiggle {
    0% {
        transform: rotate(var(--angle)) translateY(-1vmin) rotate(0deg);
    }

    25% {
        transform: rotate(var(--angle)) translateY(-1vmin) rotate(-5deg);
    }

    50% {
        transform: rotate(var(--angle)) translateY(-1vmin) rotate(5deg);
    }

    75% {
        transform: rotate(var(--angle)) translateY(-1vmin) rotate(-3deg);
    }

    100% {
        transform: rotate(var(--angle)) translateY(-1vmin) rotate(0deg);
    }
}

/* Styling for office chair */
.chair-container {
    position: relative;
    height: 40vmin;
    width: 40vmin;
}

.chair-container:hover {
    transition: transform 0.8s ease;
    transform: scale(0.9);
}

.back {
    position: absolute;
    left: 5vmin;
    top: 8vmin;
    height: 18vmin;
    width: 0;
    border-left: 10vmin solid #4b3f36;
    border-bottom: 3vmin solid transparent;
    border-top: 3vmin solid transparent;
    border-radius: 6vmin;
}

.armrest1 {
    position: absolute;
    background: #1e1e1e;
    left: 18vmin;
    top: 6vmin;
    height: 4vmin;
    width: 14vmin;
    border-radius: 1vmin;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.armrest2 {
    position: absolute;
    background: #1e1e1e;
    left: 18vmin;
    top: 30vmin;
    height: 4vmin;
    width: 14vmin;
    border-radius: 1vmin;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.cushion {
    position: absolute;
    background: #3a2e2b;
    height: 18vmin;
    width: 18vmin;
    left: 16vmin;
    top: 11vmin;
    border-radius: 2vmin;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

/* Desk item styles */
.desk-container {
    position: absolute;
    left: 40vmin;
    width: 50vmin;
    height: 100vmin;
}

/* Styling for desk */
.desk {
    position: absolute;
    background: repeating-linear-gradient(90deg,
            #6f5c44,
            #6c5942 20px,
            #56442b 21px,
            #7f694e 40px);
    top: 10vmin;
    left: 2vmin;
    height: 80vmin;
    width: 70vmin;
    border-radius: 2vmin;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/* Styling for cup */
.cup {
    position: absolute;
    top: 5vmin;
    left: 18vmin;
    width: 13vmin;
    height: 13vmin;
    z-index: 1;
}

.cup-handle {
    position: absolute;
    background: #e3e3e3;
    top: 1vmin;
    height: 2vmin;
    width: 4vmin;
    border-radius: 1vmin;
    transform: rotate(40deg);
}

.cup-outer {
    position: absolute;
    background: #e3e3e3;
    top: 1vmin;
    left: 2vmin;
    height: 10vmin;
    width: 10vmin;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.cup-inner {
    position: absolute;
    background: #6F4E37;
    top: 2vmin;
    left: 3vmin;
    height: 8vmin;
    width: 8vmin;
    border-radius: 50%;
    box-shadow: inset 0vmin 1vmin 2vmin 0.5vmin rgba(0, 0, 0, 0.4);
}

@keyframes wobble {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    15% {
        transform: translateX(-5px) rotate(-10deg);
    }

    30% {
        transform: translateX(5px) rotate(10deg);
    }

    45% {
        transform: translateX(-4px) rotate(-5deg);
    }

    60% {
        transform: translateX(4px) rotate(5deg);
    }

    75% {
        transform: translateX(-2px) rotate(-5deg);
    }

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

.cup:hover {
    animation: wobble 0.6s ease;
}

/* Styling for laptop */
.laptop-keyboard {
    position: absolute;
    background: #e3e3e3;
    top: 28vmin;
    left: 4vmin;
    height: 22vmin;
    width: 18vmin;
    border-radius: 2vmin 0 0 2vmin;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.keyboard-area {
    position: absolute;
    top: 1vmin;
    left: 8vmin;
    width: 46%;
    height: 20vmin;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0.5vmin;
    padding: 0 1vmin;
}

/* Individual keys */
.keyboard-area div {
    background: #cbcbcb;
    border-radius: 0.5vmin;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.1s ease, background 0.2s ease;
}

.keyboard-area div:hover {
    background: #a9a9a9;
    transform: scale(0.96);
}

/* Trackpad */
.trackpad {
    position: absolute;
    width: 30%;
    height: 8vmin;
    top: 7vmin;
    left: 2vmin;
    background: #b6b6b6;
    border-radius: 6px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease;
}

.trackpad:hover {
    background: #979797;
}

.laptop-outer-screen {
    position: absolute;
    left: 23vmin;
    top: 26vmin;
    height: 22vmin;
    width: 0;
    border-right: 6vmin solid #e3e3e3;
    border-bottom: 2vmin solid transparent;
    border-top: 2vmin solid transparent;
    border-radius: 0 1vmin 1vmin 0;
}

.laptop-inner-screen {
    position: absolute;
    left: 1vmin;
    top: -0.5vmin;
    height: 20vmin;
    width: 0;
    border-right: 4vmin solid #615e8b9f;
    border-bottom: 1.5vmin solid transparent;
    border-top: 1.5vmin solid transparent;
    border-radius: 0 1vmin 1vmin 0;
    transition: border-right-color 0.6s ease;
}

.laptop-inner-screen:hover {
    border-right-color: #535170;
}

/* Styling for mouse */
.mouse {
    position: absolute;
    background: #393939;
    left: 10vmin;
    top: 56vmin;
    height: 6.5vmin;
    width: 10vmin;
    border-radius: 3vmin 2vmin 2vmin 3vmin;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    transform: rotate(-5deg);
}

.scroll-wheel {
    position: absolute;
    background: #4c4c4c;
    height: 1.5vmin;
    width: 3.5vmin;
    right: 0.5vmin;
    top: 2.5vmin;
    border-radius: 1vmin;
}

/* Styling for phone */
.phone {
    position: absolute;
    top: 60vmin;
    left: 28vmin;
    height: 12vmin;
    width: 6vmin;
    border-radius: 1vmin;
    transform: rotate(30deg);
    background: linear-gradient(145deg, #1f2937, #374151);
    padding: 1vmin;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.screen {
    position: absolute;
    border-radius: 0.5vmin;
    top: 1vmin;
    width: 6vmin;
    height: 12vmin;
    background: #151d31;
    overflow: hidden;
    transition: background-color 0.6s ease;
}

/* Trigger shine on hover */
.screen:hover {
    background-color: #526080;
}

/* Styling for lamp */
.lamp {
    position: relative;
    left: 35vmin;
    top: 3vmin;
    height: 35vmin;
    width: 32vmin;
}

.lamp-base {
    position: absolute;
    background: radial-gradient(circle, #4b5563 60%, #374151 100%);
    box-shadow: inset 0 0 20px #1f2937;
    right: 1vmin;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
}

.rod {
    position: absolute;
    background: #1f2937;
    top: 2vmin;
    left: 18vmin;
    width: 2vmin;
    height: 24vmin;
    transform: rotate(40deg);
    border-radius: 3vmin;
    box-shadow: 10px 0px 20px 10px rgba(0, 0, 0, 0.238);
    z-index: 3;
}

.lamp-head {
    position: absolute;
    background: radial-gradient(circle, #4b5563 60%, #374151 100%);
    box-shadow: inset 0 0 20px #1f2937;
    top: 20vmin;
    left: 6.5vmin;
    width: 8vmin;
    height: 8vmin;
    border-radius: 50%;
    transition: box-shadow 0.4s ease;
    box-shadow: rgba(0, 0, 0, 0.877) 0px 22px 70px 4px;
    z-index: 2;
}

.lamp-head:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 30px 10px rgba(255, 255, 200, 0.5),
        0 0 60px 20px rgba(255, 255, 180, 0.3),
        0 0 120px 30px rgba(255, 255, 150, 0.2);
}

.lamp-hold {
    position: absolute;
    background: #1f2937;
    top: 2vmin;
    left: 2vmin;
    width: 4vmin;
    height: 4vmin;
    border-radius: 50%;
    z-index: 2;
}

/* Styling for sticky notes */
.sticky-note {
    position: absolute;
    height: 7vmin;
    width: 7vmin;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.s1 {
    background: #ffa3d2;
}

.s2 {
    background: #f2ff92;
}

.s3 {
    background: #93f370;
}

#near-cup-bottom-note {
    top: 10vmin;
    left: 8vmin;
    transform: rotate(5deg);
}

#near-cup-top-note {
    top: 16vmin;
    left: 12vmin;
    transform: rotate(25deg);
    z-index: 1;
}

#near-lamp-note {
    top: 8vmin;
    left: 40vmin;
    transform: rotate(8deg);
}

#near-mouse-note {
    top: 66vmin;
    left: 8vmin;
    transform: rotate(86deg);
}

#near-mouse-top-note {
    top: 70vmin;
    left: 14vmin;
    transform: rotate(30deg);
    z-index: 1;
}

#near-folder-bottom-note {
    top: 46vmin;
    left: 36vmin;
    transform: rotate(70deg);
}

/* Styling for folder with papers */
.folder-cover {
    position: absolute;
    background: linear-gradient(to bottom, #877961 50%, #786a51 50%);
    top: 18vmin;
    left: 36vmin;
    width: 28vmin;
    height: 30vmin;
    border-radius: 1vmin;
    transform: rotate(-5deg);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    z-index: 1;
}

.paper {
    position: absolute;
    background: #fff9ed;
    width: 24vmin;
    height: 12vmin;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.paper1 {
    top: 2vmin;
    left: 2vmin;
    transform: rotate(2deg);
}

.paper2 {
    background: #b4ad9b;
    top: 16vmin;
    left: 3vmin;
    transform: rotate(2deg);
}

.paper3 {
    top: 16vmin;
    left: 2vmin;
    transform: rotate(-2deg);
}

.paperclip {
    position: absolute;
    background: transparent;
    top: 25vmin;
    left: 24vmin;
    height: 1vmin;
    width: 3vmin;
    border: 3px solid #111827;
    border-radius: 1vmin;
    transform: rotate(5deg);
}

/* Styling for printer */
.printer {
    position: absolute;
    background: #363636;
    top: 54vmin;
    left: 42vmin;
    width: 20vmin;
    height: 24vmin;
    border-radius: 2vmin;
    box-shadow: -20px 8px 30px 10px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.tray {
    position: absolute;
    background: #2b2b2b;
    top: 4vmin;
    left: 20vmin;
    width: 5vmin;
    height: 16vmin;
    border-radius: 0 1vmin 1vmin 0;
    z-index: 1;
}

.print-paper {
    position: absolute;
    top: 6vmin;
    left: 20vmin;
    width: 6vmin;
    z-index: 2;
}

@keyframes outOfInk {
    0% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(5px);
    }

    30% {
        transform: translateY(-5px);
    }

    45% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(-5px);
    }

    75% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

.print-paper:hover {
    animation: outOfInk 0.6s ease-in-out;
}

.button1 {
    position: absolute;
    background: #cc2b2b;
    top: 2vmin;
    left: 2vmin;
    width: 1vmin;
    height: 1vmin;
    border-radius: 50%;
}

.button2 {
    position: absolute;
    background: #30cc2b;
    top: 2vmin;
    left: 4vmin;
    width: 1vmin;
    height: 1vmin;
    border-radius: 50%;
}

/* Styling for pop-up messages */
.message {
    display: inline-block;
}

.message .messagetext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;

    /* Position the message text */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.message:hover .messagetext {
    visibility: visible;
}

@media (max-width: 960px) {
    .floor-container {
        display: none;
    }
}