heartstyle.css

/* This CSS stylesheet is for the beautification of the webpage */

/* Initiation of the CSS Source Code */

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

/* Smooth Scrolling of the webpage */
html {
    scroll-behavior: smooth;
}

/* Root */
:root {
    --dark: rgba(12, 16, 34);
    --light: rgba(237, 227, 255);
}

/* HTML Body */
.shadow-dark {
    background-color: var(--dark);
}

.shadow-light {
    background-color: var(--light);
}

/* Themes */
.shadow-dark {
    background-color: var(--dark);

}

.shadow-light {
    background-color: var(--light);
}

@keyframes change {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.4);
    }
}

.change {
    animation-name: change;
    animation-duration: 1s;
    animation-direction: alternate;
}

/* Heading Part */
nav {
    top: 0px;
    right: 0px;
    height: 70px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(156, 156, 156);
    background-color: rgba(0, 0, 0, 0.596);
    text-shadow: 0px 3px 6px black;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 1.2rem;
    padding: 1px 1px 1px 1px;
}

nav h2 {
    margin-left: 32rem;
}

#btn {
    margin-left: 20rem;
    background-color: rgba(58, 58, 58, 0.596);
    height: 3rem;
    width: 3rem;
    border-radius: 25px;
    box-shadow: 0px 0px 5px white inset,
        0px 0px 10px white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#btn img {
    animation: glowing 1300ms infinite;
}

@keyframes glowing {
    0% {
        filter: invert(0);
    }

    50% {
        filter: invert(1);
    }

    100% {
        filter: invert(0);
    }
}

.container {
    height: 500px;
    margin: 30px 10px 10px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.heart {
    height: 150px;
    width: 150px;
    background: red;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px red;
    animation: heart 0.6s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(-45deg) scale(1);
    }

    15% {
        transform: rotate(-45deg) scale(1.3);
        box-shadow: rgb(255, 84, 84) 10px -10px 100px 35px;
    }

    25% {
        transform: rotate(-45deg) scale(1);
    }

    30% {
        transform: rotate(-45deg) scale(1.3);
        box-shadow: rgb(255, 84, 84) 10px -10px 100px 35px;
    }

    100% {
        transform: rotate(-45deg) scale(1);
    }
}

.heart::before {
    content: '';
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: red;
    top: -50%;
    border-radius: 100px;
    box-shadow: -10px -10px 90px red;
}

.heart::after {
    content: '';
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: red;
    right: -50%;
    border-radius: 100px;
    box-shadow: 10px 10px 90px red;
}

.text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quote {
    display: flex;
    border-radius: 70px;
    flex-direction: column;
    align-items: center;
    background-color: rgba(212, 0, 120, 0.849);
    height: 320px;
    width: 70rem;
    box-shadow: whitesmoke 0px 0px 30px inset,
        0px 0px 50px white,
        -15px 0px 60px rgb(255, 5, 255),
        15px 0px 60px rgb(5, 122, 255);
    padding: 30px 60px 20px 60px;
    color: white;

    animation: box-glow 2000ms infinite;
}

@keyframes box-glow {
    0%{
        box-shadow: whitesmoke 0px 0px 30px inset,
        0px 0px 50px white,
        -15px 0px 60px rgb(255, 5, 255),
        15px 0px 60px rgb(5, 122, 255);
    }
    50%{
        box-shadow: rgb(175, 175, 175) 0px 0px 30px inset,
        0px 0px 50px rgb(185, 185, 185),
        -15px 0px 60px rgb(107, 0, 107),
        15px 0px 60px rgb(0, 60, 128);
    }
    100%{
        box-shadow: whitesmoke 0px 0px 30px inset,
        0px 0px 50px white,
        -15px 0px 60px rgb(255, 5, 255),
        15px 0px 60px rgb(5, 122, 255);
    }
}

.quote h4 {
    font-family: 'Kavoon', cursive;
    font-size: 2.5rem;
    padding: 10px 1px 30px 1px;
    text-shadow: 1px 1px 1px rgb(97, 0, 0);
    text-align: center;
}

.quote p {
    font-family: 'Fredoka One', cursive;
    font-size: 1.5rem;
    text-shadow: 1px 1px 1px rgb(34, 0, 25);
    text-align: center;
}


footer {
    height: 50px;
    width: 100%;
    bottom: 0;
}

/* Responsiveness */
@media only screen and (max-width:1275px) {
    .quote {
        padding: 30px 60px 20px 60px;
        height: 420px;
        width: 50rem;
    }
}

@media only screen and (max-width:1217px) {
    nav h2 {
        margin-left: 27rem;
    }

    #btn {
        margin-left: 15rem;
    }
}

@media only screen and (max-width:1087px) {
    nav h2 {
        margin-left: 23rem;
    }

    #btn {
        margin-left: 12rem;
    }
}

@media only screen and (max-width:977px) {
    nav h2 {
        margin-left: 19.5rem;
    }

    #btn {
        margin-left: 10rem;
    }
}

@media only screen and (max-width:970px) {
    .quote {
        padding: 30px 50px 20px 50px;
        height: 485px;
        width: 35rem;
    }

    .quote h4 {
        font-size: 2rem;
    }
}

@media only screen and (max-width:889px) {
    nav h2 {
        margin-left: 17rem;
    }

    #btn {
        margin-left: 8rem;
    }
}

@media only screen and (max-width:819px) {
    nav h2 {
        margin-left: 14rem;
    }

    #btn {
        margin-left: 7rem;
    }
}

@media only screen and (max-width:754px) {
    nav h2 {
        margin-left: 13rem;
    }

    #btn {
        margin-left: 5rem;
    }
}

@media only screen and (max-width:705px) {
    nav h2 {
        margin-left: 11rem;
    }

    #btn {
        margin-left: 4rem;
    }
}

@media only screen and (max-width:685px) {
    .quote {
        padding: 30px 50px 20px 50px;
        height: 510px;
        width: 28rem;
    }

    .quote h4 {
        font-size: 2rem;
    }

    .quote p {
        font-size: 1.3rem;
    }

    .heart,
    .heart::after,
    .heart::before {
        height: 100px;
        width: 100px;
    }

    @keyframes heart {
        0% {
            transform: rotate(-45deg) scale(1);
        }

        15% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 90px 20px;
        }

        25% {
            transform: rotate(-45deg) scale(1);
        }

        30% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 90px 20px;
        }

        100% {
            transform: rotate(-45deg) scale(1);
        }
    }
}

@media only screen and (max-width:657px) {
    nav h2 {
        margin-left: 9rem;
    }

    #btn {
        margin-left: 3rem;
    }
}

@media only screen and (max-width:607px) {
    nav h2 {
        margin-left: 7.5rem;
    }

    #btn {
        margin-left: 2rem;
    }
}

@media only screen and (max-width:575px) {
    nav h2 {
        font-size: 1.4rem;
        margin-left: 9rem;
    }

    #btn {
        height: 1.9rem;
        width: 1.9rem;
        margin-left: 5rem;
    }

    #btn img {
        height: 0.9rem;
        width: 0.9rem;
    }
}

@media only screen and (max-width:545px) {
    #btn {
        margin-left: 2.5rem;
    }
}

@media only screen and (max-width:540px) {
    nav {
        height: 40px;
    }

    nav h2 {
        font-size: 1.3rem;
        margin-left: 8rem;
    }

    #btn {
        height: 25px;
        width: 25px;
    }

    #btn img {
        height: 13px;
        width: 13px;
    }

    .container {
        height: 350px;
    }

    .quote {
        padding: 28px 30px 28px 30px;
        height: 360px;
        width: 20rem;
    }

    .quote h4 {
        font-size: 1.3rem;
    }

    .quote p {
        font-size: 0.9rem;
    }

    .heart,
    .heart::after,
    .heart::before {
        height: 80px;
        width: 80px;
    }

    footer {
        height: 30px;
    }

    @keyframes heart {
        0% {
            transform: rotate(-45deg) scale(1);
        }

        15% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 100px 25px;
        }

        25% {
            transform: rotate(-45deg) scale(1);
        }

        30% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 100px 25px;
        }

        100% {
            transform: rotate(-45deg) scale(1);
        }
    }
}

@media only screen and (max-width:460px) {
    nav h2 {
        margin-left: 6rem;
    }

    #btn {
        margin-left: 3rem;
    }
}

@media only screen and (max-width:438px) {
    nav h2 {
        margin-left: 6rem;
    }

    #btn {
        margin-left: 2rem;
    }
}

@media only screen and (max-width:422px) {
    nav h2 {
        font-size: 1rem;
        margin-left: 6.5rem;
    }

    #btn {
        height: 25px;
        width: 25px;
        margin-left: 3.5rem;
    }

    #btn img {
        height: 13px;
        width: 13px;
    }
}

@media only screen and (max-width:390px) {
    nav h2 {
        font-size: 1rem;
        margin-left: 6rem;
    }

    #btn {
        height: 25px;
        width: 25px;
        margin-left: 2rem;
    }

    #btn img {
        height: 13px;
        width: 13px;
    }
}

@media only screen and (max-width:372px) {
    nav h2 {
        font-size: 1rem;
        margin-left: 5rem;
    }
}

@media only screen and (max-width:365px) {
    nav {
        height: 40px;
    }

    .container {
        height: 420px;
    }

    .quote {
        padding: 28px 60px 28px 60px;
        height: 290px;
        width: 20rem;
    }

    .quote h4 {
        font-size: 1rem;
    }

    .quote p {
        font-size: 0.7rem;
    }

    .heart,
    .heart::after,
    .heart::before {
        height: 80px;
        width: 80px;
    }

    footer {
        height: 30px;
    }

    @keyframes heart {
        0% {
            transform: rotate(-45deg) scale(1);
        }

        15% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 100px 25px;
        }

        25% {
            transform: rotate(-45deg) scale(1);
        }

        30% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 10px -10px 100px 25px;
        }

        100% {
            transform: rotate(-45deg) scale(1);
        }
    }
}

@media only screen and (max-width:346px) {
    nav h2 {
        font-size: rem;
        margin-left: 4.5rem;
    }
}

@media only screen and (max-width:340px) {
    nav {
        height: 40px;
    }

    .container {
        height: 400px;
    }

    .quote {
        padding: 20px 25px 20px 25px;
        height: 270px;
        width: 15rem;
        border-radius: 40px;
    }

    .quote h4 {
        font-size: 1rem;
        padding: 10px 1px 15px 1px;
    }

    .quote p {
        font-size: 0.7rem;
    }

    .heart,
    .heart::after,
    .heart::before {
        height: 80px;
        width: 80px;
    }

    footer {
        height: 30px;
    }

    @keyframes heart {
        0% {
            transform: rotate(-45deg) scale(1);
        }

        15% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 11px -11px 50px 10px;
        }

        25% {
            transform: rotate(-45deg) scale(1);
        }

        30% {
            transform: rotate(-45deg) scale(1.3);
            box-shadow: rgb(255, 84, 84) 11px -11px 50px 10px;
        }

        100% {
            transform: rotate(-45deg) scale(1);
        }
    }
}

@media only screen and (max-width:334px) {
    nav h2 {
        font-size: 1rem;
        margin-left: 4rem;
    }

    #btn {
        margin-left: 1.5rem;
    }
}

@media only screen and (max-width:320px) {
    nav h2 {
        font-size: 1rem;
        margin-left: 3.5rem;
    }

    #btn {
        margin-left: 1.5rem;
    }
}