@import "tailwindcss";

@font-face {
    font-family: Roboto-medium;
    src: url("/fonts/Roboto/Roboto-Medium.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-regular;
    src: url("/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-light;
    src: url("/fonts/Roboto/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-thin;
    src: url("/fonts/Roboto/Roboto-Thin.ttf") format("truetype");
}

.roboto-medium {
    font-family: Roboto-medium;
}

.roboto-regular {
    font-family: Roboto-regular;
}

.roboto-light {
    font-family: Roboto-light;
}

.roboto-thin {
    font-family: Roboto-thin;
}


.aspect-ratio-square {
    position: relative;
    width: 100%;
}

.aspect-ratio-square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.aspect-ratio-square-g::before {
    content: '';
    display: block;
    padding-top: 50%;
}

.aspect-ratio-square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.splash-screen{
    position: fixed;
    z-index: 100;
}

:root {
    --background: #ffffff;
    --foreground: #171717;
}


.nav-link {
    position: relative;
}


.nav-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: red;
    opacity: 0;
    transition: opacity 0.3s ease;

}

.nav-link:hover::after {
    opacity: 1;
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}