.topnav {
            overflow: hidden;
            background-color: #04AA6D;
            padding: 2px;
        }
        
        rgb (101, 43, 43)rgb(43, 86, 101)rgb(7, 115, 154)rgb(7, 154, 83) .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
        /* Create a right-aligned (split) link inside the navigation bar */
        
        .topnav a.split {
            float: right;
            background-color: #04AA6D;
            color: white;
        }
        
        .topnav a {
            float: right;
            margin-right: 20px;
        }
        .blink_me {
            animation: blinker 1s linear infinite;
        }
        
        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
        .zoom {
            transition: transform .2s;
            /* Animation */
        }
        
        .zoom:hover {
            transform: scale(1.1);
            font-size: 17px;
            /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        }
        @charset "UTF-8";
        article {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            max-width: 1300px;
            padding: 15px;
            flex-wrap: wrap;
        }
        
        figure {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: auto;
            padding: 30px;
            margin: 10px;
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
        }
        
        figure img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            mix-blend-mode: luminosity;
        }
        
        figure h1 {
            font-size: 22pt;
            line-height: 32pt;
            margin: 20px 0 0 0;
            text-align: center;
        }
        
        figure figcaption p {
            font-size: 10pt;
            line-height: 20pt;
            margin: 10px 0px 20px 0px;
            text-align: center;
        }
        
        figure a {
            text-decoration: none;
            background: black;
            color: white;
            padding: 5px 12px;
            text-align: center;
            border-radius: 5px;
        }
        
        figure::before {
            position: absolute;
            filter: blur(40px) saturate(120%) brightness(1.1);
            font-size: 440pt;
            content: "🥪";
            z-index: -1;
            animation: rotate 12s linear infinite;
        }
        
        figure::after {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -2;
            content: "";
            background: var(--accent);
        }
        
        @keyframes rotate {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(-360deg);
            }
        }
        
        figure:nth-child(1) {
            --accent: #ffeb70;
        }
        
        figure:nth-child(2) {
            --accent: #fd560a;
        }
        
        figure:nth-child(2)::before {
            content: "🌈";
        }
        
        figure:nth-child(3) {
            --accent: #1eddfe;
        }
        
        figure:nth-child(3)::before {
            content: "🍧";
        }
        
        figure:nth-child(4) {
            --accent: #cdf9ff;
        }
        
        figure:nth-child(4)::before {
            content: "🏡";
        }
        
        figure:nth-child(5) {
            --accent: #1296dc;
        }
        
        figure:nth-child(5)::before {
            content: "🌃";
            font-size: 340pt;
        }
        
        figure:nth-child(6) {
            --accent: #f50d21;
        }
        
        figure:nth-child(6)::before {
            content: "🦜";
            font-size: 640pt;
        }
        @import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
        .card {
            border: none;
            box-shadow: 1px 1px 10px #444141;
            border-radius: 12px;
        }
        /* ==========card header====== */
        
        .FirstCardHeaderBgColor {
            background-color: #c27d0e;
        }
        
        .cardHeader {
            height: 4rem;
            position: relative;
            border-top-left-radius: 12px;
        }
        
        .socialMediaIcon {
            padding: 12px 12px;
        }
        
        .addSymbol {
            /* background-color: #73ffd6; */
            /* color: #ffffff; */
            position: absolute;
            right: -12px;
            top: -25px;
            border-radius: 1px;
            box-shadow: 1px 2px 5px #434947;
            height: 28px;
            width: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 12px;
        }
        
        .iconColor {
            color: #ffffff;
        }
        /* ==========card header====== */
        /* ======card body======== */
        /* ======card body======== */
        /* .cardBody {
  background-color: #ffffff;
} */
        /* ======img css======== */
        
        .imageDiv {
            height: 4rem;
            width: rem;
            margin: -61px auto auto;
            position: relative;
            border: px solid #ffffff;
            border-radius: 5px;
        }
        
        .image {
            border-radius: 900px;
            height: 100%;
            object-fit: cover;
            width: 100%;
        }
        /* ======img css======== */
        /* ==================footer===== */
        
        .listItem {
            list-style-type: none;
        }
        
        .footerIcons {
            text-decoration: none;
            text-decoration: none;
            height: 24px;
            width: 24px;
            /* border: 1px solid black; */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /*==============footer===== */
        /* .ulElement {
    border: 1px solid red;
    } */
        
        .SecondCardHeaderBgColor {
            background-color: #04AA6D !important;
        }
        
        .ThirdCardHeaderBgColor {
            background-color: #c27d0e;
        }
        
        .FourthCardHeaderBgColor {
            background-color: #04AA6D;
        }
        
        .FifthCardHeaderBgColor {
            background-color: #c27d0e;
        }
        
        .SixthCardHeaderBgColor {
            background-color: #04AA6D;
        }
        
        .SeventhCardHeaderBgColor {
            background-color: #c27d0e;
        }
        
        .EigthCardHeaderBgColor {
            background-color: #04AA6D;
        }
        @import url('https://cdn.streamelements.com/scripts/animate.min.css');
        @import url('https://fonts.googleapis.com/css?family=Nunito');
        * {
            font-family: 'Nunito', sans-serif;
        }
        
        .awsome-text-container {
            width: 0%;
            height: 0em;
            overflow: hidden;
            margin-orizzontal: auto;
            position: relative;
            z-index: 2;
            font-size: 25px;
            font-weight: bold;
            animation: dd 5.1s 2s;
        }
        
        .animated-letter {
            animation-duration: 2s;
            animation-iteration-count: infinite;
            display: inline-block;
            animation-fill-mode: both;
            color: #3F51B5
        }
        
        .animated-letter:nth-child(1) {
            animation-delay: 0s;
        }
        
        .animated-letter:nth-child(2) {
            animation-delay: 0.1s;
        }
        
        .animated-letter:nth-child(3) {
            animation-delay: 0.2s;
        }
        
        .animated-letter:nth-child(4) {
            animation-delay: 0.3s;
        }
        
        .animated-letter:nth-child(5) {
            animation-delay: 0.4s;
        }
        
        .image-container {
            margin: auto;
            display: flex;
        }
        
        .text-container {
            font-size: 16px;
            color: rgb(0, 0, 0);
            text-align: center;
            margin: auto;
            text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px;
        }
        
        #container {
            margin: auto;
            display: flex;
            align-items: center;
            background-color: #fffcf7;
            border-radius: 85px;
            width: 160px;
            border: solid 2px #04AA6D;
            box-shadow: 0px 0px 50px #04AA6D;
            animation: alert 5.6s 1.4s;
        }
        
        .sfera {
            display: flex;
            margin-rigth: auto;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1;
            border-radius: 50%;
            width: 160px;
            background-color: #c27d0e;
            animation: spinn 1.5s;
        }
        
        .sfera2 {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80%;
            aspect-ratio: 1;
            background-color: #c27d0e;
        }
        
        .txt {
            font-size: 1.5em;
            color: rgb(1, 30, 50);
            font-weight: bold;
            font-family: arial;
        }
        
        @keyframes alert {
            0% {
                width: 160px;
            }
            25% {
                width: 800px;
            }
            90% {
                width: 800px;
            }
            100% {
                width: 160px;
            }
        }
        
        @keyframes spinn {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dd {
            5% {
                width: 75%;
            }
            30% {
                height: 1.3em;
                width: 75%;
            }
            70% {
                height: 1.3em;
                width: 75%;
            }
            82% {
                width: 75%;
            }
            95% {
                height: 0px;
                width: 0px;
            }
        }
        .block {
            display: block;
            width: 100%;
            border: none;
            background-color: #04AA6D;
            color: white;
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .block:hover {
            background-color: #ddd;
            color: black;
        }