/* General Font config */
@font-face {
    font-family: "terminator";
    src: url(/public/fonts/terminator-real-nfi.otf);
}

@font-face {
    font-family: "mandalore";
    src: url(/public/fonts/mandalore.ttf);
}

@font-face {
    font-family: "alienleague";
    src: url(/public/fonts/alienleague.ttf);
}

/* General colors config for dark/light theme switch */
:root {
    --background-image: url(/public/img/background-countdown.jpg);
    --color-title: white;
    --color-title-names: rgb(213, 239, 255);
    --color-title-date: lightgrey;
    --color-title-lieux: lightgrey;
    --color-general-text: darkgrey;
    --color-countdown: lightgrey;
    --color-img-filter: invert(98%) sepia(0%) saturate(0%) hue-rotate(9deg) brightness(102%) contrast(105%);
    --color-theme-switch: lightgrey;
    --logo-theme-size: 40px;
    --logo-theme-margin: -20px
}

[data-theme="light"] {
    --background-image: url(/public/img/background-countdown-light.jpg);
    --color-title: #130148;
    --color-title-names: lightblue;
    --color-title-date: #130148;
    --color-title-lieux: #130148;
    --color-general-text: grey;
    --color-countdown: black;
    --color-img-filter: invert(7 %) sepia(48 %) saturate(7464 %) hue-rotate(256deg) brightness(71 %) contrast(111 %);
    --color-theme-switch: lightgrey;
}

@media all and(max-width: 850px) {
    :root{
        --logo-theme-size: 32px;
        --logo-theme-margin: -16px
    }
}

body {
    background: var(--background-image) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

#page{
    display: block;
    position: absolute;
    text-align: center;
    width: 100vw;
    height: 100vh;
    max-height: 100%;
    margin: 0;
    padding: min(60px, 3vh) 10px 0px;
    overflow-x: hidden;
}

#save-the-date {
    color: var(--color-title);
    font-weight: 900;
    font-size: min(60px, 10vw);
    letter-spacing: 1px;
    font-family: "terminator";
    margin-bottom: min(50px, 2.8vh);
}

#names-container{
    text-align: center;
    margin-bottom: min(50px, 2.8vh);
}

#names-container h2 {
    display: inline-block;
    font-size: min(56px, 8vw);
    font-family: "mandalore";
    font-weight: 300;
    letter-spacing: 5px;
    color: var(--color-title-names);
}

#names-container img{
    height: min(132px, 22vw);
    filter: var(--color-img-filter);
}

#names-container .name-1{
    vertical-align: top;
    margin-right: max(-15px, -2.5vw);
    margin-top: min(20px, 3.3vw);
}

#names-container .name-2{
    vertical-align: bottom;
    margin-left: max(-15px, -2.5vw);
    margin-bottom: min(20px, 3.3vw);
}

#date{
    font-size: min(56px, 8vw);
    font-family: "alienleague";
    font-weight: 900;
    color: var(--color-title-date);
    margin-bottom: min(20px, 1.5vh);
}

#lieux {
    font-size: min(28px, 4vw);
    font-family: "alienleague";
    color: var(--color-title-lieux);
}

#theme-switch {
    position: fixed;
    bottom:0;
    width:var(--logo-theme-size);
    height: var(--logo-theme-size);
    bottom: calc(var(--logo-theme-size)/2);
    right: 50%;
    left: 50%;
    margin-left: var(--logo-theme-margin);
    overflow:hidden;
}

#theme-switch ion-icon {
    bottom: 0px;
    font-size: var(--logo-theme-size);
    color: var(--color-theme-switch);
}

#page{
    overflow:auto;
}