@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {
  --backdrop-dark: #FFA47A;
  --tcolor-dark: #333;
  --backdrop-light:#FFCEB8;
  --tcolor-light: #222;
  --accent: #FD4F00;
  --accentc: black;
}
body {
  background:var(--backdrop-light);
  color:var(--tcolor-light);
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  text-align:center;
  font-size: 3vh;
}
h1, h2 {
  font-family:'Manrope', Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.nav {
  background:white;
  border-bottom: #eeeeee 1px solid;
  backdrop-filter: blur(3px);
  padding:15px;
  display:flex;
  width:100%;
  box-sizing: border-box;
  position: sticky;
  top:0;
}
.nav .logo {
  height:3vh;
  width:auto;
  vertical-align:text-top;
  flex:none;
}
.nav * {
  flex:1;
}
a {
  color:#444;
  transition:0.1s;
}
a:hover {
  color:black;
}
#gue {
  width:100%;
  box-sizing: border-box;
}
input {
  padding:10px;
  background:var(--accent);
  color:var(--accentc);
  border-radius: 100px;
  border:none;
  max-width: 400px;
  margin:auto;
  margin-bottom:5px;
  display:block;
}
input:focus {
  outline:black 1px solid;
}
button {
  cursor:pointer;
  width:50%;
  max-width: 200px;
  margin:auto;
  display:block;
  padding:10px;
  border-radius: 100px;
  border:none;
  background:var(--accent);
  color:var(--accentc);
  transition:0.3s;
}
button:hover {
  filter:brightness(90%);
}
button:active {
  filter:brightness(70%);
}
.banner h1 {
  margin-top:0;
}
.banner {
  background:radial-gradient(circle, #FFA47A 50%, white 50%);
  background-attachment:fixed;
  color:#222;
  margin:0;
}
.section {
  min-height: 100vh;
  padding:5px;
}
.section h1 {
  font-size: 5em;
}
.light {
  background:var(--backdrop-dark);
  color:var(--tcolor-dark);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}