html {
    height: 100%;
}

body {
    background-color: rgb(189, 189, 189);
    background-image: url(./flowers-9474432_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    
}

.container {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 1280px;
    position: relative;

}


header {
    background-color: rgba(255, 238, 0, 0.399);
    background-image: url(#);
    background-size: cover;
    background-repeat: no-repeat;
    width: 1200px;
    height: 95px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%); /* Shifts the element back by half of its own width and height */
}

        h1 {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }


main {
    
    width: 700px;
    height: 1000px;
    position: absolute;
    top: 100px; /* Moves the top edge of the child to the vertical center of the parent */
    left: 50%; /* Moves the left edge of the child to the horizontal center of the parent */
    transform: translate(-50%); /* Shifts the element back by half of its own width and height */
    
    

}
    .intro {
        background-color: rgba(255, 238, 0, 0.399);
        width: 690px;
        height: 200px;
        position: absolute;
        margin-top: 0px;
        top: 0px; /* Moves the top edge of the child to the vertical center of the parent */
        left: 50%; /* Moves the left edge of the child to the horizontal center of the parent */
        transform: translate(-50%); /* Shifts the element back by half of its own width and height */
        }

            p {
                font-family: Arial, Helvetica, sans-serif;
                text-align: center;
            }

    .funpics {
        background-color: rgba(255, 238, 0, 0.399);
        width: 690px;
        height: 400px;
        position: absolute;
        margin-top: 5px;
            
        top: 200px; /* Moves the top edge of the child to the vertical center of the parent */
        left: 50%; /* Moves the left edge of the child to the horizontal center of the parent */
        transform: translate(-50%); /* Shifts the element back by half of its own width and height */
    }

nav {
    width: 250px;
    height: 1000px;
    position: absolute;
    top: 100px;
    left: 0%;

    
}
            .navleftbox_01 {
                background-color: rgba(255, 238, 0, 0.399);
                width: 250px;
                height: 1000px;
                position: absolute;
                margin-top: 0px;
                top: 0px; /* Moves the top edge of the child to the vertical center of the parent */
                left: 50%; /* Moves the left edge of the child to the horizontal center of the parent */
                transform: translate(-50%); /* Shifts the element back by half of its own width and height */
            }   

.navright {

    width: 250px;
    height: 1000px;
    position: absolute;
    top: 100px;
    right: 0px;


}

            .navrightbox_01 {
                background-color: rgba(255, 238, 0, 0.399);
                width: 250px;
                height: 1000px;
                position: absolute;
                margin-top: 0px;
                top: 0px; /* Moves the top edge of the child to the vertical center of the parent */
                left: 50%; /* Moves the left edge of the child to the horizontal center of the parent */
                transform: translate(-50%); /* Shifts the element back by half of its own width and height */
            }