@keyframes special-button {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(379deg);
    }
}

html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.kt-flex {
    display: flex;

    &.kt-flex-column {
        flex-direction: column;
    }

    &.kt-flex-row {
        flex-direction: row;
    }

    &.kt-flex-align-center {
        align-items: center;
    }

    &.kt-flex-space-between {
        justify-content: space-between;
    }

    &.kt-flex-center{
        justify-content: center;
    }

    &.kt-flex-wrap {
        flex-wrap: wrap;
    }

    &.kt-flex-no-wrap {
        flex-wrap: nowrap;
    }

    .kt-flex-spacer {
        flex-grow: 1;
    }
}

.kt-header {
    position: fixed;
    z-index: 1;
    height: 60px;
    width: 100vw;

    &.kt-header-transparent {
        background: none;
        color: #000000;
        transition: 0.5s;
        
        .kt-header-button {
            color: #000000;

            &:hover {
                color: #2c2c2c;
            }
        }
    }
    
    &.kt-header-solid {
        background-color: #1c1c1c;
        color: #e1e1e1;
        transition: 0.5s;
        
        .kt-header-button {
            color: #e1e1e1;
            
            &:hover {
                color: #b1b1b1;
            }
        }
    }
    
    .kt-header-button {
        position: relative;
        background: none;
        font-size: 1rem;
        border: none;
        height: calc(1rem + 10px);
        cursor: pointer;
        text-decoration: none;

        &::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #cc4331;
            height: 2.5px;
            width: 0px;
            transition: 0.25s;
        }
        
        &:hover {
            &::after {
                content: '';
                width: 100%;
                transition: 0.25s;
            }

            transition: 0.25s;
        }
    }

    .kt-header-title {
        font-size: 1.25rem;
        font-weight: bold;
    }
}

.kt-page-content {
    position: relative;
    height: 100%;
    min-height: 98vh;
    width: 100vw;
}

.kt-footer {
    color: #1c1c1c;
    width: 100%;
    background-color: #f1e1dd;
    border-top: #8c8c8c4F solid 1px;

    .kt-footer-content {
        min-height: 60px;

        a {
            color: #1c1c1c;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: bold;
            cursor: pointer;
        }

    }
}