:root {
    --background: rgba(30,30,30,.5);
    --window: rgba(240, 240, 240, .5);
}


@media only screen and (min-width:801px) {
    html {
        height: 100%;
    }

    body {
        margin: 0;
        height: 100%;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-image: url("../assets/tech.jpg");
        background-size: cover;
        font-size: large;
    }

    #page {
        display: flex;
        flex-direction: column;
        width: 1080px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        min-height: 100%;
        background-color: rgba(30,30,30,.8);
        color: whitesmoke;
    }

        #page > header {
            padding: 10px;
            color: white;
            display: flex;
        }

            #page > header > div {
                flex: auto;
            }

                #page > header > div:last-of-type {
                    text-align: right;
                }
                #page > header > div:last-of-type > div > div {
                    display:inline-block;
                }
                #page > header > div:last-of-type > div > img {
                    height:64px;
                    vertical-align:bottom;
                }


            #page > header a {
                color: yellow;
                text-decoration: none;
            }

            #page > header > div:nth-of-type(1) > img {
                height: 80px;
            }

            #page > header > div:nth-of-type(2) {
                display: flex;
            }

                #page > header > div:nth-of-type(2) > div:first-of-type {
                    flex-grow: 1;
                    margin-right: 20px;
                }

            #page > header button {
                font-weight: bold;
                display: none;
            }

                #page > header button > img {
                    height: 70px;
                }

            #page > header a > img {
                height: 24px;
                vertical-align: bottom
            }

        #page > nav {
            display: flex;
            border-bottom: 1px solid yellow;
            border-top: 1px solid yellow;
            padding-top: 5px;
            padding-bottom: 5px;
        }

            #page > nav > a {
                flex: auto;
                text-align: center;
                color: white;
                text-decoration: none;
                display: block;
            }

                #page > nav > a:hover {
                    color: Yellow;
                }

                #page > nav > a > img {
                    display: none;
                }

        #page > section {
            flex-grow: 1;
            position: relative;
        }

            #page > section > div {
                padding: 10px;
                position: relative;
            }

        #page > footer {
            background-color: var(--background);
            padding: 10px;
            border-top: 1px solid yellow;
            color: white;
            text-align: right;
        }

    #member {
        /*display:flex;*/
        display: none;
        background-color: rgba(120,120,120,.7);
        border-top: 1px solid yellow;
        position: relative;
        padding: 3px;
    }

        #member > div:first-of-type {
            flex-grow: 1;
            padding-left: 5px;
        }

        #member > div {
            position: relative;
        }

        #member button {
            height: 100%;
            vertical-align: middle;
            margin-bottom: 3px;
            margin-right: 5px;
            cursor: pointer;
        }

        .floatR {
            height:250px;
            float:right;
            margin-right:25px;
        }
}

@media only screen and (max-width:800px) {
    html {
        height: 100%;
    }

    body {
        height: 100%;
        margin: 0;
        background-image: url("../assets/tech.jpg");
        background-size: cover;
        font-size: small;
        position: relative;
    }

    .pc {
        display: none !important;
    }

    #page {
        display: block;
        position: relative;
        background-color: rgba(30,30,30,.8);
        color: whitesmoke;
        top: 0;
        height: 100%;
        left: 0;
        width: 100%;
    }

        #page > header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            display: flex;
            background-color: black;
            z-index: 10;
            background: linear-gradient(180deg, black, #2a2a2a);
            padding: 5px;
            box-sizing:border-box;
        }

            #page > header > div:nth-of-type(1) {
                flex-grow: 1;
            }

            #page > header > div:nth-of-type(2) {
                text-align: right;
            }
                #page > header > div:nth-of-type(2) a {
                    color:yellow;
                    text-decoration:none;
                }
                #page > header > div:nth-of-type(2) img {
                    height: 20px;
                    vertical-align: bottom;
                    margin-right:5px;
                    border-style:none;
                }

            #page > header img {
                height: 50px;
            }

        #page > section {
            position: absolute;
            top: 50px;
            bottom: 50px;
            overflow: auto;
            padding: 10px;
        }

        #page > nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: black;
            background: linear-gradient(180deg, #2a2a2a, black);
            display: flex;
            padding: 10px;
            box-sizing: border-box;
        }

            #page > nav > a {
                display: block;
                color: whitesmoke;
                flex: auto;
                text-align: center;
            }

                #page > nav > a > span {
                    display: none;
                }

                #page > nav > a img {
                    height: 30px;
                }

    h2 {
        font-size: medium;
    }
}