/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1400,20,1.25,4,4,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--4: clamp(0.4823rem, 0.472rem + 0.0458vw, 0.512rem);
  --step--3: clamp(0.5787rem, 0.5575rem + 0.0943vw, 0.64rem);
  --step--2: clamp(0.6944rem, 0.6579rem + 0.1624vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7756rem + 0.2564vw, 1rem);
  --step-0: clamp(1rem, 0.9135rem + 0.3846vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0745rem + 0.5577vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2624rem + 0.7894vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4811rem + 1.0975vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.735rem + 1.5049vw, 3.0518rem);
  --step-6: clamp(2.986rem, 2.369rem + 2.7421vw, 4.7684rem);
  --step-7: clamp(3.5832rem, 2.7603rem + 3.6574vw, 5.9605rem);
  --step-8: clamp(4.2998rem, 3.2092rem + 4.8473vw, 7.4506rem);
  --step-9: clamp(5.1598rem, 3.722rem + 6.3899vw, 9.3132rem);
  --step-10: clamp(6.1917rem, 4.3053rem + 8.3843vw, 11.6415rem);
    
  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1440,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-3xl&g=s,l,xl,12 */
  --space-s-3xl: clamp(1.125rem, -1rem + 9.4444vw, 7.5rem);


}

* {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: #000000;
    background: #000000;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(30, 6, 97, 1) 100%, rgba(0, 0, 0, 1) 100%);
    background-size: cover;
}

body {
    color: #fff;
}

header {
    position: relative;
    justify-self: center;
    background-color: rgba(160, 0, 240, 0.05);
    width: 100%;
    text-align: center;
    padding: 1em;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(160, 0, 240),
        transparent
    );
    background-size: 200% 100%;
    animation: header-line-shine 2.5s linear infinite;
}

@keyframes header-line-shine {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

header h1 {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--step-6);
}

.camera-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 450px, 100%), 1fr));
    gap: 1em;
    padding: 1em;
    width: min(100% - 1em, 1600px);
    margin-inline: auto;
}

.camera-wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    border-radius: 20px;
    margin-top: -1em;
}

.camera-wrapper .title {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    justify-self: center;
    font-size: var(--step-1);
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    text-align: left;
    padding: 0.2em 1em 1em;
    border-radius: 1em 1em 0 0;
}

.camera-wrapper .camera-card {
    transition: transform 0.1s ease-in-out, border 0.4s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 1em;
}

.camera-wrapper .camera-card:hover {
    transform: rotate(0.3deg) scale(1.02);
    border: 2px solid rgb(51, 25, 100);
    
    box-shadow: 0 0 20px rgba(51, 25, 100, 0.9);
}