@font-face {
    font-family: "Comic Sans MS";
    src: url(https://playfulplanets.com/comic.ttf) format("truetype");
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #0A415F;
    font-family: "Comic Sans MS", Arial, Verdana, "Source Sans Pro", "Nanum Gothic", sans-serif;
}

h1, h2, h3 {
    margin: 10px 0;
    font-weight: bold;
}

h1 {
    color: #E3B71C;
    font-size: 1.125rem; /* 18px */
}

h2 {
    color: #988fbe;
    font-size: 1rem; /* 16px */
}

h3 {
    color: #988fbe;
    font-size: 1rem; /* 16px */
}

.base-text {
    font-weight: bold;
    font-family: "Comic Sans MS", Arial, Verdana, "Source Sans Pro", "Nanum Gothic", sans-serif;
}

.text1, .text3, .text5 {
    color: #ffffff;
    font-size: 1rem; /* 16px */
}

.text2, .text4, .text6 {
    color: #E3B71C;
    font-size: 1rem; /* 16px */
}

.text3, .text4, .text6 {
    font-style: italic;
}

.text9 {
    color: #988fbe;
    font-size: 1rem; /* 16px */
}

.text5 {
    font-size: 0.75rem; /* 12px */
}

.text6 {
    font-size: 0.75rem; /* 12px */
}

A.link4, A.link5 {
    text-decoration: none;
    font-weight: bold;
}

A.link4 {
    color: #ffffff;
    font-size: 1rem; /* 16px */
}

A.link4:hover, A.link4:focus {
    color: #988fbe;
    text-decoration: underline;
}

A.link5 {
    color: #ffffff;
    font-size: 0.75rem; /* 12px */
}

A.link5:hover, A.link5:focus {
    color: #E3B71C;
    text-decoration: underline;
}

/* Figure and image caption styling */

figure {
  margin: 0;
  padding: 0;
}

figure img {
  display: block;
}

figcaption {
  text-align: center;
  margin-top: 4px;
}

@media (max-width: 600px) {
    h1 {
        font-size: 1rem; /* 16px */
    }
    h2 {
        font-size: 0.875rem; /* 14px */
    }
    h3 {
        font-size: 0.75rem; /* 12px */
    }
    .text1, .text2, .text3, .text4, .text5, .text6 {
        font-size: 0.875rem; /* Adjusted font size */
    }
}

/* Rounded corners and shadow for embedded videos */

table iframe {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border: 0;
  display: block;
}