:root {
  --pj-primary: #92AFDD;

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


body {
  font-family: 'Josefin Sans', sans-serif !important;
  background-image: url(/img/pendragon-and-jinn-tiled-background.png);
  background-color: var(--pj-dark-bg) !important;
  scroll-behavior: smooth;
  color: #fff !important;
  font-size: 16px !important;
  margin:auto;
  width: 100%;

}

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;

}



h2 {
  font-size: 2.5em !important;
  font-weight: 300 !important;
}

h3 { 
  font-size: 1.5em !important;
}


.dropshadow {
  -webkit-box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.10);
  -moz-box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.10);
  box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.10);
}

.card {
  background-color: #0A0E1C !important;
  border-radius: 24px !important;

}



.pj-btn {
  max-height: 72px !important;
  height: 100% !important;
  border-radius: 30px !important;
  background-color: var(--pj-primary) !important;
  transition: 0.5s background-color ease-in-out;

  
}


.pj-btn:hover {
  text-decoration: none;
  background-color: var(--pj-primary-light);

}

.dark-text{
  color: var(--pj-text-dark) !important;
  padding: 12px 24px 10px 24px;

}


.center-align{
  height: 100%;
  max-height: 180px !important;
  vertical-align: middle;
}

.standfirst {
  font-size: 1.5rem !important;
  font-weight: 300;

}

.logo {
  max-width: 64px;
  width: 100%;
}


@media (min-width: 768px) {

  h3 { 
    font-size: 1.5em !important;
  }


h2 {
  font-size: 3em !important;
}

.title {
  font-size: 4em !important;
}

.logo {
  max-width: 100px !important;
  width: 100%;
}

.standfirst {
  font-size: 1.8rem !important;
  font-weight: 300;

}

}