/* 
    Google FONTS 
    ==============================================
    Standards for text weights:
        Thin            100     
        Extra Light     200
        Light           300
        Regular         400
        Medium          500
        Semi-Bold       600
        Bold            700
        Black           900    

    DEFINED BREAKPOINTS IN BS4 :root { var.... }
    ==============================================
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;

*/
/* @import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,900&display=swap'); */
/* 
    Google font 'Yantramanav' 
    comes in: Thin (100 - unreadable), Light(300), Regular(400), Medium(500), Bold(700), Black(900)
*/
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,900&display=swap');

* {
    box-sizing: border-box;
  }

:root{
    --r2-color: #E71B6A;
    --r2-body-width: 1600px;
    --r2-content-width: 1000px;
    --text-color:#686b7d;
    
    /* responsive breakpoints */
    --r2-breakpoint-xs: 0;
    --r2-breakpoint-sm: 576px;
    --r2-breakpoint-md: 768px;
    --r2-breakpoint-lg: 992px;
    --r2-breakpoint-xl: 1200px;
}

html{
    scroll-behavior: smooth;
}  

body{
    position: relative;
    padding: 0;
    margin: 0;
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    color: #333;
    min-height: 100vh;
    max-width: var(--r2-body-width);
    /* background-color: hsl(90, 2%, 18%); */
    /* background-color: #CBCCC4; */
    /* background-color: #9AA69F; */
    background-color: #C4C7C0;
}

.display-none{ display:none;}

/* 
    Simple generic hover effects
*/
.grow-5 { transition: all 200ms ease-in-out;}
.grow-5:hover {transform: scale(1.05);}
.grow-10 { transition: all 200ms ease-in-out;}
.grow-10:hover {transform: scale(1.1);}
.grow-20 { transition: all 200ms ease-in-out;}
.grow-20:hover {transform: scale(1.2);}
.hover-shadow:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.32), 0 6px 12px rgba(0, 0, 0, 0.32);
}
/* Wiggle effect (stops on hover) */
@keyframes wiggle {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    85% { transform: rotate(5deg); }
    95% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.wiggle {
    display: inline-block;
    animation: wiggle 2.5s infinite;
}
.wiggle:hover {
    animation: none;
}

/* 
    Generic classes
*/
.flex-row-center{
    display:flex;
    align-items: center;
}
.flex-center-center{
    display:flex;
    justify-content: center;
    align-items: center;
}

.ml-1 { margin-left: .5em;}
.ml-2 { margin-left: 1em;}
.ml-3 { margin-left: 1.5em;}
.ml-4 { margin-left: 2em;}
.mr-1 { margin-right: .5em;}
.mr-2 { margin-right: 1em;}
.mr-3 { margin-right: 1.5em;}
.mr-4 { margin-right: 2em;}
.mx-1 { margin-left: .5em; margin-right: .5em;}
.mx-2 { margin-left: 1em; margin-right: 1em;}
.mx-3 { margin-left: 1.5em; margin-right: 1.5em;}
.mx-4 { margin-left: 2em; margin-right: 2em;}

/* remove text-decoration for all anchor links */
a:hover, a:visited, a:link, a:active{text-decoration: none;color:white;} 


.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

/*
    Badges
*/
.badge{
    --background: hsl(0 0% 30%);

    background-color: var(--background);
    border-radius: .3em;
    padding:.2em .5em;
}
.badge.disabled{
    opacity:.3;
}

/*
    MARKER-HIGHLIGHT
    uses svgbox brush
*/
mark {
    margin: 0 -0.4em;
    padding: 0.1em 0.4em;
    border-radius: 0.8em 0.3em;
    background: transparent;
    background-image: linear-gradient(
            to right,
            rgba(255, 225, 0, 0.1),
            rgba(255, 225, 0, 0.7) 4%,
            rgba(255, 225, 0, 0.3)
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
mark.green {
    background-image: linear-gradient(
            to right,
            rgba(255, 225, 0, 0.1),
            rgba(109, 250, 204, 0.7) 4%,
            rgba(109, 250, 204, 0.3)
    );
}