/* Created by Falko Schmidt, 2024, Bundesanstalt Technisches Hilfswerk (THW), GERMANY */
/* ================================================================================== */
/* COLOR DEFINITIONS */
/* ================================================================================== */
:root {
    /* BLUE colors */
    --SYN_SkyBlue: #61bdeb;
    --SYN_Blue: #0068b1;
    --SYN_MidnightBlue: #003d73;

    /* RED colors */
    --SYN_Plum: #bf579d;
    --SYN_SoftPlum: #d28abb;
    --SYN_MidnightPlum: #871f68;

    /* Others */
    --SYN_White: #ffffff;
    --SYN_Transparent: rgba(0, 0, 0, 0);
}


/* ================================================================================== */
/* BACKGROUND IMAGE */
/* ================================================================================== */
#bg-img-div {
    background-image: url('/synergise-training-home-resources/images/synergise-bg-black.png');
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* ================================================================================== */
/* CIRCLE OVERLAYS
/* ================================================================================== */
.svg_circle {
    position: absolute;
    z-index: 1;
    height: 100%;
}


/* ================================================================================== */
/* BUTTONS */
/* ================================================================================== */
#training_login_btn,
#browse_btn {
    color: var(--SYN_White) !important;
    border-color: var(--SYN_SkyBlue) !important;
    border-width: medium;
    font-family: "Figtree", sans-serif;
    font-weight: 800;
    font-style: italic;
}

#imprint_btn {
    color: var(--SYN_SkyBlue) !important;
    border-color: var(--SYN_SkyBlue) !important;
    border-width: medium;
    font-family: "Figtree", sans-serif;
    font-weight: 800;
    font-style: italic;
}

#training_login_btn:hover,
#imprint_btn:hover,
#browse_btn:hover {
    color: var(--SYN_Plum) !important;
    background-color: var(--SYN_Transparent) !important;
    border-color: var(--SYN_Plum) !important;
}


/* ================================================================================== */
/* MAIN DIV, WHICH CONTAINS ALL ELEMENTS */
/* ================================================================================== */
#main_div {
    height: 100vh;
    border: none;
}


/* ================================================================================== */
/* CENTER DIV CONTAINING LOGO AND BUTTONS */
/* ================================================================================== */
#mid-div {
    padding: 20px 40px;
    z-index: 42;
}


/* ================================================================================== */
/* SEPARATION LINE */
/* ================================================================================== */
hr {
    color: var(--SYN_SkyBlue);
    height: 2px;
    opacity: 1;
}

/* ================================================================================== */
/* WRAPS FOR SMARTPHONE (SCREEN WIDTH < 768px) */
/* ================================================================================== */
@media only screen and (max-width: 767px) {
    #mid-div {
        width: 100vw;
    }

    .svg_circle {
        display: none;
    }
}