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

body { 
    background-image: 
url(https://fae-ring.neocities.org/background.jpg);
background-repeat: repeat;
align-items: center;
align-content: center;
text-align: center;
}

.banner  {
    font-family: mynerve;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.185);
}

.banner h1 {
    
text-shadow: 0px 3px 9px #d8e2d9, 0px 8px 12px #000000;
        color: rgb(209, 188, 248);
        font-size: 60px;
		
}
.banner h3 {
    border: dotted;
      transform: rotate(-5deg);
      color: rgb(218, 155, 62);
}
.banner h2 {
    color: aliceblue;
    padding: 10px;
}

.banner h4 {
    background: white;
    border-radius: 0.4em;
    padding: 18px;
    transform: rotate(3deg);
    display: inline-block;
    font-size: 29px;

}


.comiccircle{
margin-left: 50px;
margin-right: 50px;    width: auto;


    }
      

      .comic{ 
        border-radius: 24px;
        display: inline-table;
        left: 0px;
        opacity: .9;
        transition: .5s ease;

      }
.comic img {
  border-radius: 24px;
}
      
      .comic:hover {
        opacity: 1;
        transform: translateY(-20px);
          box-shadow: 0 0 200px rgba(255, 255, 255, 0.836);
        
      }

      .comic .overlay {
        width:360px;
        position: absolute;
        top: 50%;
        background: rgba(0, 0, 0, 0.623);
        color: rgb(255, 255, 255);
        padding: 8px;
        opacity: 0%;
      }

      .comic:hover .overlay {
        opacity: 100%;
      }      

      footer {  
        padding: 100px;
        margin: 1px;
        font-family: mynerve;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.185);
       color: aliceblue; 
      }

      
      footer a {
        color: wheat
      }