/*
Theme Name:   Lectoloop Theme
Description:  Divi Child Theme
Author:       Anton Bujanowski
Author URI:   https://lectoloop.io
Template:     Divi
Version:      1.0.0
*/
@import url("https://use.typekit.net/urw2snn.css");

:root {
    /* color */
    --accent-050: hsl(216 100% 95%);
    --accent-100: hsl(216 100% 90%);
    --accent-200: hsl(216 100% 80%);
    --accent-300: hsl(216 100% 70%);
    --accent-400: hsl(206 100% 65%);
    --accent-500: hsl(216 100% 55%);
    --accent-600: hsl(217 100% 50%);
    --accent-700: hsl(218 100% 42%);
    --accent-800: hsl(219 100% 32%);
    --accent-900: hsl(218 100% 20%);

    --ink-050: hsl(214 47% 97%);
    --ink-100: hsl(214 32% 91%);
    --ink-200: hsl(213 27% 84%);
    --ink-300: hsl(215 20% 65%);
    --ink-400: hsl(215 16% 47%);
    --ink-500: hsl(215 19% 35%);
    --ink-600: hsl(215 25% 27%);
    --ink-700: hsl(217 33% 17%);
    --ink-800: hsl(215, 61%, 11%);
    --ink-900: hsl(218, 80%, 4%);
    
    --system-disabled-050: hsl(0 0 98%);
    --system-disabled-100: hsl(240 5% 96%);
    --system-disabled-200: hsl(240 6% 90%);
    --system-disabled-300: hsl(213 27% 84%);
    --system-disabled-400: hsl(240 5% 65%);
    --system-disabled-500: hsl(215 20% 65%);
    --system-disabled-600: hsl(240 4% 46%);
    --system-disabled-700: hsl(240 5% 34%);
    --system-disabled-800: hsl(240 4% 16%);
    --system-disabled-900: hsl(240 6% 10%);
    
    --system-error-050: hsl(0 86% 97%);
    --system-error-100: hsl(0 93% 94%);
    --system-error-200: hsl(0 94% 82%);
    --system-error-300: hsl(0 94% 82%);
    --system-error-400: hsl(0 91% 71%);
    --system-error-500: hsl(0 84% 60%);
    --system-error-600: hsl(0 72% 51%);
    --system-error-700: hsl(0 74% 42%);
    --system-error-800: hsl(0 70% 35%);
    --system-error-900: hsl(0 63% 31%);
    
    --system-info-050: hsl(204 100% 97%);
    --system-info-100: hsl(204 94% 94%);
    --system-info-200: hsl(201 94% 86%);
    --system-info-300: hsl(199 95% 74%);
    --system-info-400: hsl(198 93% 60%);
    --system-info-500: hsl(199 89% 48%);
    --system-info-600: hsl(200 98% 39%);
    --system-info-700: hsl(201 96% 32%);
    --system-info-800: hsl(201 90% 27%);
    --system-info-900: hsl(202 80% 24%);
    
    --system-success-050: hsl(138 77% 97%);
    --system-success-100: hsl(141 84% 93%);
    --system-success-200: hsl(141 79% 85%);
    --system-success-300: hsl(142 77% 73%);
    --system-success-400: hsl(142 69% 58%);
    --system-success-500: hsl(142 71% 45%);
    --system-success-600: hsl(142 76% 36%);
    --system-success-700: hsl(142 72% 29%);
    --system-success-800: hsl(143 64% 24%);
    --system-success-900: hsl(144 61% 20%);
    
    --system-warning-050: hsl(48 100% 96%);
    --system-warning-100: hsl(48 97% 89%);
    --system-warning-200: hsl(48 98% 77%);
    --system-warning-300: hsl(46 97% 65%);
    --system-warning-400: hsl(43 96% 56%);
    --system-warning-500: hsl(38 92% 50%);
    --system-warning-600: hsl(32 95% 44%);
    --system-warning-700: hsl(26 90% 37%);
    --system-warning-800: hsl(23 82% 31%);
    --system-warning-900: hsl(22 78% 26%);
    
    --text-dark-text: var(--ink-800);
    --text-muted-text: var(--ink-300);

    --font-family: "neuzeit-grotesk", sans-serif;
    --font-size-base: 16px;

    --font-weight-base: 400;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --letter-spacing-base: 0.01em;

    --breakpoint-xs: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1400px;

    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 80vw;

    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    --spacing-xs: var(--spacing-2);
    --spacing-sm: var(--spacing-3);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);

    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    --transition-fast: 220ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    --background-color: var(--ink-050);
    --color-grid: hsl(214 32% 91% / 0.6);

    --btn-primary-def-bg: var(--accent-500);
    --btn-primary-def-color: var(--ink-050);
    --btn-primary-hover-bg: var(--accent-800);
    --btn-primary-hover-color: var(--ink-050);
    --btn-primary-active-bg: var(--accent-700);
    --btn-primary-active-color: var(--ink-050);
    --btn-primary-disabled-bg: var(--system-disabled-300);
    --btn-primary-disabled-color: var(--system-disabled-500);

    --btn-secondary-def-bg: transparent;
    --btn-secondary-def-color: var(--ink-500);
    --btn-secondary-hover-bg: var(--ink-300);
    --btn-secondary-hover-color: var(--ink-800);
    --btn-secondary-active-bg: var(--ink-200);
    --btn-secondary-active-color: var(--btn-secondary-def-color);
    --btn-secondary-disabled-bg: transparent;
    --btn-secondary-disabled-color: var(--btn-secondary-def-color);

    --highlight-color: var(--accent-500);

    --header-background-color: hsla(216 100% 80% / 0.2);
}

[data-theme="dark"] {
    /* color */
    --accent-050: hsl(218 100% 20%);
    --accent-100: hsl(219 100% 32%);
    --accent-200: hsl(218 100% 42%);
    --accent-300: hsl(206 100% 75%);
    --accent-400: hsl(206 100% 65%);
    --accent-500: hsl(216 100% 55%);
    --accent-600: hsl(217 100% 50%);
    --accent-700: hsl(218 100% 42%);
    --accent-800: hsl(219 100% 32%);
    --accent-900: hsl(218 100% 20%);
    
    --ink-050: hsl(210 36% 96%);
    --ink-100: hsl(207 22% 90%);
    --ink-200: hsl(215 51% 17%);
    --ink-300: hsl(215 20% 65%);
    --ink-400: hsl(215 16% 47%);
    --ink-500: hsl(215 19% 35%);
    --ink-600: hsl(215 25% 27%);
    --ink-700: hsl(217 33% 17%);
    --ink-800: hsl(215 60% 11%);
    --ink-900: hsl(219 81% 4%);
    
    --system-disabled-050: hsl(240 10% 4%);
    --system-disabled-100: hsl(240 6% 10%);
    --system-disabled-200: hsl(240 4% 16%);
    --system-disabled-300: hsl(215 19% 35%);
    --system-disabled-400: hsl(240 5% 34%);
    --system-disabled-500: hsl(215 20% 65%);
    --system-disabled-600: hsl(240 4% 46%);
    --system-disabled-700: hsl(215 20% 65%);
    --system-disabled-800: hsl(240 6% 90%);
    --system-disabled-900: hsl(240 5% 96%);
    
    --system-error-050: hsl(0 75% 15%);
    --system-error-100: hsl(0 63% 31%);
    --system-error-200: hsl(0 70% 35%);
    --system-error-300: hsl(0 74% 42%);
    --system-error-400: hsl(0 91% 71%);
    --system-error-500: hsl(0 84% 60%);
    --system-error-600: hsl(0 72% 51%);
    --system-error-700: hsl(0 74% 42%);
    --system-error-800: hsl(0 70% 35%);
    --system-error-900: hsl(0 86% 97%);
    
    --system-info-050: hsl(204 80% 16%);
    --system-info-100: hsl(202 80% 24%);
    --system-info-200: hsl(201 90% 27%);
    --system-info-300: hsl(201 96% 32%);
    --system-info-400: hsl(198 93% 60%);
    --system-info-500: hsl(199 89% 48%);
    --system-info-600: hsl(200 98% 39%);
    --system-info-700: hsl(201 96% 32%);
    --system-info-800: hsl(201 90% 27%);
    --system-info-900: hsl(204 100% 97%);
    
    --system-success-050: hsl(166 91% 9%);
    --system-success-100: hsl(164 86% 16%);
    --system-success-200: hsl(163 88% 20%);
    --system-success-300: hsl(163 94% 24%);
    --system-success-400: hsl(160 84% 39%);
    --system-success-500: hsl(160 84% 39%);
    --system-success-600: hsl(161 94% 30%);
    --system-success-700: hsl(163 94% 24%);
    --system-success-800: hsl(163 88% 20%);
    
    --system-success-900: hsl(152 81% 96%);
    --system-warning-050: hsl(21 92% 14%);
    --system-warning-100: hsl(22 78% 26%);
    --system-warning-200: hsl(23 82% 31%);
    --system-warning-300: hsl(26 90% 37%);
    --system-warning-400: hsl(43 96% 56%);
    --system-warning-500: hsl(38 92% 50%);
    --system-warning-600: hsl(32 95% 44%);
    --system-warning-700: hsl(26 90% 37%);
    --system-warning-800: hsl(23 82% 31%);
    --system-warning-900: hsl(48 100% 96%);
    
    --text-dark-text: var(--ink-100);
    --text-muted-text: var(--ink-500);
 
    --background-color: var(--ink-800);
    --color-grid: hsl(215 51% 17% / 0.5);

    --btn-primary-def-bg: var(--accent-700);
    --btn-primary-def-color: var(--ink-050);
    --btn-primary-hover-bg: var(--accent-500);
    --btn-primary-hover-color: var(--ink-050);
    --btn-primary-active-bg: var(--accent-400);
    --btn-primary-active-color: var(--ink-050);
    --btn-primary-disabled-bg: var(--system-disabled-300);
    --btn-primary-disabled-color: var(--system-disabled-500);

    --btn-secondary-def-bg: transparent;
    --btn-secondary-def-color: var(--ink-050);
    --btn-secondary-hover-bg: var(--ink-500);
    --btn-secondary-hover-color: var(--ink-800);
    --btn-secondary-active-bg: var(--ink-200);
    --btn-secondary-active-color: var(--btn-secondary-def-color);
    --btn-secondary-disabled-bg: transparent;
    --btn-secondary-disabled-color: var(--btn-secondary-def-color);

    --highlight-color: var(--accent-500);

    --header-background-color: hsla(216 100% 80% / 0.2);
}

html, body{
    background-color: var(--background-color);
}
body{
    font-family: var(--font-family);
    font-weight:normal;
    font-size:16px;
    color: var(--text-dark-text);
}
a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var{
    font-size: inherit;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-base);
}

h1,.h1{
    font-size: 6.75rem;
}
h2,.h2{
    font-size: 4.25rem;
}
h3,.h3{
    font-size: 2.625rem;
}
h4,.h4, h5,.h5, h6,.h6{
    font-size: 1.625rem;
}

p{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
}

.highlight{
    color: var(--highlight-color);
}

.muted-text{
    color: var(--text-muted-text);
}
.et_pb_row{
    max-width:1400px;
}

#main-header{
    width:100% !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

.container.et_menu_container{
    background-color:  var(--header-background-color) !important;
    max-width:1400px;
    padding: var(--spacing-1) var(--spacing-8);
    border-radius: var(--radius-full) !important;
}

.et_pb_blurb_content .et-pb-icon{
    color: var(--highlight-color) !important;
}

.et_pb_blurb_container h4.et_pb_module_header{
    padding-bottom:0;
}
.et_pb_blurb_position_left .et_pb_blurb_container, .et_pb_blurb_position_right .et_pb_blurb_container{
    vertical-align:middle;
}

.et_contact_bottom_container {
    float: none;
    text-align: center;
    margin: 2rem 0 0 12px !important;
    display: block !important;
}
.et_fixed_nav #main-header.et-fixed-header {
    position: fixed;
    background-color:#575756;
}

.btn-primary{
    background-color: var(--btn-primary-def-bg);
    color: var(--btn-primary-def-color);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
}
.btn-primary:hover{
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-color);
}
.btn-primary:active{
    background-color: var(--btn-primary-active-bg);
    color: var(--btn-primary-active-color);
}

@media screen and (min-width:768px){
    .et_contact_bottom_container {
    text-align:left !important;
} 
}

.clickableImage:hover{
    cursor:pointer;
}