/* main styles using CUBE CSS https://cube.fyi/ */
:root {
    /* colors */
    --color-primary: white;
    --color-secondary: black;
    --color-tertiary: gray;
    --color-highlight: orangered;

    color-scheme: dark;

    /* fonts */
    --font-stack: Verdana, Arial, Helvetica, sans-serif;

    /* font scaling: @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

    --tracking: normal;
    
    /* layout */
    --flow-space: 1rem;
    --gap: 1.5rem;

    /* spacing: @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
  
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  
    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}


/* base */
a {
    color: var(--color-highlight);
}

body {
    font-family: var(--font-stack);
    font-size: var(--step-0);
    letter-spacing: var(--tracking);
}

img {
    border-radius: .5rem;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--color-highlight);
    display: inline-block;
    height: 1rem;
    margin-right: .5rem;
    position: relative;
    width: 1rem;
}

input[type="checkbox"]:checked {
    background-color: var(--color-highlight);
}


/* compositions - flexible, component-agnostic layouts */

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

.flow > * + * {
    margin: var(--flow-space, 1em) 0;
}

.horizontal-distributed {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.wrapper {
    /* background-color: red; */
    margin: var(--flow-space) auto;
	max-width: clamp(360px, 80ch, 1100px);
	padding: var(--space-3xs) var(--space-m);
	width: 100%;
}


/* utilities - classes that do one job well */

.bg-primary {
    background: var(--color-primary);
}

.bg-secondary {
    background: var(--color-secondary);
}

.bg-tertiary {
    background: var(--color-tertiary);
}

.bg-day {
    background: #83a4d4; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to bottom,
      #83a4d4,
      #b6fbff
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to bottom,
      #83a4d4,
      #b6fbff
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-dawn {
    background: #ffa17f; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to bottom,
      #00223e,
      #ffa17f
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to bottom,
      #00223e,
      #ffa17f
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-dusk {
    background: #f0c27b; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to bottom,
      #4b1248,
      #f0c27b
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to bottom,
      #4b1248,
      #f0c27b
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
    
.bg-night {
    background: #283048; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to top,
        #859398,
        #283048
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to top,
        #859398,
        #283048
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.br-2 {
    border-radius: 2rem;
}

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-tertiary {
    color: var(--color-tertiary);
}


/* blocks - skeletal components and organizational structures */

.background {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.button {
    border: 1px solid var(--color-primary);
    border-radius: .5rem;
    cursor: pointer;
    padding: var(--space-xs) var(--space-m);
}

.button[data-type="primary"] {
    color: var(--color-primary);
    background-color: var(--color-secondary);
}

.button[data-type="primary"]:hover,
.button[data-type="primary"]:focus {
    color: var(--color-secondary);
    background-color: var(--color-tertiary);
}

.button[data-type="secondary"] {
    color: var(--color-secondary);
    background-color: var(--color-primary);
}

.button[data-type="secondary"]:hover,
.button[data-type="secondary"]:focus {
    color: var(--color-primary);
    background-color: var(--color-secondary);
}

.card {
    border-radius: 1rem;
    padding: var(--space-xs);
}

.card h4 {
    font-style: italic;
}

.checklist {
    padding: var(--space-xs-s);
}

.checklist > * {
    display: block;
    padding-left: var(--space-xs);
}

.checklist label {
    align-items: center;
    border: 1px solid var(--color-tertiary);
    display: flex;
    margin-bottom: 1px;
}

.icon {
    width: var(--step-0);
}

.logo {
    display: inline;
    width: var(--step-4);
}

.main-menu ul {
    border-radius: 2rem;
	list-style: none;
    padding: var(--flow-space) var(--space-s);
}

.main-menu ul li {
	display: inline-block;
	padding-right: var(--space-xs);
	position: relative;
	text-align: left;
}

.main-menu ul li a:hover {
	color: var(--color-tertiary);
	text-decoration: none;
}

.main-menu ul li a {
	text-decoration: none;
}


/* exceptions - deviations from rules outlined in a block */

.card[data-state='reversed'] {
    flex-direction: column-reverse;
  }
  

/* media queries */

/* medium devices (phones, 550px and smaller) */
@media only screen and (max-width: 550px) {
    nav {
        font-size: var(--step--1);
    }
}

/* small devices (phones, 480px and smaller) */
@media only screen and (max-width: 480px) {
    nav {
        font-size: var(--step--2);
    }

    .logo {
        width: var(--step-3);
    }    

    .main-menu ul {
        padding: .75rem 1rem;
    }

    .main-menu ul li {
        padding-right: .5rem;
    }
}

/* extra small devices (compact phones, 380px and smaller) */
@media only screen and (max-width: 380px) {
    nav {
		flex-direction: column;
	}
}