:root {
    --shadow-color: 0deg 0% 10%;
    --shadow:
    0.7px 0.8px 1.2px hsl(var(--shadow-color) / 0.34),
    4px 4.8px 7px -0.4px hsl(var(--shadow-color) / 0.34),
    7.5px 8.9px 13.1px -0.7px hsl(var(--shadow-color) / 0.34),
    12.3px 14.6px 21.5px -1.1px hsl(var(--shadow-color) / 0.34),
    19.6px 23.4px 34.3px -1.4px hsl(var(--shadow-color) / 0.34),
    30.6px 36.5px 53.6px -1.8px hsl(var(--shadow-color) / 0.34),
    46.5px 55.5px 81.5px -2.1px hsl(var(--shadow-color) / 0.34),
    68.5px 81.8px 120px -2.5px hsl(var(--shadow-color) / 0.34);
}
#canvas-wrapper {
    background-color: #3D3D3D;
    border-bottom: 3px solid black;
    width: 100vw;
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
    scroll-behavior: smooth;
    user-select: none;
    margin-bottom: 75px;
}
#canvas-scaler {
    zoom: 0.7;
    width: max-content;
    height: max-content;
  }
#canvas {
    padding: 80px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 80px;
    min-width: fit-content;
}
#canvas .device {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#canvas .device .label {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#canvas .device .label .device-type {
    color: #FFF;
    font-weight: 500;
}
#canvas .device .label .device-size {
    color: #AAA;
    font-size: 0.9em;
}
#canvas .device .frame {
    background-color: #111;
    box-shadow: var(--shadow);
    border: 15px solid #111;
    border-radius: 12.5px;
}
#canvas .device .screen {
    background-color: #FFF;
    border-radius: 5px;
    height: 100%;
    width: 100%;
}
#canvas .device .screen iframe {
    border-radius: 3px;
    height: 100%;
    width: 100%;
}
#canvas .phone .frame {
    height: 735px;
    width: 390px;
}
#canvas .tablet .frame {
    height: 1024px;
    width: 768px;
}
#canvas .laptop .frame {
    height: 1280px;
    width: 1920px;
}