*{margin:0;padding:0}
:root{
	--basic-accent:#9BCA3C;--sec-accent:#1D3A58;--lines-col:#7AB3C1;--color1:#3E994E;--color2:#61B26E;--color3:#9BCA3CCC;--color4:#1D3A58CC;--headColor:#3E3E3E;
	--txtColor:#2D2A2A;--txtDrkColor:#AFAFAF;--body-bg:#cccccc;--section-bg:whitesmoke;--titleColor:#EAEAEA;--popupColor:#41657E;
	--info:#00529B;--info-bg:#BDE5F8;--success:#4F8A10;--success-bg:#DFF2BF;--warning:#9F6000;--warning-bg:#F7F2DF;--error:#D8000C;--error-bg:#FFBABA;--validation:#D63301;--validation-bg:#FFE6DD;
	--circle-size:clamp(1.5rem, 2vw, 2.5rem);--spacing:clamp(0.25rem, 2vw, 0.5rem);
}
body{display:grid;grid-template:"gdheader" "gdmain" "gdfooter";font-family:Calibri,sans-serif;font-size:0.65vw;line-height:2rem;width:100vw;background-color:var(--body-bg);scroll-behavior:smooth}
header{grid-area:gdheader;width:100vw;height:16vh;background-color:var(--basic-accent);z-index:102}
#logo{position:absolute;top:2vh;left:3vh;width:10vh;height:10vh;background-image:url("../logo.png");background-size:100% auto;background-position:center;background-repeat:no-repeat;transition:.2s ease-out;/*-webkit-filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 #595959);filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 #595959);*/}
h1,h2,h3,h4,h5,h6{color:var(--headColor);padding:1.5rem 0 1rem 0}
h1{font-size:3.5rem}
h2{font-size:2rem}
h3{font-size:1.2rem}
h4{font-size:1.1rem}
h5{font-size:1rem}
a {text-decoration:none;color:var(--color3)}
main{grid-area:gdmain}
nav{position:fixed;background-color:var(--sec-accent);top:10vh;left:10vw;display:flex;justify-content:center;height:5vh;line-height:3vh;width:80vw;z-index:1000;}
.menu{display:flex;flex-direction:row;list-style-type:none;margin:0;padding:0;font-weight:700;height:2.6vh;margin:1.2vh;}
.menu li {transition:all 0.3s;position:relative;text-align:center;padding:0.1vh 0.2vw;text-decoration:none;font-size:1.5rem;line-height:1.5rem;margin:0 0.1vw;}
.menu li a {transition:all 0.3s;display:inline-block;width:10vw;}
.menu li::before {content:'';position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;opacity:0;transition:all 0.3s;border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid;border-top-color:rgba(255,255,255,0.5);border-bottom-color:rgba(255,255,255,0.5);transform:scale(0.1, 1);pointer-events:none;}
.menu li:hover a {letter-spacing:1px;}
.menu li:hover::before {opacity:1;transform:scale(1, 1);}

/*.menu a::before,
.menu a::after {display:inline-block;opacity:0;-webkit-transition:-webkit-transform 0.3s, opacity 0.2s;-moz-transition:-moz-transform 0.3s, opacity 0.2s;transition:transform 0.3s, opacity 0.2s;}
.menu a::before {margin-right:10px;content:'[';-webkit-transform:translateX(20px);-moz-transform:translateX(20px);transform:translateX(20px);}
.menu a::after {margin-left:10px;content:']';-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);transform:translateX(-20px);}
.menu a:hover::before,
.menu a:hover::after,
.menu a:focus::before,
.menu a:focus::after {opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);}
*/
/*.menu li::after {content:'';position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;transition:all 0.3s;background-color:rgba(255,255,255,0.1);}
.menu li:hover::after {opacity:0;transform:scale(0.1, 1);}*/

/*.menu li a{display:block;color:var(--txtDrkColor);text-align:center;padding:0.3vh 0.4vw;text-decoration:none;font-size:1.5rem;transition:0.4s;}
.menu li a:hover{background-color:var(--color1)}
.menu > li{float:left;overflow:hidden;}
.menu li:not(:last-child){border-right:solid 2px var(--lines-col)}*/
.menu-button-container{display:none;height:100%;width:30px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;}
#menu-toggle{display:none;}
.menu-button, .menu-button::before, .menu-button::after{display:block;background-color:var(--txtDrkColor);position:absolute;height:4px;width:30px;transition:transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius:2px;}
.menu-button::before{content:'';margin-top:-8px;}
.menu-button::after{content:'';margin-top:8px;}
#menu-toggle:checked + .menu-button-container .menu-button::before{margin-top:0px;transform:rotate(405deg);}
#menu-toggle:checked + .menu-button-container .menu-button{background:rgba(255, 255, 255, 0);}
#menu-toggle:checked + .menu-button-container .menu-button::after{margin-top:0px;transform:rotate(-405deg);}
section{position:relative;display:block;left:10vw;width:78vw;padding:2vh 1vw;background-color:var(--section-bg);min-height:71vh;}
article{position:relative;display:block;left:3vw;width:50vw;font-size:1.1rem}
hr{border:0;border-top:2px solid var(--titleColor);width:51vw;margin-bottom:2rem}
p{text-align:justify;text-justify:initial;max-width:95ch;}
footer{grid-area:gdfooter;position:relative;display:block;background-color:var(--basic-accent);width:100vw;padding:1vh 3vw;height:7vh}

@media only screen and (max-width:1365px),only screen and (max-device-width:1365px){
body{line-height:1.7rem}
h1{font-size:2.7rem}
h2{font-size:1.2rem}
h3{font-size:1.1rem}
h4{font-size:1rem}
h5{font-size:0.9rem}
h1,h2,h3,h4,h5,h6{padding-bottom:2px}
.menu li a{padding:0 0.4vw;font-size:0.85rem;}
nav{top:13vh;left:10vw;width:80vw;height:3vh;line-height:3vh;}
}

@media only screen and (max-width:1055px),only screen and (max-device-width:1055px) or (orientation:portrait){
body{line-height:1.5rem}
.menu-button-container{display:flex;height:3rem}
.menu-button-container{display:flex;height:3rem;top:0;position:relative;}
.menu{position:absolute;margin-top:2.5rem;flex-direction:column;width:18rem;justify-content:center;align-items:center;}
#menu-toggle ~ .menu li{height:0;margin:0;padding:0;border:0;transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
#menu-toggle:checked ~ .menu{width:18rem;}
#menu-toggle:checked ~ .menu li{border:1px solid var(--lines-col);height:2rem;padding:0.5em;transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
/*.menu > li{display:flex;justify-content:center;margin:0;padding:0.5em 0;width:100%;color:var(--txtDrkColor);background-color:var(--basic-accent);}*/
/*.menu > li:not(:last-child){border-bottom:1px solid var(--lines-col);}*/
h1{font-size:1.8rem}
h2{font-size:1.2rem}
h3{font-size:1.1rem}
h4{font-size:1rem}
h5{font-size:0.9rem}
h1,h2,h3,h4,h5,h6{padding-bottom:2px}
header{left:0;width:100vw;height:10vh}
}


@media only screen and (max-height:540px),only screen and (max-device-height:540px){
header{left:3vw;width:95vw}
p{font-size:0.9rem;max-width:initial}
section{left:3vw;width:93vw;padding:1vh 1vw}
article{left:1vw;width:61vw}
footer{left:3vw;width:91vw}
}




/*
https://dev.to/webdeasy/top-20-css-navigation-menus-3jdj
*/