:root {
--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.
*/

html {scroll-behavior: smooth; cursor: auto;}
body {display: block; background-color: white; height: auto; width: 100%; z-index: 1;}
header {display: block; background-color: lightgrey; height: 50px; width: 80%; z-index: 2;}
nav {display: block; background-color: lightblue; height: 50px; width: 80%; z-index: 2;}
main {display: block; background-color: lightgrey; z-index: 2;}
footer {display: block; background-color: lightblue; z-index: 2;}

section {display: block; height: auto; width: auto; z-index: 3;}
.section_a {display: block; background-color: lightpink; height: 500px; width: 80%; z-index: 3;}
.section_b {display: block; background-color: lightgreen; height: 500px; width: 80%; z-index: 3;}

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; text-align: center; font-size: 16px;}

a {}
a:link {color: #FF0000;}
/* Visited Link */a:visited {color: #00FF00;}
/* Mouse Over Link */a:hover {color: #FF00FF;}
/* Selected Link */a:active {color: #0000FF;}
/* 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);}