@charset "UTF-8";
@font-face {font-family: myFont;src: url(helvetica.woff2);}
*{ box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
:root{--padding-lat:5%;}
body{background-image:linear-gradient(black,#16774a);color:#e1fd2c;font-family:myFont;margin:0;}
main{display:grid;background-image:url(sun-tornado.svg);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;}
section {min-height:100vh;display:grid;margin:0;align-content:center;padding-top:4rem;padding-bottom:4rem;padding-left:var(--padding-lat);padding-right:var(--padding-lat);}
pre {white-space:break-spaces;font-size:1.7rem;}
#brand{margin:0;}
h1 {font-size:4rem;margin-top:1rem;margin-bottom:4rem;}
h2 {font-size:3rem;}
p {font-size:2rem;}
#hero{background:black;color:#e1fd2c;opacity:0.8;}
#section-who{background:#16774a;color:#e1fd2c;opacity:0.8;}
#section-what{background:#f6a0a9;color:#4f2479;opacity:0.8;}
#section-how{background:#bbd4d0;color:#16774a;opacity:0.8;}
#section-why{background:#1a1919;opacity:0.8;}
nav{position:fixed;top:1rem;display:flex;justify-self:center;background:#3e2f2f;padding:0 1rem;width:fit-content;border-radius:12px;margin:0;gap:1rem;height:3rem;z-index:1;}
nav a {color:#e1fd2c;text-decoration:none;font-size:1rem;padding:0;display:flex;align-self:center;}
nav button {display:none;background:transparent;border:none;border-radius:12px;font-size:1rem;font-family:myFont;font-weight:800;cursor:pointer;color:#e1fd2c;}
dialog {background:gold;border-radius:12px;}
dialog::backdrop{background:black;opacity:0.9;}
dialog form {display:grid;}
dialog button {display:flex;justify-self:end;border:none;font-size:1rem;padding:1rem;background:black;color:white;border-radius:12px;cursor:pointer;}
dialog span {font-size:1rem;word-break: break-word;padding:4rem 2rem 1rem 2rem;}
dialog span::before{content:"he";}
footer {display:flex;padding:1rem;gap:0.3rem;height:12rem;align-items:center;justify-content:center;background:black;}
@media screen and (min-width: 1200px) {
:root{--padding-lat:15%;}
h1 {font-size:5rem;}
h2 {font-size:4rem;}
p {font-size:3rem;}
dialog span {font-size:2rem;padding:4rem 4rem 2rem 4rem;}
nav{top:2rem;}
}
@media screen and (min-width: 1500px) {
:root{--padding-lat:20%;}
}