/* general body text*/

p {
    font-family: monospace;
    color: black;
}

h1 {
    text-transform: uppercase;
    font-family: monospace;
}

h3,
h4,
h5,
ul {
    font-family: monospace;
    color: black;
}

a {
    font-family: monospace;
    color: #002aba;
}

body {
    background-color: red;
}

.rightalign {
    text-align: right;
}

/* COVER CSS*/
.covercontainer {
    text-align: center;
    border: 14px dashed black;
    width: 71%;
    max-width: 600px;
    background-color: white;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* page box */
.pagecontainer {
    margin-top: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: red;
}

.contentbox {
    background-color: white;
    padding: 39px;
    border: 14px dashed black;
    width: 80%;
    max-width: 600px;
    box-shadow: 22px 33px 34px rgb(0, 0, 0, 0.5);
    text-align: left;
    margin-bottom: 104px;
}

.namelist {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.namelist li {
    height: 10;
    width: calc(33.33% - 10px);
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;

    text-align: center;
    box-sizing: border-box;
}

.namelist li:hover {
    background-color: black;

}

.namelist li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.blockquote {
    font-family: monospace;
    color: #0094c6;
    border-left: 5px solid #0033e0;
    background-color: rgba(0, 195, 255, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 3s ease-in-out;
}

@keyframes thiss {
    100% {
        letter-spacing: 0.1px;
    }
    50% {
        letter-spacing: 4px;
    }
}

.blockquote:hover em {
    animation: thiss 5s ease-in-out 1;
}

.blockquote2 {
    font-family: monospace;
    color: #ffffff;
    padding-left: 11px;
    font-size: 12px;
    border-left: 5px solid #ffb4b4;
    background-color: rgba(255, 0, 107, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
    transition:
        background-color 5s,
        font-size,
        font-family;
}

.blockquote2:hover {
    font-size: 12px;
    font-family: Apple Chancery;
    background-color: deeppink;
}
@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.blockquote2:hover {
    animation: pulse 1.3s infinite;
}

.blockquote3 {
    font-family: monospace;
    color: #ff0000;
    font-size: 8px;
    padding-left: 10px;
    border-left: 5px solid #ff0000;
    background-color: rgba(255, 0, 0, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
}

.blockquote3:hover {
    font-size: 22px;
    font-family: Impact;
    transition:
        font-size 2s,
        font-family;
}
.blockquote4 {
    font-family: monospace;
    color: #000000;
    padding-left: 10px;
    border-left: 5px solid #7c7c7c;

    background-color: rgba(79, 138, 149, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
    transition: color 2s;
}

.blockquote4:hover {
    color: white;
    font-family: monospace;
}

.blockquote5 {
    font-family: monospace;
    color: #1b00ac;
    padding-left: 10px;
    border-left: 5px solid #cb0000;
    background-color: rgb(121, 112, 40, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
}
.blockquote55 {
    font-family: monospace;
    color: #1b00ac;
    padding-left: 10px;
    border-left: 5px solid #cb0000;

    background-color: rgba(121, 112, 40, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
    transition: font-family;
}
.blockquote5:hover {
    font-family: times new roman;
    transform: rotate(7deg);
    border-left: 7px solid #d35200;
}

.blockquote55:hover {
    font-family: times new roman;
    transform: rotate(-7deg);
    border-left: 7px solid #d35200;
}

.blockquote6 {
    font-family: monospace;
    color: #091ba5;
    padding-left: 10px;
    font-size: 12px;
    border-left: 5px solid deeppink;

    background-color: rgb(255, 192, 203, 0.2);
    padding: 10px 15px;
    margin-left: 20px;
    animation: fadeIn 2s ease-in-out;
    filter: blur(5px);
    transition: filter 3s ease-out;
}

.blockquote6:hover {
    filter: blur(0);
}

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