* {
            margin: 0;
            padding: 0;
        }

a{
    text-decoration-line: none;
    color: #abc1ee;
}

html, body {
    overflow-x: hidden; /* 仅隐藏水平滚动条 */
    overflow-y: auto; /* 确保垂直滚动条可用 */
}

/* 
body{
display: flex;
min-height: 100vh;
flex-direction: column;
} */

.link-with-border {
    border: 1px solid #FFFFFF; /* 设置边框大小、样式和颜色 */
    padding: 5px 10px; /* 添加点内边距 */
    text-decoration: none; /* 移除下划线 */
    color: #000000; /* 设置文本颜色 */
}
 
.link-with-border:hover {
    background-color: #FFFFFF; /* 鼠标悬停时的背景颜色 */
    color: black; /* 鼠标悬停时的文本颜色 */
}

.navbar-brand{
    margin-left: 5%;
}

.btns{
    right: 5%;
    position: fixed;
    margin-top: 1%;
}

.btn-outline-success{
    --bs-btn-hover-bg:#701e5e;
    --bs-btn-border-color: #701e5e;
    --bs-btn-hover-border-color:#701e5e;
}

.nav-item{
    text-decoration: none;
}

.kk{
    background-color: rgba(126, 12, 110, 0.4)
}

.maker{
    opacity: 0.8;
    z-index: -1;
}

#Form{
    background-color: #fff;
            width: 358px;
            height: 540px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 0);
}

.input{
    /* display: block; */
    width: 100%;
    margin-bottom: 0px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

.header{
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    color: #453434;
    padding-top: 25px;
}

.link-with-border{
    text-align: center;
    padding: 10px;
    /* padding-top: 5%; */
    width: 100%;
    margin-top: 400px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
}

#btnn{
    padding-top: 20px;
}

button{
    outline: none;
    border: none;
    background-color: transparent;
}

#right{
    margin-bottom: 0rem;
}

.nav-item1{
    background-repeat: no-repeat;
    display: block;
    height: 60px;
    background-size: contain;
}

.button_class{
    /* margin-top: 219px; */
}

.bottem{
    flex:1;
}

footer{
width: 100%;
position: absolute;
bottom: 0
}

.score{
    /* background-image: url(11.png);
    background-repeat: no-repeat;
    background-size: 580px;
    height: 374px; */
    margin-top: 7%;
    margin-left: 13%;
}

.name{
    position: absolute;
    margin-top: 66px;
    /* margin-left: 69px; */
    font-size: 27px;
    /* color: transparent; */
}
/* 
.number{
    position: absolute;
} */

.other{
    position: absolute;
    margin-top: 34px;
    margin-left: 97px;
    /* color: transparent; */
}

.sc{
    font-size: 30px;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 41px;
}
.footer a {
  color: #f8f8f8;
  text-decoration: none;
}

#name{
    position: absolute;
}

#number{
position: absolute;
    margin-left: 288px;
}

#score{
    position: absolute;
    margin-left: 510px;
}

.button-style {
    display: inline-block;
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    background-color: #ffffff52;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
    font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 19px; 
  color: #333;
  }

.button-style:hover {
    background-color: #b9c1c95c;
  }

.login-container {
    text-align: center;
    margin-top: 50px;
}
.login-option {
    display: inline-block;
    border: 1px solid #000;
    /* padding: 20px; */
    margin: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
    outline: none;
    border: none;
    background-color: transparent;
    width: 234px;
}
  
.login-option.visible {
    opacity: 1;
}
.hidden {
    display: none;
}

.tea{
    width: 234px;
    border: 12px solid #96aeb93b;
    transition: border-color 0.2s ease;
    border-radius: 15px;
    background-color: #466e7533;
}

.tea:hover{
    border: 12px solid #3d404985;
}


.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 25px;
}

 .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
}

.dropdown-content button:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown{
    margin-left: auto;
    margin-left: 830px;
}
/* 
dropbtn{
    background-image: url(dropbtn.png);
} */


 .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar-nav {
            display: flex;
            list-style: none;
        }
        .btnn {
            padding: 10px;
            margin: 5px;
        }

        .maker{
            opacity: 0;
            position: absolute;
        }

    .button_class{
        margin-top: 219px;
    }


@media screen and (max-width: 768px) {

      .navbar-nav .navbar-brand {
          flex-direction: column;
        align-items: center;
    }
        .navbar {
            /* flex-direction: column; */
    }

        .button-style{
            width: 75%;
        }
    
        .tea {
            width: 142px;
        }

        .footer{
            font-size: 12px;
        }

        .maker{
            width: 75%;
            opacity: 1;
            position: relative;
        }

        .button_class{
        margin-top: 0px;
    }
        .score{
            transform: scale(0.6);
            margin-left: 0px;
        }
}
    
    /* .scorebg{
        position: absolute;
    } */

.announcement {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            margin: 20px auto;
            width: 80%;
            color: black;
        }

.bg{
    background: url('bg.jpg') no-repeat center center fixed;        
    background-size: cover;    
}

.bg2{
    background: url('ndfz.jpg') no-repeat center center fixed;        
    background-size: cover;  
}

.bg3{
    background-color: #e8e9ea;
}

.iname{
    margin-right: 10%;
}


        .recent-messages {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .recent-messages h2 {
            margin: 0 0 10px 0;
        }

        .recent-messages ul {
            list-style-type: none;
            padding: 0;
        }

        .recent-messages li {
            margin: 5px 0;
        }

                .refresh-button {
            background-color: #cacaca99; /* Green */
            border: none;
            color: white;
            padding: 10px 18px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 8% 18%;
            cursor: pointer;
            border-radius: 13px;
            transition: background-color 0.3s ease;
            position: absolute;
            z-index: 20;
        }

        .refresh-button:hover {
            background-color:#989998a1  ;
        }