@keyframes wipe {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  to { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}

@keyframes wipe-top {
  from { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity:1; }
}

html {
  cursor: url('../images/cursor_hand.png'),auto;
  color:#3F2925;
  font-family: Georgia, serif;
}

::selection {
  color: #ffd581;
  background: #dd1313;
}

h1, h2, h3, h4, h5, p {
  z-index:999;
  position: relative;
}

h1, h2, h3, h4 { margin:2% 0; }
h1 { font-size:clamp(33px, 6.3vw, 67px);}
h2 { font-size:clamp(29px, 5.3vw, 52px);}
h3 { font-size:clamp(24px, 4.3vw, 40px);}
h4 { font-size:clamp(17px, 3.3vw, 29px);}

h5 {
  font-size:clamp(15px, 2.7vw, 18px);
  line-height:clamp( 20px, 3.3vw, 25px);
  margin:0.23vw;
}
p, a, li {
  font-size:clamp(13px, 2.23vw, 16px);
  line-height:clamp(17px, 3.12vw, 27px);
}
a { 
  color: #4f5ae5;
  font-weight:bold;
}
a:hover { 
  color:crimson;
  transition:0.7s; 
} 
a.alt { 
color:black;
font-weight:unset;
}
a.alt:hover { color:#4f5ae5; }
i { margin-right: 2px; }

hr {
  background-image: url('../images/colorbar.png');
  border-radius: clamp(1px, 0.5vw, 7px);
  margin: 0.5vw auto 0.5vw auto;
}
hr.rainbow, hr.rainbowfull {
  background: url('../images/RainbowBorder.png');
  max-height: 142px;
  margin: clamp(1px, 0.5vw, 15px) auto;
}
hr.tulips {
  background: url('../images/tripletulip.gif');
  max-height:34px;
}
hr.littleguys, hr.littleguysfull {
  background: url('../images/borderheads.gif');
  max-height:27px;
}
hr, hr.rainbow, hr.rainbowfull, hr.tulips, hr.littleguys, hr.littleguysfull {
  min-height:16px;
  height:3vw;
  width:70%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

hr.littleguysfull, hr.rainbowfull, hr { max-width:unset; }
hr, hr.rainbowfull {
  background-size:100% 100%;
  height: 1.5vw;
  width:90%;
}
hr.rainbowfull { max-width:600px; }
hr.tulips { min-height:23px; }
hr.littleguysfull { 
  background-repeat: repeat-x; 
  width:100%;
}


details {
  border: 0px solid #aaa;
  padding: 0.5em 0.5em 0;
}
summary {
  font-weight: bold;
  color: #3366CC;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  text-align: center;
  content: "This text replaces the original.";
}
details[open] {
  border-bottom: 1px solid #aaa;
  padding: 0.5em;
}
details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}
summary:hover { 
  color:crimson;
  border-color:crimson;
  transition:1s; 
}


#dog {
  width: clamp(30px, 5vw, 60px);
  height: clamp(30px, 5vw, 60px);
  background-image: url('../images/roach_walk.gif');
  position: relative;
  background-size: contain;
  background-position-y:bottom;
  z-index: 9;
  background-repeat: no-repeat;
  animation-name: barkbark;
  animation-fill-mode: forwards;
  animation-iteration-count: 1; 
  animation-timing-function: linear;
}

.smallcontainer {
  height:1px;
  overflow:visible;
  position:relative;
}

.animate-fade, .animate-wipe, img, video, audio, details { 
  transition-timing-function: ease-out;
  transition-duration:1.7s; 
}
.animate-uptop-fade, hr, details { 
  transition-delay: 1s;
  transition-duration:3s;
  opacity: 0; 
}
.animate-fade { opacity: 0; }
img, .animate-wipe, video, audio { 
  opacity: 1; 
}

.animate {
  opacity: 1;
}