*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --lux:70%;
    --background-color: oklch(100% 0 10);
    --color: oklch(10% 0 10);
}
/* START LUX VALUES PRACTICE SECTION */

/* Dark mode in the scene isn't working, play with the values here
to see how the lux value affects the colors. I have everything set up for you,
these are the only lux values you have to play with to make dark mode work. */
.dark-mode{
    --lux: 70%;
    --background-color: oklch(100% 0 10);
    --color: oklch(10% 0 10);
}

.mode-container{
    height: 50dvh;
    width: 100%;
    background-color: oklch(var(--lux) .5 220);
    position: relative;
}

.luminary{
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: oklch(calc(var(--lux) + 25%) .4 110);
    left: 20%;
    top: 10%;
    border-radius: 50%;
    cursor: pointer;
    border:none;
}

.luminary:hover,
.luminary:focus{
    outline: none;
    box-shadow: 2px 0px 8px 2px oklch(calc(var(--lux) + 25%) .4 110);
}

.grass{
    height: 20dvh;
    width: 100%;
    background-color: oklch(var(--lux) .3 160);
    position: absolute;
    bottom: 0;
}

.tree-trunk{
    position: absolute;
    right: 100px;
    bottom: 10%;
    height: 25dvh;
    width: 40px;
    background-color: oklch(calc(var(--lux) - 10%) 0.11 30);
}

.foliage{
    position: absolute;
    right: 45px;
    top:2%;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: oklch( calc(var(--lux) - 5%) .5 130);
}

/* END LUX PRACTICE SECTION */

body{
    line-height: 1.3;
    font-family: system-ui, sans-serif;
    color: var(--color);
    background-color: var(--background-color);
}

h1{
    text-align: center;
}


/* I am not a designer and some of these colors just aren't great
your challenge is to make it nice or at least yours. Add colors */
h2{
    padding: 1rem 1rem 0;
    border-bottom: solid 6px oklch(var(--lux) .5 220);
    /* line-height: 1.6; */
}


h3{
    padding: 1.5rem 2rem .5rem;
/* make the underline look cool or change this completely */
    text-decoration: underline 2px oklch(var(--lux) .3 180);
}

ul{
    padding-left: 4rem;
    padding-bottom: 1.5rem;
}

li{
    padding-bottom:.5rem;
    max-width: 600px;
}


/* make a better background color for the alternating lists */
ul:nth-of-type(2n),
h3:nth-of-type(2n){
    background-color: oklch(calc(var(--lux) + 10%) .02 220);
}

.example-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.example{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin-right: 2rem;
}

/* green to red example gradient */
.example.A{
    background-image:     
    linear-gradient(
      to right in lab,
      lab(50% -230 0) 0%, lab(50% 230 0) 100%
    );
}

/* blue to yellow example gradient */
.example.B{
    background-image:     
    linear-gradient(
      to top in lab,
      lab(30% 0 -230) 0%, lab(90% 0 230) 100%
    );
}

/* color wheel example gradient its mostly for the visual and isn't exact */
.example.Hue{
    flex-shrink: 0;
    background-image: conic-gradient(
      from 0deg at center in oklch longer hue,
      oklch(70% .3 0) 0%, oklch(70% .3 0) 100%);
}

.info{
    max-width: 600px;
}

section > p.info{
    padding-left: 1rem;
    font-weight: 500;
}