틀:모퉁이 뜨개방 with 카페/styles.css

.passpyo-rose {
  background: linear-gradient(90deg, rgba(223,176,176,1) 0%, rgba(242,239,208,1) 100%);
  text-align: center;
  font-weight: bold;
}

.passpyo-cosmos {
  background: radial-gradient(circle, rgba(226,205,214,1) 0%, rgba(198,184,206,1) 50%, rgba(171,187,205,1) 100%);
  color: #181020;
  text-align: center;
  font-weight: bold;
}

.passpyo-ice {
  background-color: #4B4E99;
  color: white;
  text-align: center;
  font-weight: bold;
}

.passpyo-opera {
  background-color: #FDEDCD;
  color: #DB5235;
  text-align: center;
  font-weight: bold;
}

.passpyo-castle {
  background-color: #504341;
  color: #F89687;
  text-align: center;
  font-weight: bold;
}

.passpyo-trad {
  background-color: #F3E3BB;
  color: #514425;
  text-align: center;
  font-weight: bold;
}

.passpyo-dino {
  background-color: #D7CDC8;
  color: #4C4440;
  text-align: center;
  font-weight: bold;
}

.passpyo-diary {
  background-color: #FAF2F0;
  color: #DE6744;
  /* text-decoration: solid underline ;
  text-decoration-thinkness: 0.3rem;
  text-decoration-color: #FFE8B0; */
  text-align: center;
  font-weight: bold;
}

.passpyo-train {
  background-color: #FFF3D7;
  color: #3B3F22;
  text-align: center;
  font-weight: bold;
}

.passpyo-summer {
  background-color: #FFF3B3;
  color: #1499C7;
  text-align: center;
  font-weight: bold;
}

.passpyo-but {
  background-color: #FFE0E9;
  color: #32151E;
  text-align: center;
  font-weight: bold;
}

.passpyo-mun {
  background-color: #7D6446;
  color: white;
  text-align: center;
  font-weight: bold;
}

.passpyo-dawn {
  background-color: #6A66A5;
  color: white;
  text-align: center;
  font-weight: bold;
}

.passpyo-tea {
  background-color: #236F55;
  color: white;
  text-align: center;
  font-weight: bold;
}

.passpyo-xmas {
  /*background-color: #228D2B;*/
  background: repeating-linear-gradient(45deg, #228D2B, #228D2B 10px, #DC143C 0, #DC143C 20px);
  color: #FFD973;
  text-align: center;
  font-weight: bold;
}

.passpyo-rom {
  background-color: #FFDDDD;
  color: #E06B82;
  text-align: center;
  font-weight: bold;
}

.passpyo-alice {
  background-color: #FFF5C9;
  color: #2688A0;
  text-align: center;
  font-weight: bold;
  background-image: linear-gradient(45deg, #CCECE9 25%, transparent 25%, transparent 75%, #CCECE9 75%, #CCECE9), linear-gradient(-45deg, #CCECE9 25%, transparent 25%, transparent 75%, #CCECE9 75%, #CCECE9);
  background-size: 25px 25px;
}

.passpyo-camp {
  background-color: #303C56;
  color: white;
  text-align: center;
  font-weight: bold;
}

.passpyo-sea {
  background-color: #ADE4FA;
  color: #36819F;
  text-align: center;
  font-weight: bold;
}

.passpyo-punk {
  background-color: #634D3D;
  color: #FFF2BD;
  text-align: center;
  font-weight: bold;
}

.passpyo-dog {
  background-color: #D9FCFC;
  color: #51ABCA;
  text-align: center;
  font-weight: bold;
}

.passpyo-cat {
  background-color: #F9F5ED;
  color: #CC7B65;
  text-align: center;
  font-weight: bold;
}

.special {
  background-color: #FFD6EA;
  color: #8C325E;
  text-align: center;
  font-weight: bold;
}

.pyo {
  font-size: 0.85rem;
  font-weight: bold;
  margin:auto;
}

/*열 정리*/
.container {
  display: grid;
}

.container.three-columns {
  grid-template-columns: repeat(3, 1fr);
}

.container.four-columns {
  grid-template-columns: repeat(4, 1fr);
}

.container.five-columns {
  grid-template-columns: repeat(5, 1fr);
}

.container div {
  height: 105px;
  margin: 0.3rem;
  text-align: center;
  line-height: 3em;
}