/*註解表示方法*/

*{
    box-sizing: border-box;
}

body{
    background-image: url(/images/bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

h1{
    background-color:rgb(193, 202, 244);
    opacity: 0.7;
    text-align:center;
    border-style: outset;
    border-width: 5px 2px; /*上下的邊框寬度為5px，左右的邊框寬度為2px*/
    border-width: 2px 5px 5px 2px; /*上邊框2px，右邊框5px，下邊框5px，左邊框2px*/
    border-radius: 15px; /*四個角變圓滑*/
    padding: 30px;
    width: 80%;
    /*margin: 25px 50px 30px; (邊框外:上25px,左右皆50px,下30px) */
    margin: 10px auto;
}

p{
    color:rgb(67, 76, 150);
}

a:link{
    color:black;
    text-decoration: underline;
}

a:visited{
    color:brown;
    text-decoration: underline;
}

a:hover{
    color:blue;
    text-decoration: underline;
}

a.button:link, a.button:visited{
    color:black;
    background-color: rgb(216, 213, 213);
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 1px solid black;
    font-size: smaller;
}

a.button:hover, a.button:active{
    color: rgb(47, 46, 46);
    background-color: rgb(199, 195, 195);
}

a.button:active{
    cursor:progress; /*設定游標樣式*/
}

table, td, th{
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table{
    width: 60%;
    margin: 10px;
}

#student{
    width: 70%;
    border-collapse: collapse;
    margin: 10px;
    font-size: 85%;
}

#student td{
    text-align: left;
    padding: 10px;
    border: 1px solid rgb(161, 156, 156);
}

#student tr:nth-child(odd){
    background-color: rgb(237, 234, 234);
}

#student tr:nth-child(even){
    background-color: white;
}

#student tr:hover{
    background-color: rgb(53, 44, 176);
    color: aliceblue;
}

#student th{
    background-color: rgb(140, 165, 222);
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    color: black;
}
#inf{
    font-size: 80%;
}

.link{
    border: 1px solid black;
    padding: 10px;
    margin: 5px;
    max-width: 500px; /*最大寬度為500px*/
}

.container{
    display: flex;
    height: auto;
}

.left{
    background-color: antiquewhite;
    float: left;
    color: black;
    text-align: center;
    width:20%;
}

.left2{
    float: left;
    width:25%;
}

.left3{
    float:left;
    width: 45%;
}

.middle{
    background-color: rgb(171, 243, 219);
    opacity: 0.5;
    padding: 20px;
    float: left;
    color: black;
    text-align: center;
    width: 60%;
}

.middle2{
    float: left;
    width: 15%;
}

.right{
    background-color: rgb(223, 194, 249, 0.5);
    float: left;
    padding: 20px;
    color: black;
    text-align: center;
    width: 20%;
}

.right2{
    float: left;
    width: 25%;
}

.rightest{
    float: left;
    width: auto;
}

.below{
    background-color: rgb(100, 98, 100, 0.4);
    width: 100%;
    height: auto;
    padding: 40px;
    color: rgb(51, 48, 48);
    text-align: center;
}

.container::after{
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width:800px) {
    .container{
        flex-direction:column;
    }
    .left, .middle, .right, .left2, .left3, .middle2, .right2, .rightest{
        width:100%;
    }
    table, #student{
        width:100%;
    }
}

ul.link{
    list-style-position: inside;
}

.quote{
    height: 80px;
    width:50%;
    overflow: auto;
    border: 1px solid black;
    position: relative;
    margin: 20px;
}

input:focus{
    background-color: rgb(224, 214, 214);
}

.container2{
    background-color: rgb(217, 211, 211);
    border-radius: 5px;
    padding: 15px;
    width: 50%;
}

.label{
    color: black;
    padding: 12px 12px 12px 0px;
    display: inline-block;
}

.text, .select, .subject{
    width: 100%;
    border: 1px solid rgb(168, 164, 164);
    border-radius: 3px;
    padding: 12px;
    resize: vertical;
    margin-bottom: 5px;
}

.submit{
    float: right;
    color: white;
    background-color: rgb(3, 102, 3);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    padding: 15px;
}

.submit:hover{
    background-color: green;
}

.col_25{
    width: 25%;
    float: left;
}

.col_75{
    width: 75%;
    float: left;
}

.row::after{
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width:800px) {
    .container2, .col_25, .col_75, .submit{
        width: 100%;
    }
}