Alven-s-Personal-Website/website.css

.homepage{
    align-self:center;
    text-align:center;
    margin: 10px 625px;
    border: 3px solid rgba(210, 204, 235, 0.901);
    width: 80px;
    height: 25px;
    a:link{
        color:white;
        text-decoration:none;
    }
    a:visited{
        color:white;
        text-decoration:none;
    }
    a:hover{
        color:white;
        text-decoration:none;
    }
    a:active{
        color:wheat;
        text-decoration:none;
    }
}
.flex{
    display:flex;
}
.flex1{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}
.grid {
    display:grid;
    grid-template-rows:4fr 4fr;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.grid1 {
    display:grid;
    grid-template-rows:150px 150px;
    grid-template-columns:1fr 4fr;
    gap:60px;
}
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:2%;
    padding-bottom:2%;
    border-radius:10%;
}
li
{
    display:inline;
}
a:link,a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    background-color:rgba(15, 23, 42, 0.353);
    text-align:center;
    padding:0.9%;
    text-decoration:none;
    text-transform:uppercase;
    border-radius:20px;
    transition:padding 0.2s ease, box-shadow 0.4s ease;
}
a:hover,a:active
{
    box-shadow: -1px -1px 10px 7px rgba(255, 252, 252, 0.168);
    padding:1.4%;
    
}
.line {
    background-color:rgba(18, 27, 50, 0.373);
    border-radius:12px;
    padding:1%;
    box-shadow:-1px -1px 10px 1px rgba(189, 238, 214, 0.168);
    text-align:center;
    color:#dedede;
    font-weight: bold;
}
.rec { 
    background-color:rgba(26, 66, 72, 0.373);
    border-radius:15px;
    padding:1%;
    box-shadow:-1px -1px 10px 1px rgba(100, 106, 103, 0.168);
}
.over {
    background-color:rgba(15, 23, 42, 0.226);
    width:83%;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    height:auto;
    margin:auto auto;
    border-radius:20px;
    padding-left:1%;
    padding-right:1%;
    padding-top:1%;
}
.day { 
    background-color:rgb(59, 151, 176);
    width:97%;
    height:150px;
    border-radius:7px;
    margin-left:1%;
    box-shadow: 2px 3px 30px rgba(234, 231, 231, 0.1);
}
.line {
    background-color:rgb(59, 94, 176);
    width:97%;
    height:150px;
    border-radius:4px;
    box-shadow:2px 3px 30px rgba(0, 0, 0, 0.168);
}
.grid2 {
    display:grid;
    grid-template-rows:150px;
    grid-template-columns:3fr 4fr 4fr;
    gap:1px;
    
}
audio {
    width: 74%; /* 宽度为100% */
    height: 50px; /* 高度为50px */
    border-radius: 10px; /* 边框半径为10px */
}
 
/* 设置音频播放进度条的颜色 */
audio::-webkit-media-controls-progress-bar {
    background-color: #000;
}
 
/* 定义播放器的背景颜色 */
.player {
    /* background: linear-gradient(to bottom, #304352, #d7d2cc); */
    background-color: rgba(32, 32, 32, 0.2); /* 背景颜色为rgba(238, 238, 238, 0.2) */
}
 
/* 隐藏音频播放器的背景颜色 */
audio::-webkit-media-controls-enclosure {
    background-color: rgba(216, 218, 221, 0.0);
}
.mus{
    background-color:rgb(39, 96, 112);
    width:98%;
    height:160px;
    border-radius:4px;
    box-shadow:2px 3px 30px rgba(160, 157, 157, 0.168);
}
.pic {
    background-color:rgb(24, 36, 64);
    width:99%;
    height:350px;
    border-radius:4px;
    box-shadow:2px 3px 30px rgba(160, 157, 157, 0.168);
    background-image:url('./recouce/snow.png');
    background-repeat: no-repeat;
	background-size: cover;
}
.grid3 {
    display:grid;
    grid-template-rows:150px 100px;
    grid-template-columns:7fr 4fr;
    gap:10px;
    
}
.board {
    background-color:rgb(24, 36, 64);
    width:100%;
    height:300px;
    border-radius:20px;
    box-shadow:2px 3px 30px rgba(0, 0, 0, 0.168);
    color:#FFFFFF;
    font-weight: bold;
    padding:1%;
    word-wrap: normal;
    transition:padding 0.2s ease, box-shadow 0.4s ease;
}
.board:hover {
    box-shadow:2px 3px 30px rgba(0, 0, 0, 0.404);
    padding:1.5%;
}
.board-top {
    background-color:rgb(73, 119, 228);
    width:100%;
    height:30px;
    border-radius:10px;
    box-shadow:2px 3px 30px rgba(0, 0, 0, 0.168);
}
.between {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}