:root {
    --bg: rgb(32, 48, 48);
    --accent: #1b1614;
    --highlight: #F6B737;
    --dark: #101818;
    --light: #182522;
    --link: #437F97;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
    color: white;
}

body {
    margin: 0;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

::selection {
    background: var(--highlight);
}
	  
a {
    color: var(--link);
}

.blur {
    backdrop-filter: blur(3px);
}

.hover {
    transition: 0.2s;

    &:hover {
	transform: scale(1.1);
    }
}
    

@keyframes floating {
    0% { transform: translate(0, 0px); }
    10% {transform: translate(2.5px, 2.5px);}
    25% { transform: translate(4px, 4px); }
    40% { transform: translate(2.5px, 4.5px);}
    50% { transform: translate(0, 5px); }
    75% { transform: translate(-3px, 4.7px); }
    90% { transform: translate(-2.2px, -1px); }
    100% { transform: translate(0, 0px); }
}

.floating {
    animation: floating 3s linear infinite;
}


@media screen and (max-aspect-ratio: 3/4.1) {
    :root {
	font-size: 1.5em;
    }
}

@media (prefers-reduced-motion) {
    .floating {
	animation: none !important;
    }
}