@property --siteBColor   { syntax: "<color>"; inherits: false; initial-value: hsla(0, 0%, 83%, 0.23) }
@property --mainBColor   { syntax: "<color>"; inherits: false; initial-value: hsl(0, 0%, 100%) }
@property --headerBColor { syntax: "<color>"; inherits: false; initial-value: hsl(199, 100%, 36%) }
@property --headerTColor { syntax: "<color>"; inherits: false; initial-value: hsl(0, 0%, 100%) }
@property --footerBColor { syntax: "<color>"; inherits: false; initial-value: hsl(225, 40%, 18%) }
@property --footerTColor { syntax: "<color>"; inherits: false; initial-value: hsl(0, 0%, 100%) }
@property --textColor    { syntax: "<color>"; inherits: false; initial-value: hsl(0, 0%, 0%) }
@property --hoverTColor  { syntax: "<color>"; inherits: false; initial-value: hsl(199, 100%, 36%) }
@property --courseBColor { syntax: "<color>"; inherits: false; initial-value: hsla(199, 100%, 36%, 0.11) }
@property --boxShColor   { syntax: "<color>"; inherits: false; initial-value: hsla(0, 0%, 0%, 0.19) }

h1 { font-size: 1.8rem; padding: 10px; }
h2 { font-size: 1.6rem; padding: 7px; }
h3 { font-size: 1.3rem; padding: 5px; }
p  { font-size: 1.2rem; padding: 5px; }

.site
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: auto auto;
    min-width: 500px;
    max-width: 1024px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.5em;   
    /*background-image: url("../img/forklift_2_grey.svg");*/
    /*background-size:30px;*/
    /*background-repeat: round;*/
    background-color: var(--siteBColor); 
    box-shadow: 0 20px 5px 10px var(--boxShColor);
}

.site header
{
    background-color: var(--mainBColor);
}
.topheader
{
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    align-items: flex-end;
    background: var(--headerBColor);
    border-bottom-right-radius: 150px;
}
.topheader img
{
    width: 150px;
}
.topheader p
{
    font-size: 2.2rem;
    color: var(--headerTColor);
}

.sitenav
{
    padding: 15px 0 15px 0;
    background-color: var(--mainBColor);
}
.sitenav ul
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 20px;
    list-style: none;
}
.sitenav li
{
    font-size: 1.3rem;
    font-weight: bold;
}
.sitenav a
{
    text-decoration: none;
    padding: 0 0 5px 0;
}
.sitenav a:link { color: var(--textColor); }
.sitenav a:focus, .sitenav a:hover
{
    color: var(--hoverTColor);
    border-bottom: solid 3px var(--hoverTColor);
}

.legalnoticenav
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--footerBColor);
}
.legalnoticenav ul
{
    margin: .7rem 0 0 0;
    line-height: 1.2rem;    
    font-size: 0.9rem;
}
.legalnoticenav li
{
    align-self: flex-start;
    list-style-type: none;
}
.legalnoticenav a:link
{
    color: var(--headerTColor);
    text-decoration: none;
}
.legalnoticenav a:focus, .legalnoticenav a:hover
{
    color: var(--hoverTColor);
}
footer small
{
    align-self: flex-start;
    margin: 0 0 0 5px;
    font-style: italic;
    font-size: 0.8em;
    color: var(--footerTColor);
}