:root {
color-scheme: light dark;
--cv-color-aa: #1e90ff;
--cv-color-bb: #ffffff;
--cv-color-cc: #1e90ff;
--cv-color-dd: #ffffff;

}

/* CSS Pseudo-classes - selector:pseudo-class {...}
:host {}
:has {}
etc.
*/

/* CC Pseudo-elements - 
h1::before {content: url(smiley.gif);}
h2::after {content: url(smiley.gif);}
h3::marker {content: url(smiley.gif);}
h4::selection {content: url(smiley.gif);}
etc.
*/

* {box-sizing: border-box;}

html {scroll-behavior: smooth; cursor: auto;}
body {display: block; background-color: white; min-height: 4000px; height: auto; width: 100%; padding: 0; border: 0; margin: 0; z-index: 1;}
header {display: flex; flex-direction: row; justify-content: space-around; background-color: lightgrey; height: 40px; width: 100%; padding: 0; border: 1px solid black; margin: 0; z-index: 2; text-align: center;}
nav {display: flex; flex-direction: row; justify-content: space-around; position: sticky; top: 0; background-color: lightblue; height: 60px; width: 100%; padding: 0; border: 1px solid black; margin: 0; z-index: 2; text-align: center;}
main {display: block; background-color: lightgrey; height: auto; width: 80%; padding: 0; border: 0; margin: 5px 10% 5px 10%; z-index: 2; text-align: center;}
footer {display: block; background-color: lightblue; min-height: 400px; height: auto; width: 100%; padding: 0; border: 1px solid black; margin: 0; z-index: 2; text-align: center;}

section {display: block;  z-index: 3; text-align: center;}
.section_a {display: block; background-color: lightpink; min-height: 500px; height: auto; width: 90%; padding: 10px; border: 1px solid black; margin: 20px 5% 20px 5%;}
.section_b {display: block; background-color: lightgreen; min-height: 500px; height: auto; width: 90%; padding: 10px; border: 1px solid black; margin: 20px 5% 20px 5%;}
.section_c {display: block; background-color: lightyellow; min-height: 500px; height: auto; width: 90%; padding: 10px; border: 1px solid black; margin: 20px 5% 20px 5%;}
section:hover {border-radius: 10px; background-color: white;}

article {display: block; text-align: center;}

time {text-align: center;}

h1 {color: black; text-align: center; font-size: 40px;}
h2 {color: black; text-align: center; font-size: 35px;}
h3 {color: black; text-align: center; font-size: 30px;}
h4 {color: black; text-align: center; font-size: 25px;}
h5 {color: black; text-align: center; font-size: 20px;}

p {font-family: verdana; color: black; font-size: 16px; text-align: center;}

a {display: block; text-decoration: none; height: auto; width: auto; color: black; font-size: 16px; padding: 2px; border: 1px solid black; margin: 2px; text-align: center;}
a:link {color: black;}
a:visited {color: black;} /* Visited Link */
a:hover {background-color: white; font-weight: bold;} /* Mouse Over Link */
a:active {color: black;} /* Selected Link */
/* a.highlight:hover {color: #ff0000;} */

img {border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;}
img:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}

button {display: block; z-index: 4; text-align: center; font-size: 12px; cursor: pointer; background-color: lightgrey; color: black;}
.button_a {position: fixed; right: 30px; bottom: 240px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
.button_b {position: fixed; right: 30px; bottom: 170px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
.button_c {position: fixed; right: 30px; bottom: 100px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
.button_d {position: fixed; right: 30px; bottom: 30px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
.button_e {position: fixed; left: 30px; bottom: 100px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
.button_f {position: fixed; left: 30px; bottom: 30px; height: 50px; width: 50px; padding: 2px; border: 1px solid black; margin: 5px;}
button:hover {background-color: grey; font-weight: bold; border-radius: 10px;}

form {;}

dialog {}
/* #dialog110 {height: 200px; width: 200px; z-index: 5;} */

/* @media screen and (max-width: 900px) {body {background-color: lightgrey;}} */