/* v.1.3.2 */

/*
@media (prefers-color-scheme: light) {
body{
background-image: url("../img/bg10.svg");
background-repeat: repeat;
background-attachment: fixed;
}
}

@media (prefers-color-scheme: dark) {
body{
background-image: url("../img/bg10-dark.svg");
background-repeat: repeat;
background-attachment: fixed;
}
}*/


:root{
/* .brand - link, accent color (red, orange, yellow, green, blue, indigo, violet) */
--brandColor: color-mix(in srgb, var(--blue) 80%, var(--green));
}

.navMenu a,
.navMenu2 a {
border-bottom: 2px solid transparent;
}
.navMenu a:hover,
.navMenu2 a:hover {
border-bottom: 2px dotted var(--brand);
}
.navMenuActive {
border-bottom: 2px dotted var(--brand) !important;
}

/* Navigation CSS v.3.0.0 */

.topNav form, .topNav input[type=search] { display: inline-block; }
.topNav form { width: 100%; max-width: 130px; vertical-align: middle; }
.topNav input[type=search] { font-size: small; min-height: 10px; height: 30px; }
.topNav form ::placeholder { font-size: x-small; }
.topNav form { margin-left: var(--padding); }

.topNav button { margin: 0; }
.topNav { text-align: center; }
/*
.topNav nav{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
}test delme*/

.topNav nav{
display: inline-block;
width: auto;
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
}

/* fix for mobile */
 @media only screen and (max-width: 500px){
.topNav nav {
justify-content: left;
align-items: center;
text-align: left;
}
.topNav { text-align: left; }
.topNav button { margin-right: var(--padding); }
.topNav form { margin-left: 0; }
}

.dropdownMenu {
width: calc(100% - (2 * var(--bodyPadding)));
/*delme test validator error max-width: calc(900px - (2 * var(--bodyPadding)));*/
max-width: 900px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
z-index: 999;
display: none;
}

.topNav .dropdownMenuButton { display: none; }

.dropdownMenuButton svg {
max-width: 14px;
vertical-align: middle;
fill: var(--brand) !important;
stroke: var(--c3) !important;
}


.dropdownMenuColumn {
text-align: left;
/*columns: 120px auto;*/
z-index: 2;
margin-top: var(--padding);
}
.dropdownMenuContent a { display: inline-block; }

/* fix */
.dropdownMenuContentWrapper, .dropdownMenuContent { display: inline-block;  }
.showDropdownMenu { display: block; }

.topNav nav ul, .topNav nav li {
padding: 0;
margin: 0;
display: inline;
width: auto;
list-style-type: none;
}

.topNav nav a {
padding: var(--padding);
}

/* .screenReader in main.css */

/* end Navigation CSS */





.menu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
margin: 0 auto;
justify-content: center;
}

@media(max-width: 150px) { .menu { display: block; width: 100%; }}

.menu a {
display: flex;
min-width: 100%;
justify-content: start;
align-content: center;
margin: 0 auto;
text-wrap: balance;
text-align: left;
/*min-height: 50px;*/
text-decoration: none;
}



.logo, .logo2{
position: relative;
border-radius: 50%;
display: inline-flex;
vertical-align: middle;
text-align: center;
padding: 1px;
border: 2px dashed color-mix(in srgb, var(--brand) 50%, transparent);
opacity: 1;
transition: transform .250s ease-in-out;
width: 60px;
}


.logo:hover, .logo2:hover{
transform: rotate(360deg);
transition: transform 1.5s ease-in-out;
}

.logo2 { width: 26px; height: 26px; }

@media (prefers-reduced-motion) {
.logo:hover, .logo2:hover{ border-color: var(--c); }
}