:root{
    --bg:#f7f7f7;
    --fg:#333;
    --fg-2:#666;
    --btn-bg:#fff;
    --btn-bd:#ccc;
    --btn-hover:#f0f0f0;
    --btn-active:#e0e0e0;
    --radius:12px
}

*{box-sizing:border-box}

html,body{height:100%}

body{
    font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background-color:var(--bg);
    color:var(--fg);
    margin:0 10px;
    display:flex;
    flex-direction:column
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 40px
}

header .logo img,
header .home img{height:30px}

header .home img{transition:transform .3s ease-in-out}
header .home img:hover{transform:scale(1.1)}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    padding:10px 25px;
    inline-size:80px;
    border:0;
    border-radius:20px;
    background:#fdfdfd;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
    cursor:pointer;
    font-size:16px;
    text-align:center;
    transition:transform .3s ease-in-out,background-color .2s ease-in-out
}
.btn:hover{transform:scale(1.1);background-color:var(--btn-hover)}
.btn:active{transform:scale(1.05);background-color:var(--btn-active)}

@media (prefers-reduced-motion:reduce){
    header .home img,.btn{transition:none}
}