body {
  background: radial-gradient(50% 50% at 50% 50%, #FFA68A 0%, #6D4444 46.87%, #1E1E1E 100%);;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'EB Garamond', serif; line-height: 40px;
  color: white;
  padding: 50px;
  max-width: 700px;
  margin: 0 auto;
  column-count: 3;
}

.link {
  color: #FFA68A;
  font-size: 10px;
}
.container {
  max-width: 700px;
}

.example {
  padding: 10px;
}

.asterisk {
  text-align: center;
  font-size: 25px;
  transition: transform 1.2s ease-in-out;
  white-space: nowrap;
  }

.asterisk:hover {
  transform: rotateY(360deg);
}

.arrow {
  position: absolute;
  border-radius: 10px;
  text-shadow: 0px 0px 10px #ff2626;
}
h1 {
  font-style: normal; font-weight: normal; line-height: 46px;
  text-align: center;
  font-size: 20px;
}

h2 {
  font-style: italic; font-weight: normal;
  text-align: center;
  font-size: 12px;
}

p {
  font-size: 12px;
  letter-spacing: 1.5px;
}

@media (max width: 1440px) {
  h1 {font-size: 18px; font-style: normal; font-weight: normal; text-align: left; line-height: 30px;}
  h2 {font-size: 12px; font-style: normal; font-weight: normal; text-align: center;}
  p {font-size: 12px; line-height: 50px;}
  body {column-count: 3;}
  .example {padding: 10px; display: block;}
}

@media (max-width: 768px) {
  h1 {font-size: 24px; font-style: normal; font-weight: normal; letter-spacing: 1px;}
  h2 {font-size: 14px; text-align: center;}
  p {font-size: 14px; line-height: 40px;}
  body  {padding: 50px; column-count: 2;}
  .example {display: block; padding: 50px;}
}

@media (max-width: 480px) {
  h1 {font-size: 36px; font-style: normal; font-weight: normal;letter-spacing: 2px;}
  h2 {font-size: 16px; text-align: center;}
  p {font-size: 12pt; line-height: 28px; text-align: left;}
  body {padding: 100px; column-count: 1;}
  .example {display: block; padding: 10px;}
}

@media (max-width: 320px) {
  h1 {font-size: 48px; font-style: normal; font-weight: normal;}
  h2 {font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: 1px;}
  body {background: radial-gradient(50% 50% at 50% 50%, rgba(255, 99, 99, 0.48) 0%, rgba(255, 255, 255, 0) 100%); letter-spacing: -2px;
  color: white;
  text-shadow: 0px 0px 10px #FF6767;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 80px;
  column-count: 1;}
  h1 {text-decoration: underline; text-align: left;}
  .example {display: none;}
  h2 {text-shadow: 0px 0px 10px #ff4545;}





img {
  max-width: 100%;
}