body {
    font-family: 'DejaVu Sans', sans-serif;
    /* light font */
    font-weight: 300;
    /*correction of default non-sense */
    margin: 0;
    padding: 0;
}

a {
    color: var(--links-color);
}

h1 {
    font-size: 2.5em;
    margin-bottom: 30px;
    margin-top: 18px;
}

h2.info1 {
    margin-top: 5%
}

h3 {
    font-weight: 300;
}

p,
span,
ul>li {
    line-height: 1.5;
}

.mail_icon {
    width: 40px;
    height: 30px;
    background-repeat: no-repeat;
    margin-top: 5px;
    display: inline-block;
    background-image: var(--mail-icon);
}

.settings_icon {
    width: 51px;
    height: 32px;
    background-repeat: no-repeat;
    margin-top: 18px;
    display: inline-block;
    background-image: var(--settings-icon);
}

/* links linking the website in the text */
h2>a {
    text-decoration: none;
    color: var(--links-color);
}

a:hover {
    text-decoration: underline;
}

main {
    /* solution for margin from the bottomm */
    margin-bottom: 40px !important;
}

/* --------------------------------HEADER CSS---------------------------------------------------------- */

.logo {
    height: 38px;
    width: 220px;
    display: block;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: var(--img-logo);
    float: left;
    margin-top: 8px;
    margin-left: 6px;
}

.logo>a {
    display: block;
    width: inherit;
    height: inherit;
}

.alt-logo {
    display: none;
}

.lang_button>a {
    font-weight: 400;
    text-decoration: none;
    font-size: 1.2em;
    margin-right: 1em;
    text-transform: uppercase;
    color: var(--text);
}

/*----------------------------NEW UNIFICATION CSS HEADER --------------------------------------------------*/


header {
    margin-bottom: 15px;
    background-color: var(--header-footer-services);
    z-index: 3;
}

/*-----------------CSS mobile header with hamburger -------------------------*/

@media only screen and (max-width: 1118px) {
    header {
        height: 64px;
    }
}

header div {
    overflow: hidden;
    background-color: var(--header-footer-services);
}

/* menu */
header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */
header .menu-icon {
    cursor: pointer;
    /* display: inline-block; this makes conflict with float right and it's not neccessary */
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

header .menu-icon .navicon {
    background: var(--text);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
    background: var(--text);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

header .menu-icon .navicon:before {
    top: 5px;
}

header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

header .menu-btn {
    display: none;
}

header .menu-btn:checked~.menu {
    max-height: 1000px;
}

header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}

.controls {
    margin: 12px auto;
}

@media (min-width: 1120px) {

    header {
        padding-top: 21px;
        padding-left: 25px;
        padding-right: 30px;
        padding-bottom: 6px;
        font-size: 20px;
        min-height: 102px;
        /*to keep up with menu height*/
    }

    .logo {
        margin-right: 30px;
    }

    header .menu {
        clear: none;
        max-height: none;
    }

    header .menu-icon {
        display: none;
    }

    .controls {
        float: right;
        margin-top: 15px;
        margin-right: 15px;
        display: inline;
    }

}

/* ----------------------------------------------DARKMODE-TOGGLE CSS ------------------------------------------------------------------ */

label.darkmode-label {
    width: 100px;
    height: 40px;
    position: relative;
    display: block;
    border-radius: 40px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 3px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    background-color: var(--toggle-bg);
}

label.darkmode-label:after {
    content: "";
    width: 36px;
    height: 36px;
    position: absolute;
    top: 2px;
    left: var(--label-left);
    background: linear-gradient(180deg, var(--gradient-bg1), var(--gradient-bg2));
    border-radius: 36px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    transform: var(--transformantion);
}

input#darkmode-toggle {
    width: 0;
    height: 0;
    visibility: hidden;
    display: none;
}

label.darkmode-label,
label.darkmode-label:after {
    transition: 0.3s
}

label.darkmode-label:active:after {
    width: 52px;
}

label.darkmode-label span.sun {
    display: block;
    width: 24px;
    height: 24px;
    background-image: var(--img-sun);
    transition: 0.3s;
    position: absolute;
    z-index: 1;
    left: 8px;
    top: 8px;
}

label.darkmode-label span.moon {
    display: block;
    width: 24px;
    height: 24px;
    background-image: var(--img-moon);
    transition: 0.3s;
    position: absolute;
    z-index: 1;
    left: 68px;
    top: 8px;
}

/* ---------------- CSS for color switching with variables ------------------------------------- */

/* tohle je nutný k přepínání když začnu na default světlý */
:root {
    --bg: white;
    --text: #212121;
    --header-footer-services: rgb(232, 232, 232);
    --toggle-bg: #ebebeb;
    --gradient-bg1: #ffcc89;
    --gradient-bg2: #d8860b;
    --label-left: 2px;
    --links-color: #ac6600;

    --img-logo: url('img/trustica-logo-black.svg');
    --img-arrow-up: url('img/up-arrow.svg');
    --img-sun: url('img/sun-white.svg');
    --img-moon: url('img/moon.svg');
    --mail-icon: url('img/email-icon.svg');
    --settings-icon: url('img/settings-line-icon.svg');
}

/* tohle mi nastaví tmavý z defaultu */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212121;
        --text: white;
        --header-footer-services: #3d3d3d;
        --toggle-bg: #242424;
        --gradient-bg1: #777;
        --gradient-bg2: #3a3a3a;
        --label-left: 98px;
        --transformantion: translateX(-100%);
        --links-color: #ff9800;

        --img-logo: url('img/trustica-logo-white.svg');
        --img-arrow-up: url('img/up-arrow-white.svg');
        --img-sun: url('img/sun.svg');
        --img-moon: url('img/moon-white.svg');
        --mail-icon: url('img/email-icon-darkmode.svg');
        --settings-icon: url('img/settings-line-icon-darkmode.svg');

    }
}

/*  ~ * - tohle říká všechny elementy v tom předchozím */
/* tohle asi zajišťuje přepínání, když začnu na světlým z defaultu */
#darkmode-toggle:checked~* {
    --bg: #212121;
    --text: white;
    --header-footer-services: #3d3d3d;
    --toggle-bg: #242424;
    --gradient-bg1: #777;
    --gradient-bg2: #3a3a3a;
    --label-left: 98px;
    --transformantion: translateX(-100%);
    --links-color: #ff9800;

    --img-logo: url('img/trustica-logo-white.svg');
    --img-arrow-up: url('img/up-arrow-white.svg');
    --img-sun: url('img/sun.svg');
    --img-moon: url('img/moon-white.svg');
    --mail-icon: url('img/email-icon-darkmode.svg');
    --settings-icon: url('img/settings-line-icon-darkmode.svg');
}

/* tohle asi zajišťuje přepínání, když začnu na tmavým z defaultu, tak mě přepne na bílou */
@media (prefers-color-scheme: dark) {
    #darkmode-toggle:checked~* {
        --bg: white;
        --text: #212121;
        --header-footer-services: rgb(232, 232, 232);
        --toggle-bg: #ebebeb;
        --gradient-bg1: #ffcc89;
        --gradient-bg2: #d8860b;
        --label-left: 2px;
        --transformantion: translateX(0%);
        --links-color: #ac6600;

        --img-logo: url('img/trustica-logo-black.svg');
        --img-arrow-up: url('img/up-arrow.svg');
        --img-sun: url('img/sun-white.svg');
        --img-moon: url('img/moon.svg');
        --mail-icon: url('img/email-icon.svg');
        --settings-icon: url('img/settings-line-icon.svg');
    }
}

.background {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
}

/*-------------------------------------- SUBPAGE CSS----------------------------------------------*/

.subpage {
    margin-left: 39px;
    margin-right: 39px;
}

@media only screen and (max-width: 1119px) {
    .subpage {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/*------------------------------------- RESPONSIVITY CSS --------------------------------------- */

* {
    box-sizing: border-box;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 700px) {

    /* For tablets: */

    .col-m-1-sub {
        width: 10%;
    }

    .col-m-9-sub {
        width: 75%;
    }

    .col-subpage-xl-right {
        width: 0%;
    }
}

@media only screen and (min-width: 1500px) {

    /* For desktop: */

    .col-2-sub {
        width: 16.66%;
    }

    .col-8-sub {
        width: 66.66%;
    }

    .col-subpage-xl-right {
        width: 16.66%;
    }
}

.flex-container-sub {
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 699px) {
    .flex-container-sub {
        flex-direction: column;
        /* this is neccessary for the columns */
    }
}

/* ----------------------------------------------- FOOTER CSS ---------------------------------------------------------------------- */

footer {
    padding: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    margin-top: auto;
    background: var(--header-footer-services);
}

footer img {
    float: right;
    margin-right: 20px;
}

#arrow-up {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
    margin-right: 15px;
    background-image: var(--img-arrow-up);
}