/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #881f1e;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
}

button{
    font-family: porkys;
    color: #f1f1f1;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    letter-spacing: 5px;
    transition: ease-in-out 0.5s;
    margin-left: 3rem;
}

h2{
    font-family: porkys;
    color: #881f1e;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    letter-spacing: 5px;
    transition: ease-in-out 0.5s;
}

.entry{
    border: 1px dashed #881f1e;
    width: 90%;
    height: auto;
    margin: auto;
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.piccy{
    width: 150px;
    height: 250px;
    float: left;
    padding-right: 1rem;
}

.piccy img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px double #881f1e;
}

hr{
    width: 60%;
}

#spoiler{ 
  color: black; 
  background-color: black;
}

#spoiler:hover{
  color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
   background-color: #FAF9EF;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #FAF9EF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

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