@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --codu-color: #7e3fee;
    --codu-border: #3b1983;
    --transition-time: 0.4s;
}

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
}
html {
    height: 100vh;
    overflow: hidden;
}
body {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

a {
    color: var(--codu-color) !important;
    transition: var(--transition-time) !important;
}
a:hover {
    color: var(--codu-border) !important;
    transition: var(--transition-time) !important;
}

.ha-100 {
    height: 100vh;
}
.w-80 {
    width: 80%;
}
.w-45 {
    width: 45%;
}
.text-justify {
    text-align: justify !important;
}
.scroll-snap {
    scroll-snap-stop: always;
    scroll-snap-align: center;
}
.premiu {
    transition: .2s;
    width: 25%;
    transform: rotate(14deg);
}
.premiu:hover {
    transition: .2s;
    transform: scale(1.5);
    z-index: 999;
}
.certificare {
    width: 10%;
}
.cursor-pointer {
    cursor: pointer;
}

.color-codu {
    color: white;
    text-shadow: 0px 0px 15px, var(--codu-color) 0px 0px 20px;
    font-weight: bold;
}
.bg-codu {
    background-color: var(--codu-border);
}
.bg-codu-white {
    background-color: #ffffff;
}
.btn-codu {
    background-color: var(--codu-color);
    color: white;
    border: 2px solid white;
    transition: var(--transition-time);
}
.btn-codu:hover {
    transition: var(--transition-time);
    background-color: white;
    color: var(--codu-color);
}
.btn-codu:focus {
    transition: var(--transition-time) !important;
    background-color: white !important;
    border: 2px solid white !important;
    color: var(--codu-color-1) !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem var(--codu-shadow-light) !important;
}
.btn-codu-inverse {
    background-color: transparent;
    color: var(--codu-color);
    border: 2px solid var(--codu-color);
    transition: var(--transition-time);
}
.btn-codu-inverse:hover {
    transition: var(--transition-time);
    background-color: var(--codu-color);
    color: white;
}
.btn-codu-inverse:focus {
    transition: var(--transition-time) !important;
    background-color: var(--codu-color) !important;
    border: 2px solid var(--codu-color) !important;
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem var(--codu-border) !important;
}
.underline-codu {
    text-transform: uppercase;
    line-height: 1;
    font-family: 'Work Sans', sans-serif;
    font-weight: 900;
    position: relative;
    &:after {
      --deco-height: 0.3125em;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(var(--deco-height) * -0.625);
      height: var(--deco-height);
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%237e3fee' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
      background-size: auto 100%;
      background-repeat: round;
      background-position: 0em;
    }
}

input, textarea {
    transition: var(--transition-time) !important;
    border: 2px solid var(--codu-color) !important;
    color: var(--codu-color) !important;
}
input:active, input:hover, textarea:active, textarea:hover {
    transition: var(--transition-time) !important;
    border: 2px solid var(--codu-border) !important;
    color: var(--codu-border) !important;
    box-shadow: 0 0 0 0.2rem var(--codu-border) !important;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
::placeholder {
    color: var(--codu-color) !important;
    opacity: 1;
}
::-ms-input-placeholder { 
    color: var(--codu-color) !important;
}
input:focus, textarea:focus {
    transition: var(--transition-time) !important;
    border: 2px solid var(--codu-color) !important;
    background: var(--codu-color) !important;
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem var(--codu-border) !important;  
}
input:focus::placeholder, textarea:focus::placeholder {
    transition: var(--transition-time);
    color: white !important;
}
@media (max-width: 992px) {
    .d-flex:not(.flex-row) {
        flex-direction: column;
    }
    .w-45 {
        width: 100% !important;
    }
    .w-25 {
        width: 100% !important;
    }
    .w-50 {
        width: 100% !important;
    }
    .w-75 {
        width: 90% !important;
    }
    .premiu {
        width: 100%;
    }
    .certificare {
        width: 30%;
    }
    .h-mb-75 {
        height: 75vh !important;
    }
    .d-mb-rev {
        flex-direction: column-reverse !important;
    }
    .lg-mt--1 {
        margin-top: 0 !important;
    }
}

kbd {
    display: inline-block;
    color: #24e65b;
    text-shadow: 0 0 5px #C8C8C8;
}
.lg-mt--1 {
    margin-top: -25px !important;
}