@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root
{
    --primary-text-color: #fff;
    --primary-color: #5d378d;
    --primary-color-200: #7D55FF; 
    --secondary-color: #FF8C42;

    --success-color: #119E86;
    --danger-color: #dc3545;
    --warning-color: #d6a811;
}

body
{
    font-family: 'Nunito', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--primary-text-color);
    
    background: linear-gradient(329deg, #8e63f3, #5c2463, #63b5ec);
    background-size: 600% 600%;

    -webkit-animation: BG_GradientAnimation 29s ease infinite;
    -moz-animation: BG_GradientAnimation 29s ease infinite;
    animation: BG_GradientAnimation 29s ease infinite;
    
}

.main 
{
    display: grid;
    grid-template-rows: 1fr;
    min-height: 100vh;

    align-items: center;
    align-content: center;
    text-align: center;
}

.teaser-badge
{
    border-top: 1px solid hsla(0, 0%, 100%, 0.2);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
    padding: 2em;
    background-color: hsla(0, 0%, 100%, 0.1); 
}

/* body::before
{
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.13;
    background-image: url(../img/test02.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    background-attachment: fixed;
} */

@-webkit-keyframes BG_GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes BG_GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes BG_GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

h1, h2, h3, h4, h5, h6
{
    font-weight: 600;
}

h4, h5
{
    color: var(--secondary-color);
}

.line-right
{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}


.line-right::after
{
    content: "";
    border-top: 1px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
    margin: 0 0 0 20px;
    color: rgba(255, 255, 255, .35);
}


.nav a
{
    color: #fff;
}

.nav a:hover
{
    /* color: #040303; black */
    /* color: #C3F73A; neongreen */
    color: #FF8C42; /* orange */
   /* color: #40C9A2; mint */
   /* color: #11B5E4; cyan */
}



/*BOOTSTRAP BUTTONS*/

.btn
{
    --bs-btn-padding-x: 1.9rem;
    --bs-btn-border-radius: 2px;
    position: relative;
    overflow: hidden;    
}


.btn-primary 
{
    background-color: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, 0.3);
    --bs-btn-hover-bg: var(--primary-color-200);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-primary
{
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}

.btn-secondary
{
    background-color: rgba(255, 138, 66, 0.5);
    border-color: #FF8C42;
    --bs-btn-hover-bg: hsla(23, 60%, 43%, 0.5);
    --bs-btn-hover-border-color: #FF8C42;
}

.btn-outline-secondary
{
    color: #FF8C42;
    border-color: #FF8C42;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 138, 66, 0.5);
    --bs-btn-hover-border-color: #FF8C42;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FF8C42;
    --bs-btn-active-border-color: #FF8C42;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgba(255, 138, 66, 0.6);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(255, 138, 66, 0.6);
    --bs-gradient: none;
}

.btn-outline-light
{
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-success
{
    background-color: var(--success-color);
    border-color: #61CEBB;  /*LIGHTEN*/
    --bs-btn-hover-bg: #0d7765; /*DARKEN*/
    --bs-btn-hover-border-color: #61CEBB;  /*DARKEN*/
}

.btn-danger
{
    background-color: var(--danger-color);
    border-color: #ff7f8c;  /*LIGHTEN*/
    --bs-btn-hover-bg: #9b1e2a; /*DARKEN*/
    --bs-btn-hover-border-color: #ff7f8c;  /*DARKEN*/
}

.btn-warning
{
    color: var(--primary-text-color);
    --bs-btn-hover-color: var(--primary-text-color);
    background-color: var(--warning-color);
    border-color: #ffda5e;  /*LIGHTEN*/
    --bs-btn-hover-bg: #a18115; /*DARKEN*/
    --bs-btn-hover-border-color: #ffda5e;  /*DARKEN*/
}

.btn-info
{
    color: var(--primary-text-color);
    --bs-btn-hover-color: var(--primary-text-color);
    background: #0096c4;
    border-color: #75e5fc; /*LIGHTEN*/
    --bs-btn-hover-bg: #026e8f; /*DARKEN*/
    --bs-btn-hover-border-color: #75e5fc;  /*DARKEN*/
}

.btn-light
{
    border-color: rgba(255, 255, 255, 0.3);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3); 
}

.btn-dark
{
    border-color: #8d8d8d;
    --bs-btn-hover-border-color: #8d8d8d;  
}