/* head */

header {
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1em;
    color: #fff;
    pointer-events: none;
    z-index: 999;
}

header>div {
    pointer-events: visible;
}

header>.logo {
    width: 20%;
    max-width: 200px;
    line-height: 0;
}

header>.logo>a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

header>.right_box {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

header>.right_box>.btn {
    border-radius: 0.25em;
    background: radial-gradient(farthest-side at center, #00B5F1, #005BFF);
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
}

header>.right_box>.btn.home>p,
header>.right_box>.btn.exit_btn>p {
    padding: 0.4em 0.5em 0.3em;
    letter-spacing: 0.15em;
}

header>.right_box>.btn>p {
    margin: 1px 0px 2px;
    padding: 0.3em 0.5em 0.2em;
    background: -webkit-linear-gradient(bottom, #00B5F1, #005BFF);
    background: -moz-linear-gradient(bottom, #00B5F1, #005BFF);
    background: -o-linear-gradient(bottom, #00B5F1, #005BFF);
    background: linear-gradient(bottom, #00B5F1, #005BFF);
    letter-spacing: 0.08em;
    border-bottom: 1px solid #92F3FF;
    border-radius: 0.25em;
    cursor: pointer;
}

header>.right_box>.btn:not(:last-child) {
    margin-right: 0.5em;
}

header>.right_box>.btn:hover p {
    background: -webkit-linear-gradient(top, #00B5F1, #005BFF);
    background: -moz-linear-gradient(top, #00B5F1, #005BFF);
    background: -o-linear-gradient(top, #00B5F1, #005BFF);
    background: linear-gradient(top, #00B5F1, #005BFF);
}


/* 教師登入按鈕 */

header.t_status>.right_box>.btn {
    background: radial-gradient(farthest-side at center, #EC7536, #DF3400);
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
}

header.t_status>.right_box>.btn>p {
    background: -webkit-linear-gradient(bottom, #FABF42, #EC490C);
    background: -moz-linear-gradient(bottom, #FABF42, #EC490C);
    background: -o-linear-gradient(bottom, #FABF42, #EC490C);
    background: linear-gradient(bottom, #FABF42, #EC490C);
    border-bottom: 1px solid #FAEE89;
}

header.t_status>.right_box>.btn:hover p {
    background: -webkit-linear-gradient(top, #FABF42, #EC490C);
    background: -moz-linear-gradient(top, #FABF42, #EC490C);
    background: -o-linear-gradient(top, #FABF42, #EC490C);
    background: linear-gradient(top, #FABF42, #EC490C);
}


@media screen and (max-width: 768px) {
    header{
        font-size: 0.95em;
    }
    header>.logo{
        width: 100%;
        max-width: 130px;
        padding: 5px;
        display: block;
    }
    header > .right_box > .btn{
        max-width: 150px;
    }
    header > .right_box > .btn > p{
        padding: 0.2em 0.25em 0.1em;
    }
}