:root {
  --pj-primary: #1C64D9;

  --pj-bg: #ffffff;
  --pj-dark-bg: #2D313D;
  --pj-text-dark: #0A0E1C;
}


body {
  font-family: "Gamja Flower", sans-serif !important;
  font-weight: 400;
  font-style: normal;
  background-color: var(--pj-dark-bg) !important;
  color: #fff !important;
  font-size: 16px !important;
  margin: auto !important;

}

.ss { 
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  text-align: left !important;
}

.speech {
  border-radius: 8px;
}

.jinn-img {
  background-image: url(/img/jinn-profile-image.png);
  background-size: contain;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 1em;
  background-repeat: no-repeat;

}

white {
  text-decoration: none !important;
  color: #fff !important;
}


.both-img {
  background-image: url(/img/pendragonhoard-kate-and-jinn-profile.png);
  background-size: contain;
  width: 300px;
  height: 250px;
  object-position: bottom;
  border-radius: 0%;
  margin: 1em;
  background-repeat: no-repeat;
  margin:auto;

}
.kate-img {
  background-image: url(/img/kate-profile-image.png);
  background-size: contain;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 1em;
  background-repeat: no-repeat;

}


.kate-work {
  background-size: contain;
  background-repeat: no-repeat;
  margin: 1em;
}


.jinn-work {
  background-image: url(/img/pendragon-jinn-work.png);
  background-size: contain;
  margin: 1em;
  background-repeat: no-repeat;

}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:20px solid #f8f9fa; 
  margin-right:-8px;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left:-8px;
  border-left: 20px solid #f8f9fa;
  
}

p { 
  max-width: 1008px;
  margin: auto;
  font-size: 2.2em !important;
}

.h2-like {
  font-size: 32px !important;

}

.h3-like {
  font-size: 48px !important;
  text-align: center;
}

.h5-like {
  font-size: 1.6em !important;
  text-align: center;
}

a {
  color: var(--pj-primary) !important;
}

a:hover {
  text-decoration: none !important;
  
}

.title {
  font-family: 'Alice', sans-serif !important;
  font-size: 2em !important;
  line-height: 0.9;

}

button { 
  color: var(--pj-primary) !important;
}

@media (min-width: 320px) and (max-width:767px) {



body {
  max-width: 100%;
}

.h2-like {
  font-size: 1.6em !important;
}

p {
  font-size: 1.4em !important;
}



.arrow-left {
  width: 0; 
  height: 0; 
  border-right: 0 solid transparent;
  border-left: 0 solid transparent;
  margin-bottom:-8px;
  margin-right: 102x;
  border-bottom: 0x solid #f8f9fa;
  
}

.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 0 solid transparent;
  border-left: 0 solid transparent;
  border-top: 0 solid #f8f9fa;
  border-bottom: 0;
  
}

.h3-like {
  font-size: 48px;
}

.h5-like { 
  font-size: 1.4rem !important;
}

}