:root{--body-font: "Roboto Flex";--heading-font: "Bebas Neue";--body-font-size: 18px;--h1-font-size: clamp(1.2rem,3vw + 1rem, 3.4rem);--body-dark-font-color: #282828;--body-light-font-color: #ffffff;--site-button-color: #008b8b;--site-button-hover-color: #004b4b;--form-button-color: #008b8b;--form-button-hover-color: #004b4b;--dark-bg-color: #282828;--dark-cyan-color: #008b8b}*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0}ul{list-style:none}a{text-decoration:none;color:inherit}html{font-family:var(--body-font),sans-serif;font-size:var(--body-font-size);color:var(--body-light-font-color);font-weight:400;line-height:1.5;height:100%}body{margin:0;min-height:100%;display:grid;grid-template-rows:auto 1fr auto;background:var( --dark-bg-color)}h1,h2,h3,h4,h5,h6{font-family:var(--heading-font),cursive;font-weight:100;color:#f9f9f9;text-wrap:balance}h1{font-size:var(--h1-font-size)}.wrapper{margin-inline:auto;width:min(96%,1200px);text-align:center}.centered{display:grid;place-items:center;height:100%}.site-button{padding:.5rem 1rem;border-radius:5px;background-color:var(--site-button-color);border:1px solid #ccc;color:#fff;transition:background-color .3s;display:flex;justify-content:center;align-items:center;gap:.5rem}.site-button svg{fill:#fff;width:16px;height:16px}.site-button:hover{background-color:var(--site-button-hover-color)}form{width:100%}.input-group{margin-block:1rem;display:grid;place-items:center}.form-label{display:block;margin-bottom:.5rem;color:var(--body-light-font-color)}.form-input{padding:.5rem;border:1px solid #ffffff40;border-radius:5px;width:50%;font-size:16px;font-family:var(--body-font),sans-serif;display:block}.form-textarea{resize:none;padding:.5rem;border:1px solid #ffffff40;border-radius:5px;width:50%;height:130px;font-size:18px}.form-button{padding:.5rem 1rem;border-radius:5px;background-color:var(--form-button-color);border:1px solid #ccc;color:#fff;transition:background-color .3s;cursor:pointer;font-family:var(--body-font),sans-serif;font-weight:300;font-size:var(--body-font-size)}.form-button:hover{background-color:var(--form-button-hover-color)}.form-button[disabled]{background-color:#ffffff40;color:#000;cursor:not-allowed}header{width:100%;padding-block:1rem;background:var( --dark-bg-color);border-bottom:1px solid #ffffff40}header nav{display:flex;justify-content:space-between;align-items:center}nav{width:100%;display:flex;justify-content:center;align-items:center;gap:1rem}nav .logo a{font-family:var(--heading-font),cursive;text-decoration:none;font-size:1.3rem;font-weight:700;background-image:linear-gradient(to right,#008b8b,#fff,#008b8b);-webkit-background-clip:text;color:transparent;text-wrap:nowrap}nav a:not(.site-button,.logo-text){color:#fff;text-decoration:none;transition:color .3s}nav a:not(.site-button,.logo-text):hover{color:var(--dark-cyan-color)}main{padding-block:2rem;position:relative}footer{border-top:1px solid #ffffff40;background:var( --dark-bg-color);color:#fff;padding-block:2rem;text-align:center}footer nav{display:flex;justify-content:center;align-items:center;gap:1rem}footer p{width:100%;font-size:14px;text-align:center;margin-block:1rem}@media (max-width: 500px){header{padding-block:2rem}header nav{flex-direction:column}header nav .site-button{width:96%}.wrapper{width:90%}.form-input,.form-textarea,.form-button{width:100%}footer nav{flex-direction:column}}
