.title {
    text-align: center;
    font-family: Franchise;
    font-size: 140px;
    margin: 0;
    text-shadow: rgba(0, 0, 0, 0.45) 5px 5px;
    transition:
        scale 0.4s,
        color 0.4s,
        rotate 0.4s,
        text-shadow 0.4s;
}

.title:hover {
    scale: 1.2;
    color: pink;
    rotate: -3deg;
    text-shadow: rgba(255, 192, 203, 0.45) 5px 5px;
}

p {
    text-shadow: rgba(0, 0, 0, 0.45) 1px 1px;
    font-family: Coolvetica;
    font-size: 20px;
    text-align: center;
    color: rgb(0, 0, 0);
    transition:
        color 0.4s,
        scale 0.4s;
}

p:hover {
    color: pink;
    scale: 1.2;
}

.centerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    background-color: rgb(191, 191, 191);
    border-bottom-color: rgba(0, 0, 0, 0.45);
    border-right-color: rgba(0, 0, 0, 0.45);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-style: solid;
    border-right-style: solid;
    height: 200px;
    width: 340px;
    transition:
        scale 0.4s,
        background-color 0.4s;
}

.box:hover {
    scale: 1.2;
    background-color: pink;
}

.videoTweak {
    max-height: 180px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
}

/* ADDED FONTS */
@font-face {
    font-family: 'Franchise';
    src: url("fonts/Franchise-Free-Bold.otf");
}

@font-face {
    font-family: 'Coolvetica';
    src: url("fonts/Coolvetica Rg.otf");
}