@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;-moz-box-sizing: border-box;box-sizing: border-box;}
html, body {position: relative;min-height: 100%;}body {line-height: 1;}ol, ul {list-style: none;}a{text-decoration: none;}

html {
     background: #b40202;
     color: #fff;
     font-size: 24px;
     font-family: Microsoft JhengHei;
}

.who {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 5vh 10%;
     gap: 15vh;
}

.top {
     font-size: 2rem;
}

h1.middle {
     font-size: 3.6rem;
}

#bottom {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
}

#bottom a {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 5;
}

.round {
     margin-bottom: 1rem;
     position: relative;
     overflow: hidden;
}

.round > div {
     background: #fff;
     width: 5rem;
     height: 5rem;
     border-radius: 5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: .33rem;
}

.round > div span:after, .round > div:after, .round > div:before {
     content: ''
}

.round > div span, .round > div:after, .round > div:before {
     height: .33rem;
     width: 3.33rem;
     background: #b40202;
     display: block;
     position: relative;
     opacity: 1;
     transition: all .2s linear;
}

.round > div span:after {
     background: #fff;
     position: absolute;
     width: .33rem;
     height: 100%;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     transition: all .2s linear;
}

#bottom:hover .round > div span:after {
     width: 0;
}

@media screen and (max-width: 600px) {
     html {
          font-size: 20px;
     }
}

@media screen and (max-width: 500px) {
     html {
          font-size: 18px;
     }
     .who {
          padding-left: 5%;
          padding-right: 5%;
     }
}

@media screen and (max-width: 400px) {
     html {
          font-size: 16px;
     }
}

@media screen and (max-width: 350px) {
     html {
          font-size: 14px;
     }
}

@media screen and (max-width: 300px) {
     html {
          font-size: 12px;
     }
}

@media screen and (max-height:600px){
     .who {
          position: static;
          min-height: 100vh;
     }
}