@font-face {
  font-family: halloween;
  src: url(../fonts/Hell-A-Ween-Regular.otf);
}

@font-face {
  font-family: BethEllen;
  src: url(../fonts/BethEllen-Regular.ttf);
}

::selection {
  background: #ffffff; /* WebKit/Blink Browsers */
  color: #800000;
}
::-moz-selection {
  background: #ffffff; /* Gecko Browsers */
}

body {
    color: white;
    background-image: url("../imgs/cobweb_red.gif");
    font-family:Georgia, 'Times New Roman', Times, serif;
}

hr {
    border-width: 3px;
}

#title {
    font-size: calc(2.375rem + 1.5vw);
    font-family: "halloween", "Tahoma", "Sans Serif";
}

#subtitle {
    font-size: calc(2rem + 1vw);
    font-family: "halloween", "Tahoma", "Sans Serif";
}

.halloween-font {
    font-family: "halloween", "Tahoma", "Sans Serif";
}

.disco-font {
    font-family: "BethEllen", "Tahoma", "Sans Serif";
}

.title {
    font-size: calc(1.375rem + 1.5vw);
    font-family: "halloween", "Tahoma", "Sans Serif";
}

.content {
    margin: 1rem;
    padding: 1.25rem;
    border:5px groove black;
    background-color:rgba(255, 30, 0, 0.541);
}

.blood {
       color:silver;
       text-shadow:
       4px 4px 1px #300000,
       4px 6px 1px #400000,
       4px 8px 1px #500000,
       4px 10px 1px #600000,
       4px 12px 1px #700000,
       4px 14px 1px #800000,
       4px 16px 1px #900000,
       4px 18px 1px #A00000,
       4px 20px 1px #B00000,
       4px 22px 1px #C00000,
       4px 24px 1px #D00000,
       4px 26px 1px #E00000,
       4px 28px 1px #F00000,
       4px 30px 1px #FA0000,
       4px 32px 1px #FB0000,
       4px 34px 1px #FC0000,
       4px 36px 1px #FD0000,
       4px 38px 1px #FE0000,
       4px 40px 2px #FF0000;
}

.carpenter {
    color: white;
    text-shadow:
   -3px -3px 0 #800000,  
    3px -3px 0 #800000,
    -3px 3px 0 #800000,
     3px 3px 0 #800000;
}

.carpenter-black {
    color: white;
    text-shadow:
   -2px -2px 0 #000,  
    2px -2px 0 #000,
    -2px 2px 0 #000,
     2px 2px 0 #000;
}

/* unvisited link */
a:link {
  color: orange;
}

/* visited link */
a:visited {
  color: darkorange;
}

/* mouse over link */
a:hover {
  color:orangered;
}

/* selected link */
a:active {
  color: blue;
}

.image-flash {
  animation-name: lightningSwap;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: cubic-bezier(1,0,0,1);
}

@keyframes lightningSwap {
  0% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(1) contrast(1);
  }

  40% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(1) contrast(1);
  }

  45% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(10) contrast(1);
  }
  
  48% {
    content: url('../imgs/flicker-scary.png');
    filter: brightness(10) contrast(1);
  }

  50% {
    content: url('../imgs/flicker-scary.png');
    filter: brightness(1) contrast(1);
  }

  52% {
    content: url('../imgs/flicker-scary.png');
    filter: brightness(10) contrast(1);
  }

  55% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(10) contrast(1);
  }

  60% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(1) contrast(1);
  }

  100% {
    content: url('../imgs/flicker-normal.png');
    filter: brightness(1) contrast(1);
  }
}

#photos {    
   line-height: 0;       
    -webkit-column-count: 5;    
    -webkit-column-gap: 0px;    
    -moz-column-count: 5;
    -moz-column-gap: 0px;
     column-count: 5;    
     column-gap: 0px;    
}  
#photos img {    
   width: 100% !important;    
   height: auto !important;
   padding: 6px;
}  
#photos{    
   display:inline-block;    
   margin-right: auto;    
   margin-left: auto;
}

@media (max-width: 1000px) {
   #photos {
   -moz-column-count:    3;
   -webkit-column-count: 3;
   column-count:         3;
   }
  }  
@media (max-width: 800px) {
   #photos {
   -moz-column-count:    2;
   -webkit-column-count: 2;
   column-count:         2;
   }
  }  
@media (max-width: 400px) {
   #photos {
   -moz-column-count:    1;
   -webkit-column-count: 1;
    column-count:        1;
   }
  }

  #timeline {    
   line-height: 0;       
    -webkit-column-count: 3;    
    -webkit-column-gap: 0px;    
    -moz-column-count: 3;
    -moz-column-gap: 0px;
     column-count: 3;    
     column-gap: 0px;    
}  
#timeline img {    
   width: 100% !important;    
   height: auto !important;
   padding: 6px;
}  
#timeline{    
   display:flex;    
   margin-right: auto;    
   margin-left: auto;
}

* {
  cursor: url('https://cdn.cursors-4u.net/previews/zombie-rock-on-8e71e9a4-32.webp') 40 34, auto !important;
}