@font-face {
    font-family: "Fredoka-Light";
    src: url("../fonts/Fredoka-Light.ttf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Fredoka-Regular";
    src: url("../fonts/Fredoka-Regular.ttf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Fredoka-Medium";
    src: url("../fonts/Fredoka-Medium.ttf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Fredoka-Bold";
    src: url("../fonts/Fredoka-Bold.ttf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-Light";
    src: url("../fonts/Outfit-Light.ttf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-Regular";
    src: url("../fonts/Outfit-Regular.ttf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-Medium";
    src: url("../fonts/Outfit-Medium.ttf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-SemiBold";
    src: url("../fonts/Outfit-SemiBold.ttf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-Bold";
    src: url("../fonts/Outfit-Bold.ttf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Outfit-Black";
    src: url("../fonts/Outfit-Black.ttf") format("opentype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "Sora-Light";
    src: url("../fonts/Sora-Light.ttf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Sora-Regular";
    src: url("../fonts/Sora-Regular.ttf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Sora-SemiBold";
    src: url("../fonts/Sora-SemiBold.ttf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Sora-Medium";
    src: url("../fonts/Sora-Medium.ttf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Sora-Bold";
    src: url("../fonts/Sora-Bold.ttf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.skeleton-screen {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}
@keyframes shimmer {
    from {
        background-position: -200% 0;
    }
    to {
        background-position: 200% 0;
    }
}