body{
    display: flex;
    flex-direction: column; 
    justify-content: center;
    zoom: 90%;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("./comic-pattern.jpg") center/cover no-repeat;
    z-index: -1;
}

.primaryColor {
    color: white;
}

.primaryBorderRadius {
    border: 4px solid white;
}

.primaryBackground {
    background-color: white;
}

.secondaryColor {
    color: grey;
}

.secondaryBackground {
    background-color: grey;
}

.secondaryBorderRadius {
    border: 4px solid grey;
}

.tertColor {
    color: #e74c3c;
}

.tertBorderRadius {
    border: 4px solid #e74c3c;
}

.blackBorderRadius {
    border: 4px solid black;
}

.borderRadius {
    border-radius: 15px;
}

.header {
    width:100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none;
}

.octagon {
    width: 50%;
    height: 100px;
    background-color: #e74c3c;
    clip-path: polygon(

    20% 0%, 
    80% 0%, 
    100% 100%, 
    0% 100%
        );
    margin-top: auto;

    background-image: url("../hexagon-pattern.jpg");
    background-repeat: repeat;
    background-position: center;
}

.rectangle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    clip-path: square(5% 20% 15% 10%);
    overflow-y: auto;
    overflow-x: hidden;
    background-image: url("../hexagon-pattern.jpg");
    background-repeat: repeat;
    background-position: center;
    min-width: 67%;
}
.inline {
    display: inline-block;
}

button {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 1rem;
}

.gallery-column {
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

@keyframes slideIn {
from {
    transform: translateX(-100px);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
}

.padding2 {
    padding: 2rem;
}

.halfWidth {
    margin-right: 30%;
}

.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}