html, body {

margin:0;

padding:0;

height:100%;

font-family:Inter, sans-serif;

background:linear-gradient(90deg,#E8F3EF,#ffffff,#E8F3EF);

display:flex;

flex-direction:column;

}



/* HERO */

.hero{

display:flex;

align-items:center;

justify-content:center;

gap:40px;

padding:20px;

flex-wrap:wrap;

}



.hero-image{

width:360px;

max-width:90%;

height:auto;

}



.hero-text{

max-width:500px;

}



h1{

color:#124E3B;

font-size:28px;

margin-bottom:10px;

}



.highlight{

color:#5B3FA6;

font-weight:bold;

}



/* ACTION AREA */

.actions{

display:flex;

flex:1;

width:100%;

}



/* COLUMNS */

.column{

padding:30px;

box-sizing:border-box;

}



.public{

width:35%;

background:#E8F3EF;

}



.private{

width:65%;

background:#F4EFEA;

}



/* BUTTONS */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

width:320px;

height:42px;

margin-top:15px;

border-radius:6px;

text-decoration:none;

color:white;

font-size:15px;

border:none;

cursor:pointer;

}



.primary{

background:#124E3B;

}



.secondary{

background:#5B3FA6;

}



.create{

background:#cca33b;

}



/* INPUT */

.input{

width:320px;

padding:10px;

margin-top:10px;

margin-bottom:10px;

box-sizing:border-box;

}



/* FOOTER */

footer{

background:#1C2A39;

color:white;

text-align:center;

padding:15px;

margin-top:auto;

}