* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --main: #f2f0e3;
    --secondary: #2e2e2e;
    --spring: linear(0, 0.077, 0.248, 0.448, 0.636, 0.792, 0.907, 0.984, 1.029, 1.05, 1.054, 1.049, 1.04, 1.029, 1.019, 1.011, 1.004, 1.001, 0.998, 0.997, 0.997, 0.997, 0.998, 0.999, 0.999, 0.999, 1);
}

a {
	all: unset;
	cursor: pointer;
	transition: transform 400ms ease;
	transition: transform 650ms var(--spring);
}

a p {
	position: relative;
	padding-bottom: 2px;
}

a p::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

a:hover,
a:focus-visible {
	transform: scale(1.08) translateY(-1px);
}

a:hover p::after,
a:focus-visible p::after {
	transform: scaleX(1);
	transform-origin: left;
}

body {
    background: var(--main);
    color: var(--secondary);
    /* font-family: "Climate Crisis", sans-serif; */
    font-family: "Funnel Display", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    height: 100vh;
}
.header{
    border: 0.5rem solid var(--secondary);
    padding: 2rem 4rem;
    border-radius: 2rem;
    width: clamp(200px, 100%, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
h1 {
    font-size: clamp(2rem, 10vw, 4rem);
    font-weight: 800;
}

.bottom{
    position: absolute;
    bottom: 20px;
    left: 50%;
    opacity: 0.1;
    font-family: "Funnel Display", sans-serif;
    transform: translateX(-50%);
}

/* Dark mode inverse the colors */

@media (prefers-color-scheme: dark) {
    :root{
        --main: #2e2e2e;
        --secondary: #f2f0e3;
    }
}

@media (prefers-reduced-motion: reduce) {
	a, a p::after { transition: none; }
}