@font-face {
  font-family: "SNProMedium";
  src: url("fonts/SNPro-Medium.otf");
}

@font-face {
  font-family: "SNProMedium";
  src: url("fonts/SNPro-Medium.otf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  font-family:
    SNProMedium,
    SNProMedium Fallback;
  color: #5b5955;
}

body {
  background-image: url("img/background/bg.png");
  background-repeat: repeat;
}
.toplevel {
  display: flex;
  flex-direction: column;
  margin: auto;

  max-width: 50em;
  background-color: #ffffff;
  border-style: outset;
  border-image-source: url("img/CDE_border_c1.png");
  border-image-width: 64px;
  border-image-slice: 64;
  border-image-repeat: repeat;
}
.header {
}
.header .showcase {
  display: flex;
  justify-content: center;
}
.header .showcase img {
  max-width: 50em;

  overflow: hidden;
  padding: 7 7 7 7;
}
.header .title {
  font-family: Times New Roman;
  font-size: 8em;
  text-align: center;

  color: white;
}
.header .title img {
  opacity: 0.6;
  width: 40%;
  max-width: 512px;
}
.desc {
  font-family: "SNProMedium";
  font-size: 1em;
  text-align: left;
  margin: auto;
  color: #5b5955;
  max-width: 80%;
  padding: 24px;
}
.header .linkbar {
  margin: 32px;
  font-family: "SNProMedium";
  font-size: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 40em;

  margin: auto;
  margin-top: 0px;
  padding-left: 32px;
  padding-right: 32px;
}

.link {
  color: #5b5955;
  background-color: #ffffff;
  border-color: #ffc1f9;
  border-style: outset;
  padding: 4px;
  border-width: 4px;
  width: 8em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

/*
@media (orientation: portrait){
.link{
	font-size: 2em;
}
}
*/
.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer {
  font-family: "DungGeunMo";
  font-size: 1em;
  color: #ff9ff3;
  text-align: center;
  margin: 32px;
}

.grid-table {
  max-width: 90%;
  height: auto;
  margin: 0 auto;
}

.grid-table img {
  max-width: 100%;
  height: auto;
}

.talk {
  margin: 32 auto;
  padding: 5px;
  background-color: #ffffff;
  border-style: double;
  border-image-source: url("img/CDE_border_c1.png");
  border-image-width: 64px;
  border-image-slice: 64;
  border-image-repeat: repeat;
}
.character-cell {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.character-cell img {
  transition: opacity 0.3s;
}

.character-cell:hover img {
  opacity: 0.7;
}

.character-text {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: 24px; 
  max-width: 100%;
  color: rgb(41, 41, 41);
  padding: 5px;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 25px;
  z-index: 999;
  cursor: pointer;
  text-shadow: 0 0 4px rgb(255 255 255 / 50%);
}


/* Media query for smaller screens */
@media (max-width: 768px) {
  .character-text {
    font-size: 14px; 
  }
}

@media (max-width: 480px) {
  .character-text {
    font-size: 10px; 
  }
}

.character-cell:hover .character-text {
  opacity: 1;
}

a {
  text-decoration: none;
}
.desc a {
  color: #ff9ff3;
}

.linkbar .link:hover {
  color: #ffffff;
  background-color: #ff9ff3;
  border-color: #ffc1f9;
  border-style: outset;
}
.linkbar .link:active {
  border-style: inset;
}

blockquote {
  background: #fff8fe;
  border-left: 10px solid #ffdaf9;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
blockquote:before {
  color: #ffb2ee;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/* This applies to the whole webpage */
html {
  scrollbar-width: thin;
  scrollbar-color: pink white;
}

/* This is needed for webkit browsers like Chrome and Safari */
html::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track {
  background: white;
}

html::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 20px;
  border: 3px solid white;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #ff69b4; /* A different pink for hover state */
}