html {
background-color: #f5f5f5;
}
body {
margin: 0;
font-family: 'sb-sans', Arial, sans-serif;
}
.root {
margin: 0;
width: 100%;
}
.root > *:not(:first-child) {
margin-top: 2rem;
}
.root > h2 {
font-size: 3rem;
text-align: center;
color: #21a038 ;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
height: fit-content;
background: linear-gradient(172deg, rgba(33,206,0,1) 0%, rgba(227,231,30,1) 44%, rgba(255,129,0,1) 66%);
color: white;
border-radius: 0 0 4rem 4rem ;
border-style: none;
}
header > * {
margin: 0;
text-align: center;
display: flex;
}
header > h1 {
font-size: 3rem;
}
header > p {
font-size: 2rem;
}
header > div {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
header > div > img {
max-width: 100%;
}
header .href-button {
text-decoration: none;
font-size: 2rem;
background-color: white;
color: rgba(33,206,0,1) ;
padding: 1rem;
border-radius: 4rem;
border-style: none;
}
.card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 1rem;
}
.card-holder > .card {
background: white;
border-style: none;
border-radius: 2rem;
padding: 2rem;
height: 10rem;
flex-grow: 1;
width: 20rem;
}
.card-holder > .card > * {
padding: .5rem;
}
.card-holder > .card > .icon {
font-size: 3rem;
height: 3rem;
}
.card-holder > .card > .title {
font-size: 1.5rem;
font-weight: 700;
}
.card-holder > .card > .desc {
color: gray;
}
.form-holder {
display: flex;
flex-direction: column;
align-items: center;
background: rgb(33,206,0);
background: linear-gradient(172deg, rgba(33,206,0,1) 0%, rgba(227,231,30,1) 44%, rgba(255,129,0,1) 66%);
color: white;
border-radius: 4rem 4rem 0 0;
border-style: none;
padding: 1rem;
padding-bottom: 3rem;
padding-top: 3rem;
}
.form-holder > * {
margin: 1rem ;
}
.form-holder > h2 {
text-align: center;
font-size: 3rem;
}
.form-holder > p {
text-align: center;
font-size: 2rem;
}
form {
color: black;
max-width: fit-content;
border-radius: 1rem ;
border-style: none;
padding: 1rem;
background: white ;
display: flex;
flex-direction : column;
gap: .5rem;
padding: 1rem ;
}
.field {
display: flex;
flex-direction: column;
}
.field.row {
flex-direction: row;
}
input, select {
border: solid .05rem lightgray;
border-radius: 1rem;
padding: .5rem;
padding-left: 1rem;
}
select {
padding-right: .5rem;
}
input::placeholder {
/*padding-left: 1rem;*/
}