:root {
    /* Farben festlegen */
    --plum:            oklch(0.46 0.17 329); /*K*/
    --goldenfizz:      oklch(0.96 0.19 108); /*A*/
    --malibu:          oklch(0.80 0.11 234); /*l*/
    --neoncarrot:      oklch(0.77 0.16 56); /*e*/
    --mantis:          oklch(0.74 0.17 138); /*i*/ 
    --alizarincrimson: oklch(0.58 0.24 27); /*D*/
    --eucalyptus:      oklch(0.57 0.13 161); /*O*/
    --violeteggplant:  oklch(0.46 0.19 330); /*s*/
    --azureradiance:   oklch(0.61 0.20 255); /*k*/
    --geraldine:       oklch(0.78 0.13 18); /*o*/
    --deepcove:        oklch(0.21 0.10 262); /*p*/
    --geraldinehell:   oklch(0.95 0.13 18);

}

body {
    width: calc(100% - 2em);
    min-height: calc(100vh - 2em);
    margin: 0.5em;
    padding: 0.5em;
    font-family: Timeless, Helvetica, sans-serif;
    display: grid;
    gap: 0.5em;
    color: light-dark(var(--deepcove), var(--geraldinehell));
    background-color: light-dark(var(--geraldinehell), var(--deepcove)) ;
        ul {
	list-style: none;
	margin: 0m;
	padding: 0;
    }

    li a {
	display: inline-block;
	text-decoration: none;
	color: var(--mantis);
	padding: 0.2em 0em;
    }

    li a:focus {
	color: var(--goldenfizz);
    }
}

main {
    display: grid;
    gap: 0.5em;
    color: light-dark(var(--deepcove), var(--geraldinehell));
    background-color: light-dark(var(--geraldinehell), var(--deepcove)) ;
}

/*Layout für breitere Viewports */

@media (min-width: 40em) {
    body {
	grid-template-columns: 1fr 15em;
	grid-template-rows: auto 1fr min-content;
    }
    main {
	grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
    }
article {
    
    }
    aside {
	grid-column: -2 / -1;
    }
    header, footer {
	grid-column: 1 / -1;
    }

}

/* Layout allgemein */ 

/* Ein- und Ausblenden von Rahmen */
/*header,
nav,
main,
article,
section,
aside,
footer {
    border: thin solid;
}*/

header{
    gap: 0.5em;
    img {
	width: min(100%, 50em);
	display: block;
	margin-left: auto;
	margin-right: auto;
    }
}

nav{
    grid-area: nav;
    
    ul {
	list-style: none;
	margin: 0.5em;
	padding: 0;
    }

    li a {
	display: inline-block;
	text-decoration: none;
	color: var(--mantis);
	padding: 0.2em 1em;
    }

    li a:focus {
	color: var(--goldenfizz);
    }
}
    
main {
    
}

article {
    background-color: rgba(255,255,255,0.7);
    border-color: var(--plum);
    p {color: var(--deepcove)};
    margin: 0.5em;
    padding: 0.5em;
}

footer {
    background-color: var(--eucalyptus);
    p {color: var(--neoncarrot)};
    margin: 0.5em;
    padding: 0.5em;

    a {
	display: inline-block;
	text-decoration: none;
	color: var(--neoncarrot);
        }
        }

aside {
    background-color: var(--azureradiance);
    margin: 0.5em;
    padding: 0.5em;
    ul {
    
    }
    li {
    }
}	    

h1 {
    color: var(--plum);
    font-family: 'Timeless';
    font-size: 250%;
    font-style: normal;
    text-align: center;
    margin-top: 0;
}

h2 {
    font-size: 150%;
    font-style: bold;
}

h3 {
    font-size: 110%;
    font-style: bold;
}

img {
    margin-left: auto;
    margin-right: auto;
}