:root {
    --maxWidth: 888px;
    --screenWidth: calc(100vw - 32px);
}

/* Body */

body {
    font-family: -apple-system, sans-serif;
    margin: 0;
}

/* Background */

.background {
    background-color: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    .background {
        background-color: black;
        color: white;
    }
}

/* Top */

.top {
    position: relative;
}
.top::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('assets/art/flow-min.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    opacity: 0.5;
}

.topMain {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    align-content: stretch;
    padding: 16px;
    position: relative;
    max-width: var(--maxWidth);
    left: 50%;
    transform: translateX(-50%);
}

/* Code */

.codeMain {
    margin: 16px;
    position: absolute;
    width: calc(100vw - 64px);
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
}

/* Text */

.textMain {
    margin: 32px;
}

/* Cell */

.cellContainer {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
    .cellContainer {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.cellContent {
    padding: 16px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.cellImageContent {
    position: relative;
    border-radius: 16px;
    min-width: 256px;
    height: 100px;
    min-height: auto;
    display: block;
}

/* Title */

.title {
    font-weight: 600;
    font-size: 1.75em;
}

.subtitle {
    font-weight: 600;
    font-size: 1.2em;
    opacity: 0.5;
}

/* Logo */

.logo {
    position: relative;
    width: 128px;
    height: 128px;
    background-image: url('assets/flow-nodes-logo-light.png');
    background-size: cover;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(calc(-50% + 16px));
    margin: -16px;
}

@media (prefers-color-scheme: dark) {
    .logo {
        background-image: url('assets/flow-nodes-logo-dark.png');
    }
}

/* Screens */

.screens {
    width: var(--screenWidth);
    max-width: var(--maxWidth);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.screen {
    width: var(--screenWidth);
    max-width: var(--maxWidth);
    height: auto;
    background-image: url('assets/flow-nodes-logo-light.png');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1);
    margin-top: 16px;
    margin-bottom: 16px;
}

@media (prefers-color-scheme: dark) {
    .screen {
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.screen-1 {
    background-image: url('assets/images/flow-nodes-1-dark.heic');
    height: calc(var(--screenWidth) / (2752 / 693));
    max-height: calc(var(--maxWidth) / (2752 / 693));
}
.screen-2 {
    background-image: url('assets/images/flow-nodes-2-dark.heic');
    height: calc(var(--screenWidth) / (2752 / 890));
    max-height: calc(var(--maxWidth) / (2752 / 890));
}
.screen-3 {
    background-image: url('assets/images/flow-nodes-3-dark.heic');
    height: calc(var(--screenWidth) / (2752 / 1068));
    max-height: calc(var(--maxWidth) / (2752 / 1068));
}
.screen-4 {
    background-image: url('assets/images/flow-nodes-4-dark.heic');
    height: calc(var(--screenWidth) / (2752 / 928));
    max-height: calc(var(--maxWidth) / (2752 / 928));
}
.screen-5 {
    background-image: url('assets/images/flow-nodes-5-dark.heic');
    height: calc(var(--screenWidth) / (2752 / 577));
    max-height: calc(var(--maxWidth) / (2752 / 577));
}
.screen-6 {
    background-image: url('assets/images/flow-nodes-6-dark.heic');
    height: calc(var(--screenWidth) / (2258 / 1782));
    max-height: calc(var(--maxWidth) / (2258 / 1782));
}

@media (prefers-color-scheme: dark) {
    .screen-1 { background-image: url('assets/images/flow-nodes-1-dark.heic'); }
    .screen-2 { background-image: url('assets/images/flow-nodes-2-dark.heic'); }
    .screen-3 { background-image: url('assets/images/flow-nodes-3-dark.heic'); }
    .screen-4 { background-image: url('assets/images/flow-nodes-4-dark.heic'); }
    .screen-5 { background-image: url('assets/images/flow-nodes-5-dark.heic'); }
    .screen-6 { background-image: url('assets/images/flow-nodes-6-dark.heic'); }
}

/* Link */

.link {
    font-size: 1.05em;
}

.linkIcon {
    width: 96px;
    height: 96px;
    background-size: 96px 96px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + 16px));
    margin: -16px;
}


/* Keyword */

.keyword {
    font-size: 2em;
    font-weight: 800;
    opacity: 0.75;
}

.keywordIcon {
    width: 96px;
    height: 96px;
    background-size: 96px 96px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + 16px));
    margin: -16px;
}

/* Information */

.information {
    font-size: 1.25em;
    opacity: 0.5;
}

/* Icons */

.cameraIcon {
    background-image: url('assets/icons/camera_light.png');
}
.recordIcon {
    background-image: url('assets/icons/record_light.png');
}
.videoEditIcon {
    background-image: url('assets/icons/videoEdit_light.png');
}
.colorIcon {
    background-image: url('assets/icons/color_light.png');
}
.randomIcon {
    background-image: url('assets/icons/random_light.png');
}
.metadataIcon {
    background-image: url('assets/icons/metadata_light.png');
}
.scriptIcon {
    background-image: url('assets/icons/script_light.png');
}
.shaderIcon {
    background-image: url('assets/icons/shader_light.png');
}
.toggleIcon {
    background-image: url('assets/icons/toggle_light.png');
}
.blendIcon {
    background-image: url('assets/icons/blend_light.png');
}
.ndiTransmitIcon {
    background-image: url('assets/icons/ndiTransmit_light.png');
}
.midiTransmitIcon {
    background-image: url('assets/icons/midiTransmit_light.png');
}
.oscStateIcon {
    background-image: url('assets/icons/oscState_light.png');
}
.pixelParticlesIcon {
    background-image: url('assets/icons/pixelParticles_light.png');
}
.sampleIcon {
    background-image: url('assets/icons/sample_light.png');
}
.allSatisfyIcon {
    background-image: url('assets/icons/allSatisfy_light.png');
}
.intelligenceIcon {
    background-image: url('assets/icons/intelligence_light.png');
}
.cubeIcon {
    background-image: url('assets/icons/cube_light.png');
}
.calibrationIcon {
    background-image: url('assets/icons/calibration_light.png');
}

@media (prefers-color-scheme: dark) {
    .cameraIcon {
        background-image: url('assets/icons/camera_dark.png');
    }
    .recordIcon {
        background-image: url('assets/icons/record_dark.png');
    }
    .videoEditIcon {
        background-image: url('assets/icons/videoEdit_dark.png');
    }
    .colorIcon {
        background-image: url('assets/icons/color_dark.png');
    }
    .randomIcon {
        background-image: url('assets/icons/random_dark.png');
    }
    .metadataIcon {
        background-image: url('assets/icons/metadata_dark.png');
    }
    .scriptIcon {
        background-image: url('assets/icons/script_dark.png');
    }
    .shaderIcon {
        background-image: url('assets/icons/shader_dark.png');
    }
    .toggleIcon {
        background-image: url('assets/icons/toggle_dark.png');
    }
    .blendIcon {
        background-image: url('assets/icons/blend_dark.png');
    }
    .ndiTransmitIcon {
        background-image: url('assets/icons/ndiTransmit_dark.png');
    }
    .midiTransmitIcon {
        background-image: url('assets/icons/midiTransmit_dark.png');
    }
    .oscStateIcon {
        background-image: url('assets/icons/oscState_dark.png');
    }
    .pixelParticlesIcon {
        background-image: url('assets/icons/pixelParticles_dark.png');
    }
    .sampleIcon {
        background-image: url('assets/icons/sample_dark.png');
    }
    .allSatisfyIcon {
        background-image: url('assets/icons/allSatisfy_dark.png');
    }
    .intelligenceIcon {
        background-image: url('assets/icons/intelligence_dark.png');
    }
    .cubeIcon {
        background-image: url('assets/icons/cube_dark.png');
    }
    .calibrationIcon {
        background-image: url('assets/icons/calibration_dark.png');
    }
}

/* Devices */

.devices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    position: relative;
    width: calc(4 * 32px + 32px);
    left: 50%;
    transform: translateX(-50%);
}

.device {}

.deviceIcon {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center;
    background-repeat: no-repeat;
}

.deviceIcon.iphoneIcon {
    width: 20px;
    background-image: url('assets/device/iphone-light.png');
}
.deviceIcon.ipadIcon {
    width: 20px;
    background-image: url('assets/device/ipad-light.png');
}
.deviceIcon.macbookIcon {
    width: 32px;
    background-image: url('assets/device/macbook-light.png');
}
.deviceIcon.visionproIcon {
    width: 32px;
    background-image: url('assets/device/visionpro-light.png');
}

@media (prefers-color-scheme: dark) {
    .deviceIcon.iphoneIcon {
        background-image: url('assets/device/iphone-dark.png');
    }
    .deviceIcon.ipadIcon {
        background-image: url('assets/device/ipad-dark.png');
    }
    .deviceIcon.macbookIcon {
        background-image: url('assets/device/macbook-dark.png');
    }
    .deviceIcon.visionproIcon {
        background-image: url('assets/device/visionpro-dark.png');
    }
}

/* Links */

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: rgba(0, 0, 0, 0.75);
}

a:active {
    color: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    
    a:link {
        color: white;
    }
    
    a:visited {
        color: white;
    }
    
    a:hover {
        color: rgba(255, 255, 255, 0.75);
    }
    
    a:active {
        color: rgba(255, 255, 255, 0.5);
    }
    
}

/* Text */

.text {
    padding: 16px;
}

/* Info */

.info {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    max-width: min(90vw, 512px);
}

/* Light */

.light {
    opacity: 0.5;
}

/* Code */

.code {
    font-size: 1.1em;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bototm: 2px;
}

.codeBlock {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    text-align: left;
    padding: 4px;
    padding-left: 16px;
}

@media (prefers-color-scheme: dark) {
    .codeBlock {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Shader Image */

.shaderImage {
    max-width: 200px;
    border-radius: 6px;
}

/* Image Stack */

.imageStack {
    position: relative;
    width: calc(100vw - 64px);
    max-width: 500px;
    overflow: hidden;
}
.imageStack .imageLight {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
.imageStack .imageDark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
    border-radius: 6px;
}

.plainImageStack {
    position: relative;
    display: inline-block;
}
.plainImageStack img {
    position: absolute;
    top: 0;
    left: 0;
}

.imageLight {
    opacity: 1;
}
.imageDark {
    opacity: 0;
}
@media (prefers-color-scheme: dark) {
    .imageLight {
        opacity: 0;
    }
    .imageDark {
        opacity: 1;
    }
}

/* Glyph Stack */

.glyphStack {
    position: relative;
    display: inline-block;
}
.glyphStack img {
    position: absolute;
    top: 0;
    left: 0;
}

.glyphLight {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.glyphDark {
    opacity: 0;
    transition: opacity 0.3s ease;
}
@media (prefers-color-scheme: dark) {
    .glyphLight {
        opacity: 0;
    }
    .glyphDark {
        opacity: 1;
    }
}

/* Back */

.back {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
}