@import url('https://fonts.googleapis.com/css?family=Barriecito|Work+Sans&display=swap');


body, html {
  height: 100%;
  margin: 0;
     padding: 0;
    font-family: 'Work Sans', sans-serif;;
}
@media all and (min-width: 960px) {
    body{
        font-size: 40px;
    }
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    body{
        font-size: 20px;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    body{
        font-size: 16px;
    }
 
}

*.image-box {
  /* Here's the trick */
  box-shadow: inset 0 0 0 100vw rgba(245, 245, 220, 0);

  /* Basic background styles */
  background: var(--image-url) center center;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Add a transition, just for fun */
  transition: box-shadow .5s ease-out;
}
.image-box:hover {
    box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.91);
}*


.hero-text {
  text-align: center;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.hero-text2 {
  text-align: center;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);

}
h2
{ font-family: 'Work Sans', sans-serif;
text-align: center;
font-size:24px;
font-weight: bold;
    text-decoration: overline;
margin:0px;
padding: 5px;}

h3
{ font-family: 'Work Sans', sans-serif;
text-align: center;
font-size:21px;
font-weight: bold;
    text-decoration: overline;
margin:5px;
padding: 5px;}

h4
{ font-family: 'Work Sans', sans-serif;
text-align: left;
font-size:18px;
font-weight: bold;
    text-decoration: overline;
margin:10px;
padding: 5px;}

p1
        { color:beige;
            font-family: 'Work Sans', sans-serif;
            line-height: 1.5;
            letter-spacing: 1px; 
            width: 90px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
            
}
p1 {
  animation: colorchange 10s infinite; 
}

@keyframes colorchange
{
  0%   {background: red;}
  50%  {background: black;}
  100% {background: red;}
}


p2
        { color:beige;
            background-color: black;
            font-family:  'Rock Salt', cursive;
            line-height: 1.3;
            text-align: left;
            letter-spacing: 1px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: auto;
  width: 40%;
}

#demo {
    text-align: center;
    color:beige;
}
    
a.external:link {color: white; font-weight: bold; }
a.external:visited {color: floralwhite; font-weight: bold; }
a.external:hover {text-decoration: overline;}
a.external:active {color: black; }

a:link {
  color: #e33434;
}

a:visited {
  color: #0b6a0b;
}


a:hover {
  color: #a2165c;
    text-decoration: overline;
}


a:active {
  color: #10109f;
}


}