header{ display: grid; position: fixed; background-color: #ffffffcc; top: -6rem; left: 0; width: 100%; grid-template-columns: 2fr 8fr; height: 5dvw; padding: .5dvw 10dvw;  z-index: 2; transition: 1s}
header.scrolled{top: 0}
header>#nav_logo>ul>li>a{display: flex; gap: 1dvw}
header img{height: 4dvw; float: left}
.padding{padding: .5dvw 10dvw;}
.columns_4{display: grid; grid-gap: 1dvw; grid-template-columns: 1fr 1fr 1fr 1fr;}
#nav_logo :where(a, li, ul, img, p) {list-style-type: none; font-weight: 500; font-size: 2.35rem; line-height: 100% ;text-decoration: none; color: #0a474e; font-family: "Tomorrow", sans-serif;}
#nav_logo p{margin-top: -.25rem; line-height: 100%}

#nav_main {display: flex; justify-content: end; align-items: center}
#nav_main :where(ul, li, a){list-style-type: none; text-decoration: none; color: #0a474e; font-weight: bold;}
#nav_main>ul{display: flex; flex-direction: row; gap: 1rem;padding: 1rem 0; position: relative}

#nav_main ul *{margin: 0; padding: 0}
#nav_main li{height: auto; padding: 0; margin: 0}
#nav_main ul li ul{display: flex; position: absolute; width: 0;flex-direction: column; transition: .5s; overflow: hidden; background-color: #0a474e; z-index: 2; top: 65%; transform: scale(0);}
#nav_main ul li ul a{display: block; color: #fff; border-bottom: solid 1px #ccc; width: 100%; padding: 1rem; margin: 0; height: 100%}
#nav_main ul li:hover ul{display: flex; width: fit-content;transform: scale(1);}
#hero {
  display: grid;
  grid-gap: 2dvw;
  align-items: center;
  padding: .5dvw 10dvw;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
  grid-template-areas:
      "A1 A2 A3"
      "A4 A4 A4";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  background-image: url(/img/bkg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#hero > div:nth-child(1) {
  grid-area: A1;
}
#hero > div:nth-child(2) {
  grid-area: A2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#hero > div:nth-child(3) {
  grid-area: A3;
}

#hero > div:nth-child(4) {
  grid-area: A4;
  background-color: #ffffffcc;
  padding: 1dvw;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

#hero > div:nth-child(2) > a{display: flex; align-items: center; justify-content: center; background-color: #ffffffdd; border: solid 3px red; border-radius: 50%; height: 20dvw; width: 20dvw}
#hero > div:nth-child(2) > a > img{width: 50%; height: auto; }
#hero :where(h1, h2, h3, h4){background-color: #ff3333cc; padding: 1rem; text-align: left;color: #fff; margin: 0;}
#hero form{background-color: #ff3333cc; padding: 1dvw}
form>div{margin-top: 1.5rem}
form>div.check{margin-top: -1.8rem; height: ;}
form>.check [id*="regulations_ok"]{position: relative; width: 1.5dvw; margin: 0dvw;}
form>div.check [id*="regulations_ok"] +label{position: relative; background: none; color: #222; top: initial; left: 0; font-size: .8rem; align-self: center;height: auto}
form>div.check [id*="regulations_ok"]:checked +label{color: #fff}

.scores{text-align: center; color: #fff}