:root {
    --text-color: #F2EFE7;
    --text-color-rgb: 242, 239, 231;
    --primary-dark: #006A71;
    --primary-dark-rgb: 0, 106, 113;
    --primary: #48A6A7;
    --primary-rgb: 72, 166, 167;
    --primary-light: #9ACBD0;
    --primary-light-rgb: 154, 203, 208;
    --primary-highlight: #47ebda;
    --primary-highlight-rgb: 71, 235, 218;
    --primary-background: #00090A;
    --primary-background-rgb: 0, 9, 10;
    --primary-background-card: #000f11;
    --primary-background-card-rgb: 0, 15, 17;

    --transition-sharp: cubic-bezier(0, 1, 0.5, 1);
    --transition-switcher: cubic-bezier(0.2, 0.5, 0.25, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    background-color: var(--primary-background);
    color: var(--text-color);

    margin: 0;
    padding: 0;

    height: 100vh;
    width: 100vw;

    overflow-x: hidden;
}

section {
    min-height: 100vh;
    width: 100%;
}

.color-gradient {
    background: linear-gradient(130deg, var(--text-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color-gradient-primary {
    background: linear-gradient(130deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon {
    display: block;

    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--text-color);
    
    width: 100%;
    height: 100%;
}

.reveal {
    transition: 0.2s ease-out;
}
.reveal-left {
    opacity: 0;
    transform: translateX(-100px);
}
.reveal-right {
    opacity: 0;
    transform: translateX(100px);
}
.reveal-up {
    opacity: 0;
    transform: translateY(100px);
}
.reveal.active {
    opacity: 1;
    transform: none;
}

@media (max-width: 768px) {
    body {
        font-size: 0.8rem;
    }
    section {
        margin-bottom: 60px;
    }
}