@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
        body{ 
            background-color: rgb(43, 42, 56);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color: rgb(255, 255, 255);

        }
        div{
            height: 100px;
            width: 100px;
        }
        .panel{
           height: auto;
           width: auto;
           border: 1px solid rgba(0, 0, 0, 0.25);
           background-color: rgba(255, 255, 255, 0.15);
           backdrop-filter: blur(16px) saturate(180%);
           -webkit-backdrop-filter: blur(16px) saturate(180%);
           box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
           border-radius: 12px;
           padding: 10px;
           display: flex;
           gap: 15px;
           align-items: center;

        }
        .panel-no-flex{
           height: auto;
           width: auto;
           border: 1px solid rgba(0, 0, 0, 0.25);
           background-color: rgba(255, 255, 255, 0.15);
           backdrop-filter: blur(16px) saturate(180%);
           -webkit-backdrop-filter: blur(16px) saturate(180%);
           box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
           border-radius: 12px;
           padding: 10px;
           gap: 15px;
           align-items: center;

        }
        .dancing-script {
        font-family: "Dancing Script", cursive;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 50px;
        color: rgb(254, 131, 131);

        }
        .dancing-script-small {
        font-family: "Dancing Script", cursive;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 25px;
        color: rgb(254, 131, 131);

        }
        .photo-panel{
            width: 300px;
            height: auto;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.25);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
        }
        nav a {
            text-decoration: none;
            color: rgb(255, 255, 255);
        
        }
        a:hover {
            text-decoration: underline;
        }
        a {
            color: rgb(89, 189, 235);
        }
        .flip-container {
        width: 300px;
        height: 400px;
        perspective: 1000px;
        border-radius: 12px;
        border: .2px solid rgba(0, 0, 0, 0.25);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        background-color: rgb(43, 42, 56);
        }
        .flip-card{
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-beizer(0.4, 0, 0.2, 1);
            cursor: pointer;
            border-radius: 12px;

        }
        .flip-card.is-flipped{
            transform: rotateY(180deg);
        }
        .card-face { 
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.25);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .card-front {
            background-color: #bbb;
        }
        .card-back {
            background-color: rgb(43, 42, 56);
            color: white;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            box-sizing: border-box;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.25);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .card-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        nav {
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            gap: 15px;
            align-items: center;
            justify-content: center;
        }
        h1 {
            font-family: "Dancing Script", cursive;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        header strong {
            color: rgb(131, 254, 186);
        }
        .blog-btn{
            background-color: rgba(255, 130, 130, 0.15);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 10px;

        }