:root {
    --eyefind-blue-light-color: #99cdff;
    --eyefind-blue-dark-color: #00679a;

    --eyefind-yellow-color: #febe03;
    --eyefind-yellow-dark-color: #daa404;
    --lovemeet-pink: rgba(213,134,181,1);
    --lovemeet-pink-dark: rgba(167,62,121,1);
}

div.page {
    width: 100%;
    height: 100%;
    background: white;
  }
div.page nav {
    height: 100px;
    background: url('./../img/background.png');
    background: url('./../img/background.png');

    background-repeat: repeat;
    background-size: 
        /* This one is the normal looking */
        contain, 
        /* This one is streched *looks bad  (hide it below the normal one)*/
        300% 100% 
    ;
    animation: background-anim 16s linear infinite;
    animation-direction: alternate;
}

@keyframes background-anim {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

div.page div div div div#search-email-panel .se-panel {
    background: var(--eyefind-blue-light-color);
}
div.page div div div div#search-email-panel .se-panel div.label-background {
    background: #00649a;
}
div.page div div div div#search-email-panel .se-panel div form div.input-group input {
    background: rgba(0, 0, 0, 0);
    color: var(--eyefind-yellow-color);
    border-width: 0px 0px 1px 0px;
}
div.page div div div div#search-email-panel .se-panel div form div.input-group input::placeholder {
    color: white;
}

/*  EMAIL PANEL & BUTTON */
div.page div div div div#search-email-panel div#email-panel div.d-flex.flex-column {
    background: 
        url('./../img/letter.png'),
        #5a98c9;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    height: 100%;
    min-height: 100%;
}
/*  email number    */
div.page div div div div#search-email-panel div#email-panel div.display-1 {
    color: var(--eyefind-yellow-dark-color);

    animation: color-anim 0.5s ease-out infinite;
    animation-direction: alternate;
}
@keyframes color-anim {
    0% { color: var(--eyefind-yellow-dark-color) }
    100% { color: var(--eyefind-yellow-color) }
}
/*  email button */
div.page div div div div#search-email-panel div#email-panel div#check-email-btn {
    height: 20%;
}
div.page div div div div#search-email-panel div#email-panel div#check-email-btn a {
    background: var(--eyefind-blue-dark-color);
}
div.page div div div div#search-email-panel div#email-panel div#check-email-btn a:hover {
    background: red;
}

/*  LOVEMEET PANEL */
div.page div div div div#search-email-panel div#lovemeet-panel div.d-flex.flex-column {
    background-color: var(--lovemeet-pink);

    height: 100%;
    min-height: 100%;
}

/*  lovemeet button */
div.page div div div div#search-email-panel div#lovemeet-panel div#lovemeet-btn {
    height: 20%;
}
div.page div div div div#search-email-panel div#lovemeet-panel div#lovemeet-btn a {
    background: var(--lovemeet-pink-dark);
}
div.page div div div div#search-email-panel div#lovemeet-panel div#lovemeet-btn a:hover {
    background: rgba(181,126,158,1);
}

/*  TV CAROUSEL */
div.page div#tv_carousel_container {
    width: 100%;
    height: 100%;
}
/*  carousel imgs */
div.page div#tv_carousel_container .carousel-img {
    height: 100%;

    max-height: 10rem;
    max-width: 10rem;
}
/*  carousel buttons */
div.page div#tv_carousel_container div#carousel-btns {
    background: #5a98c9;
}
div.page div#tv_carousel_container .carousel-btn {
    width: 3%;
    height: 55%;
    background-color: transparent;
    border-radius: 100%;
    margin-left: 0.5rem;

    border-style: solid;
    border-width: 2px;
    border-color: azure;

    cursor: pointer;

    min-width: 1rem;
    min-height: 1rem;
}
div.page div#tv_carousel_container .carousel-btn:hover {
    border-width: 4px;
}
div.page div#tv_carousel_container .carousel-btn:after {
    /*  to keep buttons' aspect ratio */
    content: "";
    display: block;
    padding-bottom: 100%;
}
div.page div#tv_carousel_container .carousel-btn-active {
    background-color: azure;
}

div.page div#tv_carousel_container img.invisible-ad {
    position: relative;
    top: -100%;

    opacity: 0;
}
div.page div#tv_carousel_container img.carousel-visible-ad {
    position: relative;
    top: -100%;

    animation: carousel-anim 0.5s forwards;
}
@keyframes carousel-anim {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

/*  Tablet and below    */
@media screen and (max-width: 47.9rem) {
    /*  EMAIL PANEL & BUTTON */
    /*  resize image */
    div.page div div div div#search-email-panel div#email-panel 
    div.container.d-flex.justify-content-center {
        width: 60%;
        margin-bottom: 10%;
    }
    /*  adjust emails number */
    div.page div div div div#search-email-panel div#email-panel 
    div.display-1 {
        margin-bottom: 10%;
    }
}