@font-face {
    font-family: 'Garet-Bold';
    src: url("../../fonts/bold.be2cbdd21709.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Garet-ExtraBold';
    src: url("../../fonts/extra_bold.837889a4fafc.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Garet-Heavy';
    src: url("../../fonts/heavy.3b37352867d4.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Garet-Regular';
    src: url("../../fonts/regular.c53343aafeb3.woff2") format('woff2');
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: 'Garet-Regular', sans-serif;
}

a {
    text-decoration: none;
    color: currentColor;
    cursor: grab;
}

.header-container,
.body-container ,
.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.header-container {
    background-color: rgba(82, 113, 255, 0.15);
}