/* You can add global styles to this file, and also import other style files */
:root {
    --background-color: white;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url(../src/assets/fonts/GlacialIndifference-Regular.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Glacial Indifference Bold';
    src: url(../src/assets/fonts/GlacialIndifference-Bold.otf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Glacial Indifference Italic';
    src: url(../src/assets/fonts/GlacialIndifference-Italic.otf);
    font-weight: normal;
    font-style: italic;
}

body, html {

    width: 99%;
    height: 99%;
    
    background-color: var(--background-color);
    font-family: 'Glacial Indifference', sans-serif;

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
    
    @-moz-document url-prefix() {
        input[type=number] {
            -moz-appearance: textfield;
        }
    }

    input {
        font-family: 'Glacial Indifference', sans-serif;
        font-size: 20px;
    }

    input::placeholder {
        opacity: 0.30;
    }

    textarea {
        font-family: 'Glacial Indifference', sans-serif;
        font-size: 20px;
    }

    textarea::placeholder {
        opacity: 0.30;
    }

    select {
        font-family: 'Glacial Indifference', sans-serif;
        font-size: 20px;
    }
}

.isActive::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    animation: 1s effect infinite;
    z-index: 2;
    pointer-events: none;
}

$highlight-color: #009b00;
@keyframes effect {
    0%, 100% {
        box-shadow: inset 0 0 10px $highlight-color;
    }
    50% {
        box-shadow: inset 0 0 20px $highlight-color;
    }
}

.border::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 1px solid black;
}