:root {
    --em-red: #cf2e2e;
    --primary-color: #143E57;
    --secondary-color: #1a1a1a;
    --black: #191919;
    --light-grey: #ebebeb;
    --dark-grey: #bebebe;
    --text-color: var(--black);
    --main-font-family: "Heebo", sans-serif;
    --white: #ffffff;
    --root-padding: 16px;
    --border-radius: 8px;
    --background-color: #f9f9f9;
    --header-color: var(--white);
    --background-color-secondary: #ffffff;
    --company-logo: url("../images/deltae-10-logo-ee.svg");
    --header--gradient: 180deg, rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 100%;
}

/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --black: #191919;*/
/*    --light-grey: #141414;*/
/*    --dark-grey: #000;*/
/*    --text-color: #fff;*/
/*    --background-color: #141414;*/
/*    --header-color: #232527;*/
/*    --background-color-secondary: #1a1a1a;*/
/*    --company-logo: url("../images/horisontaalne_logo_dark.png");*/
/*    --header--gradient: 180deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 100%;*/
/*  }*/
/*}*/

* {
    box-sizing: border-box;
    font: var(--main-font-family);
    color: var(--text-color);
    margin: 0;
    font-family: var(--main-font-family);
}

body {
    background: var(--background-color-secondary);
    display: grid;
    grid-auto-flow: row;
    min-height: 100vh;
}

main {
    max-width: 1500px;
    margin: 0 auto;
    row-gap: 16px;
    display: grid;
    padding: 16px;
    width: 100%;
    align-content: center;
    grid-auto-columns: minmax(250px, 1300px);
    justify-content: center;
    grid-auto-rows: min-content min-content min-content min-content min-content min-content min-content;
    grid-template-areas:
        'logo'
        'heading'
        'dates'
        'register'
        'countdown'
        'contacts';
}

.contacts {
   margin-top: 4em;
}


@media (max-width: 992px) {
    header {
        width: 100%;
        margin: 0;
    }
}

.header {
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
}

.header .company-logo {
    content: var(--company-logo);
    height: 32px;
}

.header--block {
    background: var(--header-color);
    box-shadow: 0 2px 3px var(--light-grey);
}

.header--sticky {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--header-color);
    background: -moz-linear-gradient(var(--header--gradient));
    background: -webkit-linear-gradient(var(--header--gradient));
    background: linear-gradient(var(--header--gradient));
}

.header--gradient {
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--header-color);
    background: -moz-linear-gradient(var(--header--gradient));
    background: -webkit-linear-gradient(var(--header--gradient));
    background: linear-gradient(var(--header--gradient));
}

.row {
    margin: 0;
}

.footer {
    position: relative;
    background: #f7f9fb;
    align-self: end;
    border-top: 1px solid #e5e7f2;
    margin-top: 5em;
    padding: 0 16px;
}

.footer .footer__content {
    padding: 16px;
}

.stream-content {
    display: flex;
    flex: 2 1;
    gap: 16px;
    flex-wrap: wrap;
}

.stream-content__video {
    width: 100%;
    border-radius: var(--border-radius);
    height: 100%;
}

.stream-content__video .stream-content__video__info {
    background: var(--background-color-secondary);
    padding: 12px;
    border-radius: var(--border-radius);
}

.stream-content__video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    max-height: 80vh;
}

.stream-content__wrapper {
    scroll-snap-align: start;
}

.stream-content__speakers {
    background: var(--background-color-secondary);
    padding: 12px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 8px var(--dark-grey);
}

.stream-content__speakers .speakers__name {
    font-weight: 600;
}

.stream-content__speakers .speakers__company {
    color: var(--secondary-color);
}

.stream-content__chat {
    background: var(--light-grey);
    border-radius: var(--border-radius);
    width: 100%;
    box-shadow: 0 0 8px var(--dark-grey);
}

.stream-content__chat iframe {
    min-height: 450px;
    max-height: 80vh;
}

iframe {
    border-radius: var(--border-radius);
}

button.btn.btn-outline-primary {
    color: var(--white) !important;
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    outline-color: var(--primary-color) !important;
    font-weight: 700;
    border-radius: 4px;
    font-family: var(--main-font-family);
    font-size: 17px;
    line-height: 18px;
    padding: 16px 25px;
    -webkit-transition: 0.3s !important;
    -moz-transition: 0.3s !important;
    -ms-transition: 0.3s !important;
    -o-transition: 0.3s !important;
    transition: 0.3s !important;
}

button.btn.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-color) !important;
}

button.btn.btn-outline-primary:active,
button.btn.btn-outline-primary:hover {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}

.modal-content {
    background-color: var(--header-color);
}

.form-control {
    background-color: var(--background-color-secondary);
}

.form-control:focus {
    background-color: var(--background-color-secondary);
    color: var(--text-color);
}

.company-logo {
    height: 6em;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--company-logo);
}

.modal-header {
    border: none;
}

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

.countdown-title {
    font-size: 2rem;
    font-weight: 400;
}

.countdown-title__separator {
    height: 2px;
    width: 30%;
    margin: 0.7em auto;
    background-color: #20e4fd !important;
}
.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}