::-webkit-scrollbar {
    width: 8px;
    height:8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius:2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
html{
    background-color:#C9C9C9;
}
body{
    background-color:white;
    max-width:1024px;
    margin:0;
    margin:auto;
    min-height:90vh;
    box-shadow:0px 0px 5px black;
    background-image:url(./background.jpg);
    background-size:cover;
}
main{
    width:100%;
    height: 85vh;
    overflow:auto;
}
.main{
    width:90%;
    margin:auto;
    overflow: auto;
}

footer{
    width:100%;
    height:15vh;
}
footer .nav{
    width:90%;
    height:48px;
    background-color:rgba(0,0,0,0.5);
    border-radius:14px;
    margin:auto;
    display:flex;
    align-items: center;
}
.nav div{
    width:100%;
    font-size:28px;
    color:white;
    display:grid;
    justify-items: center;
}
.nav div:hover{
    color:gray;
}
.title{
    width: 90%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 9px;
    margin: auto;
    margin-top: 32px;
    color: white;
    padding: 8px;
    align-items: center;
    justify-content: flex-start;
    font-size:12px;
}
.title img{
    width: 128px;
    margin-right: 16px;
}
.board,.white-board{
    width:98%;
    background-color: rgba(0, 0, 0, 0.3);
    margin: auto;
    margin-top: 32px;
    box-shadow: 0px 0px 4px 1px black;
}
.white-board{
    background-color: transparent;
    box-shadow: none;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #9A941D;
    color: white;
}
.order{
    width: 90%;
    height: 96px;
    border: 2px solid white;
    margin: auto;
    margin-bottom: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0px 0px 10px 5px black;
    text-decoration: none;
    font-weight: 900;
    font-size:12px;
}
.order img{
    width: 96px;
    height: 96px;
    border-right: 3px solid white;
}
.order:hover,.order:hover img{border-color:#9A941D;}
.order:hover div{color:#9A941D;}
.order div{
    width: 100%;
    height: 100%;
    color:white;
    text-align:right;
    padding-right: 16px;
    padding-top: 16px;
}
#info,#send{
    display:none;
}
form{
    width:95%;
    margin:auto;
}
input,textarea{background: transparent;border:none;width:100%;height:100%;color:white;font-size: 16px;resize: none;text-align:center;}
input:focus,textarea:focus{outline:none;border:none;}
div[input]{
    width:100%;height:32px;
    border:1px solid white;
    margin:auto;
    display: flex;
    color: white;
    font-size: 22px;
    align-items: center;
}
input:focus>div[input]{
    border-bottom:2px solid red;
}
input[type=submit]{
    width:100%;
    height:32px;
    border:1px solid white;
    margin-top:10px;
    display:flex;
    justify-content: center;
    item-align:center;
    cursor:pointer;
    background-color:rgba(0,0,0,0.4);
}
input[type=submit]:hover{
    background-color:black;
}

div[input] i{
    margin-left:4px;
    margin-right:4px;
}
div[long]{min-height:64px;}
.msg{
    min-width: 256px;
    min-height: 80px;
    position: fixed;
    background-color: slategray;
    color: white;
    right: 16px;
    top: 16px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
#loading{
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
}
#loading div{
    width: 128px;
    height: 128px;
    font-size: 98px;
    border-radius: 25%;
    border: 8px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    animation-name:loading;
    animation-duration: 5s;
    animation-timing-function:  ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes loading{
    0%{border: 8px solid white;border-left: 8px solid #aba518;}
    10%{border: 8px solid white;border-top: 10px solid #aba518;}
    20%{border: 8px solid white;border-right: 12px solid #aba518;}
    30%{border: 8px solid white;border-bottom: 14px solid #aba518;}
    40%{border: 8px solid white;border-left: 16px solid #aba518;}
    50%{border: 8px solid white;border-top: 18px solid #aba518;}
    60%{border: 8px solid white;border-right: 20px solid #aba518;}
    70%{border: 8px solid white;border-bottom: 22px solid #aba518;}
    80%{border: 8px solid white;border-left: 24px solid #aba518;}
    90%{border: 8px solid white;border-top: 26px solid #aba518;}
    100%{border: 8px solid white;border-top: 28px solid #aba518;}
}