@import url('https://fonts.googleapis.com/css2?family=Sen&display=swap');

@font-face {
  font-family: 'ember';
  src: url("https://assets.codepen.io/769788/AmazonEmber_Bd.ttf") format("truetype");
}

@font-face {
  font-family: 'pb';
  src: url("https://assets.codepen.io/769788/MatisseITC.ttf") format("truetype");
}

@font-face {
  font-family: 'cts';
  src: url("https://assets.codepen.io/769788/clearthespace.otf") format("truetype");
}

@font-face {
  font-family: 'sf';
  src: url("https://assets.codepen.io/769788/sf-thin.ttf") format("truetype");
}

@font-face {
  font-family: 'h1';
  src: url("https://assets.codepen.io/769788/sf-bold.ttf") format("truetype");
}

@font-face {
  font-family: 'bq';
  src: url("https://assets.codepen.io/769788/sf-regular.ttf") format("truetype");
}

@font-face {
  font-family: 'connie';
  src: url('/fonts/avenir-light.otf') format('truetype');
}

@font-face {
  font-family: 'connie-med';
  src: url('/fonts/avenir-med.otf') format('truetype');
}

@font-face {
  font-family: 'connie-fat';
  src: url('/fonts/avenir-fat.otf') format('truetype');
}

/* Change FA Icon Color */

.fa-tiktok {
  color: yellow;
}


/* Blockquotes - updated 9/16/22 */

blockquote{
  display:block;
  opacity: 1;
  background-color: #16566F;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  font-size: 1.1em;
  line-height: 1.2;
  color: #FFFFF0;
  text-align: justify;
  border: 5px solid orange;
  
  /*Box Shadow */
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "✍";  /*Unicode for Left Double Quote*/
  font-size: 1em;
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
/*   background: yellow; */
  cursor: pointer;
  padding: 0 3px;
  color: orange;
}

blockquote a:hover{
 color: white;
}

blockquote em{
  font-style: italic;
}



body {
			font-family: bq;
font-size: 1.5rem;
/* top, right, bottom, and left */
padding: 0rem 2rem 0rem 2rem;
background-color: #FEFAE0;
background-color: #FDF0BC;
background-color: #16566F;
font-family: 'connie', sans-serif;
/* background-image: url("https://cdn.pubwriter.com/files/backgrounds/canvas.jpg"); */
		}

.button-pw {
    width: 300px;
    background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    -webkit-animation: play 1.6s ease-in infinite;
    text-align: center;
    color: #fff;
    text-decoration: none;
    display: block;
    top: 45vh;
    font-weight: normal;
    border-radius: 6px;
    overflow: hidden;
}

.button-pw:hover {
    -webkit-animation: play 1.6s ease-in infinite;
    opacity: 0.8;
}

.button-pw span {
    padding: 14px 0;
    font-size: 22px;
    display: block;
    margin: 3px;
    background: #000;
    border-radius: 3px;
}

a.button-pw:hover {
  color: yellow;
  text-decoration: none;
}

@-webkit-keyframes play {
    0% {
        background-position: 0px;
    }
    20% {
        background-position: -110px;
    }
    35% {
        background-position: -180px;
    }
    50% {
        background-position: -210px;
    }
    80% {
        background-position: -350px;
    }
    100% {
        background-position: -390px;
    }
}
.pubwriter {
/* background-color: #FAEDCD; */
/* background-color: #E9EDC9; */
background-color: whitesmoke;
background-color: #F5F0EA;
background-color: #FFFFF0;
padding: 2rem;
border-radius: 15px;
font-family: 'connie', sans-serif;
  }

.pubwriter hr, hr {
  border: 0;
    background-position: 50%;
    box-sizing: border-box;
    height: 4px;
    text-align: center;
    max-width: 550px;
    margin: 25px auto 10px;
   background-image: linear-gradient(125deg, red, orange, yellow, green, blue, indigo, violet);
   background-size: 400% 400%;
   animation: bganimation 25s infinite;
}

@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

.navbar-brand {
/* 			font-family: ember; */
font-family: cts;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 3rem;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-dark .navbar-nav .nav-link {
  color: orange;
}

h1 {
font-family: h1;
font-size: 2em;
text-align: center;
}

h2 {
/* font-family: pb; */
/* font-size: 1em; */
}

h3 {
  /* 			font-family: ember; */
  font-family: 'Sen', sans-serif;
  font-size: 1.5em;
  /* background-color: darkred; */
  /* background-color: #B1C3BA; */
  /* color: white; */
  border-radius: 5px;
  text-align: center;
  }

h4 {
/* 			font-family: pb; */
font-size: 1em;
font-weight: 800;
color: darkblue;
font-size: 1.5rem;
}

blockquote {
			font-family: bq;
}

#rotator img{
    transform-origin:50% 50%;
    animation:8s rotateRight infinite linear;
}

img.resp {
/*  margin: 25px;
 width: 100px;
 height: 100px; */
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 80%;
}

@keyframes rotateRight{
    100%{ transform:rotate(360deg); }
}