* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: normal;
}

body {
  font-family: "Wanted Sans", sans-serif;
  font-size: 20px;
}

h1 {
  font-size: 44px;
  font-weight: bold;
  line-height: 1.4;
  word-break: keep-all;
}

p {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  word-break: keep-all;
  padding: 20px;
}

.slide{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px;
}

.viewport{
    position: relative;
    width: 100%;
    height: 100vh;
}

.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1.6;
  padding-bottom: 10px;
}

input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#s1:checked ~ .viewport .s1,
#s2:checked ~ .viewport .s2,
#s3:checked ~ .viewport .s3,
#s4:checked ~ .viewport .s4,
#s5:checked ~ .viewport .s5,
#s6:checked ~ .viewport .s6,
#s7:checked ~ .viewport .s7,
#s8:checked ~ .viewport .s8,
#s9:checked ~ .viewport .s9,
#s10:checked ~ .viewport .s10

{
  display: flex;
}

label {
  all: unset;
  cursor: pointer;
  display: block;
  text-align: center;
}

.nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.nav label {
  padding: 30px;
}

.nav1, .nav2, .nav3, .nav4, .nav5, .nav6, .nav7, .nav8, .nav9, .nav10
{
  display: none;
}

#s1:checked ~ .viewport .nav1 { display: grid; }
#s2:checked ~ .viewport .nav2 { display: grid; }
#s3:checked ~ .viewport .nav3 { display: grid; }
#s4:checked ~ .viewport .nav4 { display: grid; }
#s5:checked ~ .viewport .nav5 { display: grid; }
#s6:checked ~ .viewport .nav6 { display: grid; }
#s7:checked ~ .viewport .nav7 { display: grid; }
#s8:checked ~ .viewport .nav8 { display: grid; }
#s9:checked ~ .viewport .nav9 { display: grid; }
#s10:checked ~ .viewport .nav10 { display: grid; }

.viewport .slide:nth-child(even)
{
  background-color: DarkSlateGray;
  color: PowderBlue;
}

.viewport .slide:nth-child(odd)
{
  background-color: DarkSlateBlue;
  color: DarkKhaki;
}

.slide a {
  text-decoration: none;
  font-weight: bold;
}

.viewport .slide:nth-child(odd) a
{
  color: DarkKhaki;
}

.viewport .slide:nth-child(odd) a:hover
{
  color: PaleGoldenRod;
}

.viewport .slide:nth-child(even) a
{
  color: PowderBlue;
}

.viewport .slide:nth-child(even) a:hover
{
  color: LightCyan;
}

#s1:checked ~ .viewport .footer label,
#s3:checked ~ .viewport .footer label,
#s5:checked ~ .viewport .footer label,
#s7:checked ~ .viewport .footer label,
#s9:checked ~ .viewport .footer label
{
  color: DarkKhaki;
}

#s2:checked ~ .viewport .footer label,
#s4:checked ~ .viewport .footer label,
#s6:checked ~ .viewport .footer label,
#s8:checked ~ .viewport .footer label,
#s10:checked ~ .viewport .footer label
{
  color: PowderBlue;
}


/* 등장 애니메이션 */
@keyframes fadeUp {
  0%
  {
    opacity: 0;
    transform: translateY(20px);
  }
  100%
  {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 기본 상태 */
.slide h1,
.slide p
{
  opacity: 0;
  transform: translateY(20px);
}

/* 슬라이드가 나타날 때 */
#s1:checked ~ .viewport .s1 h1,
#s2:checked ~ .viewport .s2 h1,
#s3:checked ~ .viewport .s3 h1,
#s4:checked ~ .viewport .s4 h1,
#s5:checked ~ .viewport .s5 h1,
#s6:checked ~ .viewport .s6 h1,
#s7:checked ~ .viewport .s7 h1,
#s8:checked ~ .viewport .s8 h1,
#s9:checked ~ .viewport .s9 h1,
#s10:checked ~ .viewport .s10 h1
{
  animation: fadeUp 0.8s ease forwards;
}

#s1:checked ~ .viewport .s1 p,
#s2:checked ~ .viewport .s2 p,
#s3:checked ~ .viewport .s3 p,
#s4:checked ~ .viewport .s4 p,
#s5:checked ~ .viewport .s5 p,
#s6:checked ~ .viewport .s6 p,
#s7:checked ~ .viewport .s7 p,
#s8:checked ~ .viewport .s8 p,
#s9:checked ~ .viewport .s9 p,
#s10:checked ~ .viewport .s10 p
{
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.4s
}

#s10:checked ~ .viewport .s10 h1 {
  font-size: 60px;
  font-weight: bold;
  line-height: 1.4;
  word-break: keep-all;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}