div {text-align: center;}
span {white-space: nowrap;}
a {color: inherit;}

:root {
  --background-color: white;
  --text-color: black;
  --table-border-color: #e5e5e5;
  --table-odd-row-bg-color: #f9f9f9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
    --table-border-color: #3a3a3a;
    --table-odd-row-bg-color: #2c2c2c;
  }
}

body.light-theme {
  --background-color: white;
  --text-color: black;
  --table-border-color: #e5e5e5;
  --table-odd-row-bg-color: #f9f9f9;
}

body.dark-theme {
  --background-color: black;
  --text-color: white;
  --table-border-color: #3a3a3a;
  --table-odd-row-bg-color: #2c2c2c;
}

body {
font-family: 'Noto Sans Mono', monospace, 'Noto Sans TC', sans-serif;
width: 99%;
height: 99%;
margin: auto;
background: var(--background-color);
color: var(--text-color);
}
.content {text-align: center;}
.center{
background: var(--background-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
margin: auto;
}

@media screen and (orientation: portrait) {
.first  {font-size: 5.5vh;}
.second {font-size: 2.4vh;}
.third  {font-size: 2vh;}
.fourth {font-size: 1vh;}
@keyframes hor-movement { from { margin-left: 5vw; } to { margin-left: 15vw; } }
@keyframes ver-movement { from { margin-top: 5vh; } to { margin-top: 70vh; } }
.center{
width: 80vw;
}
.bound {
animation-name: hor-movement, ver-movement;
animation-duration: 30s, 60s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 80vw;
height: 25vh;
}
}

@media screen and (orientation: landscape) {
.first {font-size: 8vw;}
.second {font-size: 3vw;}
.third {font-size: 2vw;}
.fourth {font-size: 1vw;}
@keyframes hor-movement { from { margin-left: 2vw; } to { margin-left: 42vw; } }
@keyframes ver-movement { from { margin-top: 5vh; } to { margin-top: 45vh; } }
.center{
width: 55vw;
}
.bound {
animation-name: hor-movement, ver-movement;
animation-duration: 60s, 30s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 55vw;
height: 40vh;
}
}
    
.bar {
background: var(--background-color);
color: var(--text-color);
overflow: hidden;
position: fixed;
bottom: 1vw;
left: 0;
width: 100%;
text-align: center;
}

table {
width: 100%;
border: 1px solid var(--table-border-color);
border-collapse: collapse;
}
td, th {
padding: .25rem .5rem;
border: 1px solid var(--table-border-color);
white-space: nowrap;
text-align: left;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
background-color: var(--table-odd-row-bg-color);
}

.power {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: space-evenly;
}