@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");

@font-face {
    font-family: "Anta";
    src: url("../assets/fonts/Anta-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Jura";
    src: url("../assets/fonts/Jura-Variable.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
}

@font-face {
    font-family: "Josefin Sans";
    src: url("../assets/fonts/JosefinSans-Variable.ttf") format("truetype");
    font-weight: 100 700;
    font-style: normal;
}

:root {
    --page-bg: #d7d7d7;
    --panel-bg: #262e34;
    --panel-border: #323a40;
    --content-max-width: 1440px;
    --accent: #8ebfe0;
    --accent-soft: rgba(142, 191, 224, 0.14);
    --text-main: #f4efe5;
    --text-soft: #d0d4d8;
    --text-muted: #aeb6bd;
    --text-dark: #2f373d;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--text-main);
    font-family: "Montserrat", sans-serif;
    overflow-x: clip;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

a:hover {
    opacity: 0.82;
    color: #ffffff;
}

button,
input,
textarea {
    font: inherit;
}