* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}
body{
    display: block;
    background-color: #e8d8d8;
}
.bottom{
    height: 300px;
    display: flex;
    justify-content: space-evenly;
}
.bottom .circle {
    font-size: 130px;
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: #385d4c solid 4px;
    border-radius: 50%;
    margin: auto auto;
}
.main{
    height: 666px;
    display: flex;
    justify-content: space-between;
}
.main_left{
    height: 666px;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main_right{
    height: 666px;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main_left ul{
    height: 240px;
    width: 240px;
    background: linear-gradient(45deg, #aa3479, #6d2abe);
    border: 2px solid;
    border-color: #61666d;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main_right ul{
    height: 240px;
    width: 240px;
    background: linear-gradient(45deg, #349b67, #bad138);
    border: 2px solid;
    border-color: #61666d;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul a{
    width: 50px;
    height: 50px;
    font-size: 30px;
    border: 1px solid #385d4c;
    border-radius: 6px;
    margin: auto 30px;
    background-color: #F6F7F8;
    text-align: center;
}
ul a:hover{
    font-size: 0;
    transform: scale(1.5);
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.3s ease;
}
ul a:hover:nth-child(1){
    background-image: url(./a.jpg);
}
ul a:hover:nth-child(2){
    background-image: url(./b.jpg);
}
ul a:hover:nth-child(3){
    background-image: url(./c.jpg);
}
ul a:hover:nth-child(4){
    background-image: url(./d.jpg);
}
ul a:hover:nth-child(5){
    background-image: url(./e.jpg);
}
ul a:hover:nth-child(6){
    background-image: url(./f.jpg);
}
.main_1{
    height: 666px;
    width: 866px;
    display: flex;
}
.main_2_1{
    height: 666px;
    width: 150px;
    font-size: 80px;
    font-weight: 800;
    writing-mode: vertical-lr;
    text-orientation: upright; 
    background-color: gray;
    padding-top: 40px;
    box-sizing: border-box;
}
.main_2_2{
    height: 666px;
    width: 150px;
    font-size: 80px;
    font-weight: 800;
    writing-mode: vertical-rl;
    text-orientation: upright; 
    background-color: gray;
    padding-top: 40px;
    box-sizing: border-box;
}
.main_1 a{
    height: 666px;
    width: 666px;
    background-image: url();
    filter: grayscale(100%);
    background-repeat: no-repeat;
    background-size: cover;
}
.main_1 a:hover{
    transform: scale(1.05);
    transition: all 0.2;
}
.gif_1 {
    width: 150px;
    height: 100px;
    background-image: url(./1756478229071.gif);
    background-repeat: no-repeat;
    background-size: contain;
}
.gif_2{
    width: 100px;
    height: 100px;
    background-image: url(./6BB832EAFBEE814C4A4D9A07478F6D0E.gif);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    left: 150px;
}
.player {
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            display: inline-block;
        }
        
.controls {
            margin: 20px 0;
        }
        
button {
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 12px 20px;
            margin: 5px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
        }
        
button:hover {
            background: rgba(255,255,255,0.3);
        }
        
.progress {
            width: 300px;
            height: 6px;
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
            margin: 15px auto;
            cursor: pointer;
        }
        
.progress-bar {
            height: 100%;
            background: #2ecc71;
            border-radius: 3px;
            width: 0%;
        }
        
.time {
            font-size: 14px;
            opacity: 0.8;
        }