:root{
    --theme-color: rgba(63,191,255,0.7);
}

*{
    font-family: 思源黑体;
    color: rgb(245,245,247);
    transition: .3s;
    outline: none;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgb(29,29,31);
}

body{
    margin:32px;
    width:calc(100vw - 64px);
    height: calc(100vh - 64px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 隐藏输入框的增加和减少按钮 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* 覆盖 h1 标签的默认样式 */
h1{
    margin: 0;
}

/* 覆盖 input 标签的默认样式 */
input{
    background: none;
    border: none;
    border-radius: 8px;
    border-bottom: 2px solid rgba(63,191,255,0.2);
}

input:hover{
    border-bottom: 2px solid var(--theme-color);
    box-shadow: 0px 0px 8px var(--theme-color);
}

#desc p{
    margin: 0;
    font-size: 0.9em;
}

/* 覆盖按钮的默认样式 */
button{
    background-color: rgb(55,55,57);
    padding: 8px;
    box-shadow: 4px 4px 8px var(--theme-color);
    border-radius:  8px;
    margin:8px;
    border: none;
}

button:hover{
    background-color: rgb(47,127,191);
    box-shadow: 2px 2px 8px var(--theme-color);
}

button:active{
    background-color: rgb(23,63,95);
    box-shadow: 1px 1px 8px var(--theme-color);
}
/* 一个小盒子 - block 的样式 */
.block {
    background-color: rgb(55,55,57);
    padding: 8px;
    box-shadow: 4px 4px 8px var(--theme-color);
    border-radius:  8px;
    margin:8px
}

.chosen{
    text-shadow: 2px 2px 2px rgb(63,191,255)
                ,-2px 2px 2px rgb(63,191,255)
                ,2px -2px 2px rgb(63,191,255)
                ,-2px -2px 2px rgb(63,191,255);
                transform: scale(1.1);
}

/* 主要操作区域 #main 的样式*/
#main{
    display: flex;
    flex-direction: row;
    width:100%;
    align-self: stretch;
    align-items: start;
    flex:1;
    max-height: calc(100vh - 128px); /* 根据需要调整 */
    overflow-y: auto; /* 或者 overflow-y: hidden; */
}

/* 名字区的样式 */
#main > div{
    display: flex;
    flex-wrap: wrap;
    flex:3;
    flex-direction:row;
    max-height: 100%; /* 限制子元素的最大高度 */
    /*overflow-y: auto; /* 或者 overflow-y: hidden; */
    padding: 1px;
}

/* 操作区域的样式 */
#actions{
    flex: 1;
    max-height: 100%; /* 限制子元素的最大高度 */
    overflow-y: auto; /* 或者 overflow-y: hidden; */
}

/* 同学名字的样式 */
.student{
    width:60px;
    text-align: center;
    margin: 4px;
    padding: 6px;
}

/* 同学名字列表的样式 */
#classmates{
    display: flex;
    flex-wrap: wrap;
}

/* 操作区域下 label 的样式 */
#actions label{
    display: block;
    font-size: 24px;
}