*{box-sizing:border-box}
body{
 margin:0;
 background:#fff8ed;
 color:#222;
 font-family:monospace;
 overflow-x:hidden;
}
header{
 display:flex;
 justify-content:space-between;
 padding:30px 8%;
}
.brand{
 font-size:32px;
 font-weight:900;
}
.brand span{color:#888}
nav a{margin:0 15px}
.hero{
 min-height:520px;
 display:flex;
 align-items:center;
 justify-content:space-around;
 padding:40px 8%;
}
h1{
 font-size:70px;
 line-height:.95;
 margin:0;
}
p{font-size:20px}
button{
 background:#222;
 color:white;
 border:0;
 padding:15px 25px;
 border-radius:12px;
 cursor:pointer;
}
.ghost{
 background:white;
 color:#222;
 border:2px solid #222;
}
.puppy{
 font-size:180px;
 animation:bounce 2s infinite;
}
section{
 padding:50px 8%;
}
.cards{
 display:flex;
 gap:25px;
}
.card,.launchbox{
 background:white;
 border:3px solid #222;
 border-radius:20px;
 padding:30px;
 box-shadow:8px 8px #222;
}
.card{
 width:220px;
 font-size:28px;
}
.card button{
 margin-top:20px;
}
.world{
 text-align:center;
}
.animals{
 font-size:70px;
}
.cloud{
 position:absolute;
 font-size:80px;
 opacity:.25;
}
.c1{left:10%;top:100px}
.c2{right:15%;top:160px}
footer{
 padding:40px;
 text-align:center;
}
@keyframes bounce{
50%{transform:translateY(-15px)}
}
@media(max-width:700px){
 h1{font-size:45px}
 .hero{flex-direction:column}
 .cards{flex-direction:column}
}