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

* {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-dark);
    font-size: var(--display-sm);
    min-height: 100vh;
    background-color: #eeeeee;
}

:root {
    /**
                COLORS
    **/
    --color-primary: #a597e7;
    --color-secondary: #6c757d;
    --color-succes: #b5d56a;
    --color-info: #84bed6;
    --color-warning: #f0c24b;
    --color-danger: #ea7066;
    --color-light: #f8f9fa;
    --color-dark: #424242;
    --color-white: #fff;
    --color-cozy: #ea77ad;
    --color-transparent: transparent;
    --color-border: #dee2e6;
    --color-dark-transparent: rgba(0, 0, 0, 0.6);
    --color-light-transparent: rgba(255, 255, 255, 0.95);
    --color-warning-transparent: rgba(240, 194, 75, .75);
    --color-warning-transparent-light: rgba(240, 194, 75, .4);

    /**
                DISPLAY
    **/
    --display-xxs: 1rem;
    --display-xs: 1.4rem;
    --display-sm: 1.6rem;
    --display-md: 1.8rem;
    --display-lg: 2rem;
    --display-xl: 2.5rem;
    --display-xxl: 3rem;

    /**
                LINE HEIGHT
    **/
    --line-height-sm: 1rem;
    --line-height-md: 1.6rem;
    --line-height-lg: 3rem;

    /**
                DISTANCE
    **/
    --distance-0: 0rem;
    --distance-1: .25rem;
    --distance-2: .5rem;
    --distance-3: .75rem;
    --distance-4: 1rem;
    --distance-5: 1.25rem;
    --distance-6: 1.5rem;
    --distance-7: 1.75rem;
    --distance-8: 2rem;
    --distance-9: 2.25rem;
    --distance-10: 2.5rem;
    --distance-11: 2.75rem;
    --distance-12: 3rem;
    --distance-13: 3.25rem;
    --distance-14: 3.5rem;
    --distance-15: 3.75rem;
    --distance-16: 4rem;

    /**
                SHADOWS
    **/
    --shadow-small-light: .15rem .15rem 0 rgba(0, 0, 0, .1);
    --shadow-medium-dark: .20rem .20rem 0 rgba(0, 0, 0, .8);
    --shadow-medium-light: .1rem .1rem 0 rgba(0, 0, 0, .8);
    --shadow-large-light: .25rem .25rem 0 rgba(0, 0, 0, .1);

    /**
                BORDERS
    **/
    --border-xs-white: .1rem solid var(--color-white);
    --border-xs: .1rem solid var(--color-light);
    --border-sm: .1rem solid rgba(0, 0, 0, 0.25);
    --border-lg: .4rem solid var(--color-white);
    --border-radius-sm: .25rem;
    --border-succed: .2rem solid var(--color-succes)!important;
    --border-transparent: .1rem solid var(--color-transparent);
}

p {
    font-family: 'Lora', serif;
}

.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    letter-spacing: .05rem;
}

.ht,h1 {
    font-size: 3.5rem;
}


/**
            BG-COLOR
**/
.bg-primary, .btn-primary {
    background-color: var(--color-primary);
}

.bg-secondary, .btn-secondary {
    background-color: var(--color-secondary);
}

.bg-success, .btn-success {
    background-color: var(--color-succes);
}

.bg-info, .btn-info {
    background-color: var(--color-info);
}

.bg-warning, .btn-warning {
    background-color: var(--color-warning);
}

.bg-danger, .btn-danger {
    background-color: var(--color-danger);
}

.bg-light, .btn-light {
    background-color: var(--color-light);
}

.bg-dark,
.btn-dark {
    background-color: var(--color-dark);
}

.bg-white, .btn-white {
    background-color: var(--color-white);
}

.bg-cozy, .btn-cozy {
    background-color: var(--color-cozy);
}

.bg-transparent {
    background-color: var(--color-transparent);
}

.bg-dark-transparent {
    background-color: var(--color-dark-transparent);
}


.bg-light-transparent {
    background-color: var(--color-light-transparent);
}

.bg-warning-transparent {
    background-color: var(--color-warning-transparent);
}

.bg-warning-transparent-light {
    background-color: var(--color-warning-transparent-light);
}


/**
            TEXT-COLOR
**/
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-success {
    color: var(--color-succes);
}

.text-info {
    color: var(--color-info);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-light {
    color: var(--color-light);
}

.text-dark {
    color: var(--color-dark);
}

.text-white {
    color: var(--color-white);
}

.text-cozy {
    color: var(--color-cozy);
}


/**
            BORDER-BOTTOM-COLOR
**/
.border-color-primary {
    border-bottom-color: var(--color-primary)!important;
}

.border-color-secondary {
    border-bottom-color: var(--color-secondary)!important;
}

.border-color-success {
    border-bottom-color: var(--color-succes)!important;
}

.border-color-info {
    border-bottom-color: var(--color-info)!important;
}

.border-color-warning {
    border-bottom-color: var(--color-warning)!important;
}

.border-color-danger {
    border-bottom-color: var(--color-danger)!important;
}

.border-color-light {
    border-bottom-color: var(--color-light)!important;
}

.border-color-dark {
    border-bottom-color: var(--color-dark)!important;
}

.border-color-white {
    border-bottom-color: var(--color-white)!important;
}

.border-color-cozy {
    border-bottom-color: var(--color-cozy)!important;
}