/* Coming Soon Page */
#comingsoon :is(.header,.main-navigation,#contacts,.footer) {
    display: none;
}
#comingsoon {
    width            : 100%;
    height           : 100%;
    background-color : #E7E6EA;
}
#comingsoon body {
    min-height         : 100%;
    display            : grid;
    grid-template-rows : 4rem calc(100vh - 4rem) auto;
    background-color   : #E7E6EA;
}
/* Top header link with logos */
.cs-header {
    background : white;
    padding    : 1rem;
    display    : block;
}
.cs-header-logo {
    width           : 100%;
    height          : 100%;
    object-fit      : contain;
    object-position : center;
}
/* Footer */
.cs-footer {
    padding         : 1rem 3rem 4rem;
    border-top      : 1px solid var(--gray-dark);
    display         : grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: start;

}
.cs-footer-figure {
    display  : block;
    position : relative;
}
.cs-footer-figure img {
    height  : 3rem;
    width   : auto;
    display : block;
}
.cs-footer-figure:last-child img {
    padding-top : 0.5rem;
    height      : 3rem;
}
.cs-footer-caption {
    display    : block;
    font       : var(--font-small-sans);
    grid-area  : caption;
    position   : absolute;
    inset      : auto 0.5% -2rem 0.5%;
    border-top : 1px solid var(--gray-dark);
    padding-top : 0.5rem;
}
@media (width < 900px) {
    .cs-footer {
        grid-template-columns : 1fr;
        gap                   : 1rem;
        justify-content       : start;
        justify-items         : start;
    }
}
@media (width < 700px) {
    .cs-footer {
        padding : 1rem 1rem 4rem;
    }
}
@media (width < 500px) {

    .cs-footer {
        justify-content : stretch;
        justify-items   : stretch;
    }

    .cs-footer-figure img {
        height  : auto;
        width   : 100%;
        display : block;
    }

    .cs-footer-figure:last-child img {
        padding-top : 0;
        height      : auto;
        width       : 100%;
    }
}
/* The Actual Content */
.cs-content {
    position : relative;
    display : grid;
    padding : 3rem 3rem 1rem;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: auto 8fr auto auto auto 4fr auto 1fr ;
    gap : 1rem;
    grid-template-areas : "logo logo text text"
                          ". . . ."
                          "name name address mail"
                          ". . phone ."
                          ". . follow links"
                          ". . . ."
                          "pi pi . year"
                          ". . . .";
}
/* Video Background */
.cs-video {
    position         : absolute;
    inset            : 0;
    object-fit       : contain;
    object-position  : center;
    width            : 100%;
    height           : 100%;
    z-index          : 0;
    background-color : #E7E6EA;
}
.cs-logo,
.cs-text,
.cs-name,
.cs-address,
.cs-mail,
.cs-phone,
.cs-follow,
.cs-links,
.cs-pi,
.cs-year {
    z-index: 10;
    font : var(--font-base-sans);
}
.cs-logo { grid-area : logo; }
.cs-text { grid-area : text; }
.cs-name { grid-area : name; }
.cs-address { grid-area : address; }
.cs-mail { grid-area : mail; }
.cs-phone { grid-area : phone; }
.cs-follow { grid-area : follow; }
.cs-links { grid-area : links; }
.cs-pi { grid-area : pi; }
.cs-year  { grid-area : year ; }
.cs-logo {
    height : 3rem;
}
.cs-text {
    font : var(--font-mid-sans);
    font-weight : 600;
}
.cs-text a {
    display: block;
    margin-top : 1em;
    text-decoration: underline;
}
.cs-name {
    font-weight : 600;
}
.cs-mail,.cs-phone {
    justify-self: start;
}
.cs-mail:hover,.cs-phone:hover,.cs-links a:hover {
    text-decoration: underline;
}
.cs-links {
    display: grid;
    justify-content: start;
}
@media (width < 1150px) {
    .cs-content { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media (width < 950px) {
    .cs-content { grid-template-columns: 2fr 0.5fr 2fr 2fr; }
}
@media (width < 700px) {
    .cs-content {
        padding : 3rem 1rem 1rem;
        grid-template-columns : 1fr 1fr;
        grid-template-rows    : auto 8fr auto auto auto auto 4fr auto 0.5fr;
        grid-template-areas   : "logo logo"
                                "text text"
                                 "name address"
                                 ". mail"
                                 ". phone"
                                 "follow links"
                                 ". ."
                                 "pi year"
                                 ". .";
    }
    .cs-logo {
        height : 2rem;
    }
    .cs-text {
        align-self     : center;
        padding-top    : 2rem;
        padding-bottom : 2rem;
    }
    .cs-text a {
        margin-top : 0;
    }
}