@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Frijole&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

:root {
    /* --color-primary: #006241;  */
    --color-secondary: #ffe33d;
    --color-primary: #d50032;
    --color-extra: #d4e9e2;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
   font-family: 'Amatic SC'; 
    background-color: #000;
    color: white;
    /*color: var(--color-primary)*/
}

.title {
    /*  
    font-family:Verdana, Geneva, Tahoma, sans-serif; */
    /* font-family: 'UnifrakturMaguntia'; */
    letter-spacing: 15px;
    font-size: 2em;
    padding-bottom: 90px;
}

.cover {
    width: 80%;
}
h2, h3 {
    color: var(--color-secondary)
}

.lede {
    font-size: 1.5em;
}
.container {
    width: 100%;
    margin: 0 auto;
    margin-top: 10%;
    /*
    font-size: 1.5em;
    font-family: 'Frijole';
    */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* border: 1px solid red; */
    
}

.container h1 {
    line-height: 1.5;
    letter-spacing: 1rem;
   
}

.container h2 {
    font-size: 2rem;
    color: var(--color-secondary);
    /* font-style: italic; */
    margin-top: 20px;
    margin-bottom: 60px;
}

.container #author {
    display: inline-block;
    color: red;
    font-style: italic;
    font-size: 1.75rem;
    margin-top: 35px;
    transforM: rotate(-5deg);
    /* box-shadow: 12px 12px 10px 4px red; */

    -webkit-text-stroke: 1px black;
    color: var(--color-primary);
    text-shadow:
        3px 3px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
}

#booktitle {
    font-size: 4em;
}

.flames {
    font-family: 'Frijole', sans-serif;
    color: #f5f5f5;
    text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px         #F90, 0px -20px 40px #C33;
    font-size: 3rem;
    }

.cover {
    width: 50%;
    /* border: 1px solid yellow; */
    margin-bottom: 100px;
    
}

.scare h2 {
    /* transform: rotate(25deg); */
    font-size: 2.5em;
}

.scares {
    padding-top: 60px;
}

.scare {
    list-style:none;
}

.scares li {
    font-size: 2rem;
}

#killer {
    font-size: 60px;
}

#paypal {
    width: 60%;
    padding-bottom: 60px;

}

#credit {
    width: 300px;
}
#trio {
    border-radius: 10%;
    border: 11px solid red;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    margin-bottom: 80px;
    width: 40%;
    max-width: 400px;
}

#skull {
    border: 11px solid red;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    margin-bottom: 80px;
   width: 40%
    
}

#beauty {
    border: 11px solid red;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    margin-bottom: 80px;
    width: 40%
}


.splatter {
    background-color: black;
    width: 130px;
    display: hidden;    
}

.nightmare {
    background-position: center;
   background-size: cover;
   background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5),  rgba(0, 0, 0, 0.5)), url('img/nightmare.jpg');
}

#maillist {
    padding-bottom: 60px;
    font-size: 2.5em;
}

.maillist {
    text-decoration: none;
    color: var(--color-secondary)
}

.maillist:hover {
    color: white;
    
}

#quotes {
    # background-color: blue;
    font-size: 2.5rem;
    width: 50%;
    padding-bottom: 4rem;
    text-align: center;
    line-height: 1.5 ;
}

#quotes h3 {
    font-size: 3.5rem;
    padding-bottom: 2rem;
}


.quote-list {
    list-style: none;
    background-color: yellow;
}

#quotes li {
    list-style: none;
    padding-bottom: 35px;
}

#quotes a {
    color: var(--color-primary);
}

#footer {
    background-color: red;
}



    @keyframes neon1 {
        from {
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
            0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
        }
        to {
          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
            0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
        }
      }


@media (min-width: 480px) {
        .title {
            font-family: 'Amatic SC';
            
            font-size: 2em;
        }
      
      /*  ul .scares {
            border: 10px solid yellow;
            display: flex;
            flex-direction: row;
        }
            */
    } 
@media (min-width: 768px) {
    .title {
        color: white; 
        font-size: 4.5em;
    }
    
    }
  /*  ul .scares {
        border: 10px solid yellow;
        display: flex;
        flex-direction: row;
    }
        */
} 

@media (min-width: 1024px) {
    .title {
        
        font-size: 6em;
    }
  /*  ul .scares {
        border: 10px solid yellow;
        display: flex;
        flex-direction: row;
    }
        */
}