:root{
    --background-blue: #192032;
    --icon-hover: #888888;
    --font-blue: #007AC3;
    
    --max-width: 1025px;
    
    /*desktop*/
    --nav-logo: 46.4%;
    --nav-width: 7.6%;
    --nav-height: 100px;
    /*mobile*/
    --mobile-nav-logo: 65%;
    --mobile-nav-logo-l: 75%;
    --mobile-nav-width: 15%;
    --mobile-nav-width-l: 7.6%;
    --mobile-nav-height: 200px;
    /*light theme*/
    --background-light: #EEEEEE;
    --light-font-color: #000000;
    /*dark theme*/
    --background-dark: #222222;
    --dark-font-color: #DDDDDD;
    --dark-a-link: #9999C1;
    --dark-a-visited: #DDDDDF;
    --dark-a-hover: var(--font-blue);
}
body{
    margin: 0;
    padding: 0;
    margin-left: calc(100vw - 100%);
}
img{
    box-sizing: border-box;
}
strong{
    color: var(--font-blue);
}
table{
    width:100%;
    border: 1px solid black;
    text-align: center;
}
table td{
    border-bottom:1px black solid;
}
table td.bg-blue{
    background-color:var(--font-blue);
    color: var(--dark-font-color);
}

#main-page {
    width: var(--max-width);
    max-width: var(--max-width);
    min-height: 100vh;
    margin: 0 auto;
}

#nav-wrapper{
    display: grid;
    grid: [row1-start] "logo nav support" auto [row1-end] / var(--nav-logo) var(--nav-width) 1fr;
    position: absolute;
    width: inherit;
    max-width: var(--max-width);
    max-height: var(--nav-height);
    z-index: 10;
    background-color: var(--background-blue);
}

#nav-wrapper .logo{
    display: grid;
    grid-area: logo;
    max-height:inherit;
    background-color: var(--background-blue);
}
.logo a{
    max-height: inherit;
}
.logo img{
    display: block;
    width: auto;
    height: 100%;
    max-height: inherit;
    padding-left: 20px;
}

#nav-wrapper .nav{
    display: grid;
    grid-area: nav;
    max-height: inherit;
    background-color: var(--background-blue);
}
.nav nav{
    max-height: inherit;
    background-color: var(--background-light);
}
.nav a{
    color: var(--dark-font-color);
    text-decoration: none;
    width: 100%;
    max-height: inherit;
    float: left;
    font-size: 1em;
}
.nav a div{
    max-height: inherit;
}
.nav a:not(:first-child) div{
    border-left: 2px solid #333333;
}
.nav a:first-child div{
    border-left: 2px solid var(--background-blue);
}
.nav a > div:hover {
    background-color: var(--icon-hover);
    
}
.nav h3{
    text-align: center;
    margin: 0;
    padding: 1px;
    background-color: var(--background-blue);
}
.nav img{
    width: 100%;
    height: auto;
    padding: 15%;
    margin: 0 auto;
}
.nav h3, .nav img {
    display: block;
}

#nav-wrapper .support{
    display: grid;
    grid-area: support;
}
.support span{
    color: var(--dark-font-color);
    padding-right: 5px;
}

#content-wrapper{
    display: grid;
    grid: [row1-start] "email content ." auto [row1-end] / 20% 60% 20%;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--nav-height);
    z-index: 7;
}

#content-wrapper > .page:target ~ .page:last-child,
#content-wrapper > .page{
    display: none;
}

#content-wrapper > :last-child,
#content-wrapper > .page:target{
    display: grid;
    grid-area: content;
    z-index: 9;
    padding-top: var(--nav-height);
    padding-bottom: 50px;
}

#email-login {
    display: grid;
    grid-area: email;
    margin-top: var(--nav-height);
    width: 100%;
}

#landing img{
    width: 100%;
    height: auto;
    padding-top: 10px;
}

#back-wave{
    display: block;
    position: fixed;
    z-index: 8;
    top: calc(100vh - 300px);
    left: calc( calc(100vw / 2) - 196px);
    filter: blur(2px);
}

.center{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.left{
    text-align: left;
    float: left;
}
.right{
    text-align: right;
    float: right;
}

.theme {
    background-color: var(--background-light);
    color: var(--light-font-color);
}

@media (prefers-color-scheme: dark) {
    .theme.adaptive {
        background-color: var(--background-dark);
        color: var(--dark-font-color);
    }
    a:link {
        color: var(--dark-a-link);
    }
    a:visited {
        color: var(--dark-a-visited);
    }
    a:hover {
        color: var(--dark-a-hover);
    }
}

/*mobile setting*/
@media only screen and (hover: none) and (pointer: coarse){
    #nav-wrapper.is-mobile{
        grid: [row1-start] "logo nav" auto [row1-end] / var(--mobile-nav-logo) var(--mobile-nav-width);
        max-height: var(--mobile-nav-height);
    }
    #content-wrapper.is-mobile {
        grid: [row1-start] " . content . " auto [row1-end] 
              [row2-start] " . email . " auto [row2-end] 
              / 1fr 95vw 1fr;
        min-height: var(--mobile-nav-height);
    }
    #content-wrapper > :last-child,
    #content-wrapper > .page:target.is-mobile{
        padding-top: var(--mobile-nav-height);
    }
    #email-login.is-mobile {
        margin-top: 0;
        z-index: 9;
        font-size: 2em;
        border-top: dashed 5px var(--font-blue);
    }
    a {
        font-size: 2em;
    }
    .center.is-mobile {
        margin-left: 0px;
        margin-right: 0px;
    }
    @media (orientation: landscape){
        #content-wrapper.is-mobile {
            min-height: calc(var(--mobile-nav-height) / 2);
        }
        #nav-wrapper.is-mobile{
            grid: [row1-start] "logo nav" auto [row1-end] / var(--mobile-nav-logo-l) var(--mobile-nav-width-l);
            max-height: calc(var(--mobile-nav-height) / 2);
        }
        #content-wrapper > :last-child,
        #content-wrapper > .page:target.is-mobile{
            padding-top: calc(var(--mobile-nav-height) / 2);
    }
}
}