body {
            overflow-x: hidden;
            margin: 0px;
            background: var(--background);
            font-family: 'Itim', cursive;
            font-weight: 400;
        }
        
        .logoimage {
            width: 60vw;
        }
        
        .logoLettersb {
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.787);
            margin-left: 6px;
            position: fixed;
            font-family: 'Great Vibes';
            position: absolute;
            font-size: 27px;
            color: aliceblue;
            -ms-transform: rotate(-38deg);
            /* IE 9 */
            transform: rotate(-38deg);
        }
        
        @media screen and (min-width:800px) {
            .intro_container {
                background-color: white;
                width: 100%;
                height: auto;
                text-align: center;
                padding-top: 0px;
                padding-bottom: 50px;
                font-family: 'Itim', cursive;
            }
            .headerA h1 {
                font-size: 80px;
                color: white;
                font-family: 'Itim', cursive;
                text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.678);
            }
            .headerA {
                height: 65vh;
                background-image: url('https://images.pexels.com/photos/3662662/pexels-photo-3662662.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
                background-color: rgb(88, 88, 88);
                background-blend-mode: multiply;
                background-size: cover;
                display: grid;
                place-items: center;
                /* Create the parallax scrolling effect */
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .intro {
                width: auto;
                height: auto;
                margin: 20px;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
            }
            .intro_container h2 {
                margin-top: 10px;
                font-size: 4vw;
                padding-top: 5%;
                padding-bottom: 5%;
            }
            .intro-text {
                font-size: 20px;
                width: 45vw;
                margin-top: 50px;
                align-content: center;
                opacity: 0;
                transform: translateX(-60px);
                transition: 1s all ease-in-out;
            }
            .introImage {
                margin: 5px;
                width: 45vw;
                box-shadow: 12px 12px 35px rgba(0, 0, 0, 0.609);
            }
            .intro-textb {
                margin: 10px;
                align-content: center;
                opacity: 0;
                transform: translateX(60px);
                transition: 1s all ease-in-out;
            }
            .intro-appear {
                opacity: 1;
                transform: translateX(0px);
            }
            .intro-appearb {
                opacity: 1;
                transform: translateX(10px);
            }
        }
        
        @media screen and (max-width:800px) {
            .intro_container {
                background-color: white;
                width: 100%;
                height: auto;
                text-align: center;
                padding-top: 5%;
                padding-bottom: 50px;
                font-family: 'Itim', cursive;
            }
            .headerA h1 {
                font-size: 10vw;
                color: white;
                font-family: 'Itim', cursive;
                text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.678);
            }
            .headerA {
                height: 55vh;
                background-image: url('https://images.pexels.com/photos/3662662/pexels-photo-3662662.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
                background-color: rgb(88, 88, 88);
                background-blend-mode: multiply;
                background-size: cover;
                display: grid;
                place-items: center;
                /* Create the parallax scrolling effect */
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .intro {
                width: auto;
                height: auto;
                margin: 15px;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
            }
            .intro-text {
                font-size: 25px;
                width: 90vw;
                margin-top: 50px;
                align-content: center;
                opacity: 0;
                transform: translateX(-60px);
                transition: 1s all ease-in-out;
            }
            .introImage {
                margin: 5px;
                width: 75vw;
                box-shadow: 12px 12px 35px rgba(0, 0, 0, 0.609);
            }
            .intro-textb {
                margin: 5px;
                align-content: center;
                opacity: 0;
                transform: translateX(60px);
                transition: 1s all ease-in-out;
            }
            .intro-appear {
                opacity: 1;
                transform: translateX(0px);
            }
            .intro-appearb {
                opacity: 1;
                transform: translateX(10px);
            }
        }