html {
                background-image: url("images/fishbg2.png"); /*Image is 400x400*/
                background-repeat: repeat;
                color: black;
                font-family: 'Itim', "Times New Roman";
                font-size: 22px;
            }
            .container {
                max-width: 1200px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: 1fr 2fr 1fr 1fr;
                gap: 20px;
                grid-template-areas:                    
                    "box-1 box-2 box-2 box-3"
                    "box-4 box-2 box-2 box-5"
                    ". box-2 box-2 .";
            }
            img {
                display: block;
                margin: auto;
                max-width: 100%;
                height: auto;
                border: 3px solid;
                border-color: silver;
                border-radius: 10px;
                margin-bottom: 30px;
            }
            .boxes {
                background-color: #3FBD76;
                opacity: 0.95;
                border: 3px solid;
                border-color: silver;
                border-radius: 10px;
                padding: 10px;
            }
            #middlebox {
                position: relative;
                max-width: 700px;
                margin: 0 auto;
            }
            .buttons {
                margin: 0px;
                transition: rotate 100ms;
            }
            .buttons:hover {
                rotate: -10deg;
            }
            #buttonbox {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            #aboutme {
                position: relative;
                align-self: flex-start;
            }
            #bookshelf {
                position: relative;
                align-self: flex-end;
            }
            #blog {
                position: relative;
                align-self:flex-start;
            }
            #misc {
                position: relative;
                align-self: flex-end;
            }
            #misc:hover {
                rotate: 10deg; 
            }