@font-face {
            font-family: 'Ahnberg';
            src: url(Assets/Fonts/Ahnberg-Regular.ttf);
            }

            @font-face {
            font-family: 'AJenson';
            src: url(Assets/Fonts/AJensonPro-BoldIt.otf);
            }
            
            body {
                margin-top: 20;
                min-height: 100vh;
                display: flex;
                justify-content: center;

                background-color: blue;
                background-image: url(Assets/Dreams-Of-Leaving-1.JPG);
                background-size: cover;
            }

            #topbar {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                color: rgb(210, 168, 90);
            }


            #box {
                margin-left: 200px;
                margin-right: 200px;
                background-image: url(Assets/floral1.png);
                opacity: .8;
            }

            #header {
                background-image: url(Assets/cuteheader.png);
                background-repeat: no-repeat;
                background-size: cover;
                height: 400px;
                display: flex;
                align-items: flex-start;
                margin-top: 100px;
            }

            #header h1 {
                margin: 0;
                padding-top: 50px;
                align-items: center;
                justify-content: center;
                color: white;
            }

            #footer {
                background-image: url(Assets/cutefooter.png);
                background-repeat: no-repeat;
                background-size: cover;
                height: 400px;
                display: flex;
                align-items: flex-start;
                padding-bottom: 200px;

            }

           #blogentry {
                position: relative;
                padding: 30px;
                padding-top: 130px;
                padding-bottom: 130px;
                box-sizing: border-box;
                width: 100%;
                overflow: visible;
                z-index: 0;
                color: white;
                display: grid;
                grid-template-rows: auto auto;
                gap: 30px;
                }

            #blogentry .blogtext {
                text-align: center;
                padding-left: 140px;
                padding-right: 140px;
            }

            #blogentry::before {
                content: "";
                position: absolute;
                top: -100px;
                bottom: -100px;
                left: -40px;
                right: -40px;
                background-image: url("Assets/ImageMask.png");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 108% 100%;
                z-index: -1;
                pointer-events: none;
                }

            #blogentry .blog-gallery {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: flex-start;
                gap: 50px;
                row-gap: 44px;
                column-gap: 28px;
                margin-top: 20px;
                }

            #blogentry .blogentry-frame {
                position: relative;
                display: inline-block;
                flex: 0 0 auto;
                }

            #blogentry .blogentry-frame::before {
                content: "";
                position: absolute;
                inset: -12px;
                background-image: url("Assets/imageborder.png");
                background-repeat: no-repeat;
                background-size: 120% 120%;
                background-position: center;
                z-index: 0;
                pointer-events: none;
                }

            #blogentry .blogentry-frame img {
                width: 300px;
                height: 300px;
                object-fit: cover;
                display: block;
                position: relative;
                z-index: 1;
                }


            .back-button {
                position: fixed;
                top: 12px;
                left: 12px;
                z-index: 9999;

                display: inline-block;
                padding: 8px 14px;
                color: white;
                text-decoration: none;
                font-family: inherit;
                font-size: 44px;
                cursor: pointer;
                opacity: (.4);
                text-shadow: 3px 3px 0px #000;
                
                
            }

            @keyframes soft-wiggle {
                0%   { transform: rotate(0deg) translateX(0); }
                25%  { transform: rotate(-2deg) translateX(-1px); }
                50%  { transform: rotate(2deg) translateX(1px); }
                75%  { transform: rotate(-1deg) translateX(-1px); }
                100% { transform: rotate(0deg) translateX(0); }

            }

            .back-button:hover {
            animation: soft-wiggle 0.5s ease-in-out infinite;
            }

            h1,
            h2 {
                text-align: center;
                font-family: Ahnberg;
            }

            h1 {
                font-size: 22px;
                padding-left: 320px;
                text-align: center;
                

            }

            h3 {
                font-family: AJenson;
                text-align: center;
                margin: 0;
            }