body { background-color: rgb(62, 50, 64); } .parent { width: 100%; height: 100%; position: fixed; top: 0; background: url(/pic/bg.jpg) no-repeat center center / cover; left: 0; display: flex; flex-direction: row; } #RadioBox { width: 25%; height: 100%; background-color: rgba(60, 60, 60, 0.9); padding: 0 5px; color: #fff; } #spec { width: 75%; height: 100%; } .canvas { width: 100%; height: 100%; } .youtubeIMG { max-width:60%; height:auto; } .tagA { width: 100%; /* height: 20px; */ border-radius: 5px 5px 0 0; border: #f54e4e; background-color: #000; color: #fff; transition: 0.5s ease all; outline: none; cursor: pointer; text-align: center; margin-left: auto; margin-right: auto; font-size: 1vw; } .tagA:hover { color: #000; background-color: #fff; } .tagB { width: 100%; /* height: 20px; */ border-radius: 0 0 5px 5px; border: #f54e4e; background-color: #fff; color: #000; transition: 0.5s ease all; outline: none; text-align: center; margin-left: auto; margin-right: auto } h1::before { content: ''; display: inline-block; margin: 0 10px; width: 0.8em; height: 0.8em; -webkit-border-radius: 0.8em; -moz-border-radius: 0.8em; border-radius: 0.8em; background: red; animation: blink 3s linear infinite; } @keyframes blink { 0%{opacity: 0;} 25%{opacity: .5;} 50%{opacity: 1;} 75%{opacity: .5;} 100%{opacity: 0;} } h1 { text-align: center float:left; /* margin:10px 50px; */ font-size: 2vw; } .btn { width: 7em; height: 4.5em; border-radius: 0.4em; border: #f54e4e; background-color: #000; color: #fff; transition: 0.5s ease all; outline: none; cursor: pointer; text-align: center; margin: auto; font-size: 0.8vw; } .btn:hover { color: #000; background-color: #fff; } .btn-wrap { margin: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .mute_btn { width: 2em; height: 2em; border-radius: 0.4em; border: #f54e4e; background-color: #000; color: #fff; transition: 0.5s ease all; outline: none; cursor: pointer; text-align: center; margin-right: 0.7em; font-size: 0.8vw; } .mute_btn:hover { color: #000; background-color: #fff; } .volume-wrap { align-items: center; justify-content: center; display: flex; } .tcon { width: 100%; border-radius: 5px 5px 0 0; border: #f54e4e; background-color: #000; color: #fff; transition: 0.5s ease all; outline: none; text-align: center; margin-left: auto; margin-right: auto; } .tlist { width: 100%; height: 33%; border-radius: 0 0 5px 5px; border: #f54e4e; background-color: #fff; color: #000; transition: 0.5s ease all; outline: none; text-align: center; margin-left: auto; margin-right: auto; overflow: auto; } .list_el { border-bottom: 2px double #000; background-color: #d3d3d3; color: #000; } .list_el:nth-child(odd) { border-bottom: 2px double #000; background-color: #fff; color: #000; } .soc_links { margin: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: inline-flex; } DIV { text-align: center; font-size: 1vw; }