/* Variables */

:root {
    --dominant:#000;
    --secondary:#fce5cd;
    --accent:#b39c6c;
    --dim:#20261f;
}
@font-face {
    font-family: 'Jeffrson';
    src: url('/src/lib/fonts/jefferson/Jeffrson.ttf');
}
@font-face {
    font-family: 'Gabriele';
    src: url('/src/lib/fonts/gabriele_ribbon_fg/gabriele-l.ttf');
}




/* Elements */

* {
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    background: var(--dominant);
    color: var(--secondary);
    background-image:url('/src/img/bg.webp');
    animation: 16s linear infinite moveBg;
}
body {
    line-height: 1.3;
    letter-spacing: 2px;
    text-wrap: balance;
    font: 0.8rem 'Gabriele';
    padding: 1rem;
}
small {
    color: var(--dim);
}
img {
    width: 100%;
}
h1 {
    font-family: 'Jeffrson';
}
h2 {
    color: var(--accent);
    font-style: italic;
}
ul {
    text-align: left;
}
hr {
    border: none;
    margin: 10px auto;
    border: 1px solid var(--dim);
}
a {
    color: var(--accent);
}



/* Classes */

.full {
    height: 100dvh;
}
.flex {
    display: flex;
    flex-wrap: wrap;
}
.list_group {
    list-style: none;
}



/* More */

#copy {
    position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
	z-index: 10;
}



/* Animation */

@keyframes moveBg {
  0% {background-position:0 0;}
  100% {background-position:400px 400px;}
}