body {

    font-family: "MS UI Gothic", Tahoma;

}



#container {
                display: grid;
                grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 11*/
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 13 */
                max-width: 1200%;
                gap: 9px;
                margin: 0 auto;
                border: 1px solid black;
                padding: 10px;
                background: white;
                border-radius: 130px 130px 6px 6px;

            }

header {
    grid-row: 1 / 3;
    grid-column: 1 / 13;
    background-color: purple;
    padding: 20px;
    border-radius: 120px 120px 6px 6px;

}

#top-bar {

    grid-row: 3 / 4;
    grid-column: 3 / 10;
    background: lightpink;
    padding: 20px;
    border-radius: 5px;

}

.header {
  position: sticky;
  top: 0;
  padding: 5px 5px;
  background:white;
background: linear-gradient(180deg, #e2e2e2 0%, rgba(226, 226, 226, 1) 100%);
    background-image: linear-gradient(rgb(226, 226, 226) 0%, rgb(226, 226, 226) 100%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
  box-shadow:-4px -3px 4px rgba(0, 0, 0, 0.6) inset,0 0 2px;
  color: black;
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  border-radius: 4px 87px 87px 4px;
}

.header-r {
  position: sticky;
  top: 0;
  padding: 5px 5px;
    background:white;
    background:linear-gradient(180deg, rgba(58,99,43,1) 0%, rgba(162,224,140,1) 98%);
    box-shadow:-4px -3px 4px rgba(0, 0, 0, 0.6) inset,0 0 2px;
  color: black;
  margin-bottom: 7px;
    border-radius: 87px 4px 4px 87px;
}


main {

    display: grid;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; /* 13 */
    grid-row: 4 / 10;
    grid-column: 3 / 10;
    gap: 5px;
    background: green;
    flex: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 35px 35px 6px 6px;

}

nav {

    grid-row: 3 / 13;
    grid-column: 1 / 3;
    background: yellow;
    padding: 0px;
    border-radius: 130px 6px 130px 6px;
    z-index: 10;
}

#nav-box-parent {

    grid-row: 4 / 13;
    grid-column: 1 / 3;
    background: greenyellow;
    max-width: 180px;
    height: 580px;
    padding: 6px;
    border-radius: 125px 6px 6px 6px;
    margin: 10px;
}

#nav-box {

    grid-row: 4 / 13;
    grid-column: 1 / 3;
    background: darkorange;
    max-width: 167px;
    height: 567px;
    padding: 6px;
    border-radius: 122px 6px 6px 6px;
}

aside {

    grid-row: 3 / 13;
    grid-column: 10 / 13;
    background: yellow; 
    padding: 0px;
    border-radius: 6px 130px 6px 130px;
}

#aside-box-parent {

    grid-row: 4 / 13;
    grid-column: 1 / 3;
    background: mediumslateblue;
    max-width: 190px;
    height: 470px;
    padding: 6px;
    border-radius: 6px 115px 6px 6px;
    margin: 10px;
}

#aside-box {

    grid-row: 4 / 13;
    grid-column: 1 / 3;
    background: turquoise;
    max-width: 178px;
    height: 457px;
    padding: 6px;
    border-radius: 6px 112px 6px 6px;
}


#footer-marquee {

    grid-row: 10 / 13;
    grid-column: 4 / 10;
    background: palevioletred;
    padding: 20px;
    height: 30px;
    border-radius: 5px;
    z-index: 2;
}

footer {

    grid-row: 10 / 13;
    grid-column: 4 / 6;
    background: lightpink;
    padding: 20px;
    max-width: 500px; 
    height: 65px;
    border-radius: 6px 6px 50px 50px;
}

#main-box-parent {

    grid-row: 1 / 3;
    grid-column: 1 / 1;
    background: grey;
    max-width: 382px; 
    height: 235px;
    padding: 6px;
    border-radius: 4px 90px 90px 4px;

    }

#main-box {

    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: white;
    width: 370px;
    height: 227px;
    padding-bottom: 6px;
    padding-right: 6px;
    padding-left: 6px;
    border-radius: 4px 87px 87px 4px;

}

#main-box-title {
 
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    background: lightsteelblue;
    max-width: 250px;
    height: 30px;
    padding: 6px;
    border-radius: 4px 10px 50px 4px;

}

#blog-box-parent {

    grid-row: 4 / 4;
    grid-column: 1 / 1;
    background: grey;
    max-width: 330px; 
    height: 200px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 6px;
    padding-left: 6px;
    border-radius: 4px 90px 90px 4px;

    }

#blog-box {
 
    grid-row: 4 / 4;
    grid-column: 1 / 1;
    background: white;
    max-width: 318px;
    height: 187px;
    padding: 6px;
    border-radius: 4px 85px 85px 4px;
    z-index: 10;

}

#blog-box-title {
 
    grid-row: 4 / 4;
    grid-column: 1 / 1;
    background: lightsteelblue;
    max-width: 200px;
    height: 30px;
    padding: 6px;
    border-radius: 4px 10px 50px 4px;

}


/* #contact-box-parent {

    grid-row: 4 / 4;
    grid-column: 3 / 3;
    background: darkolivegreen;
    width: 187px;
    height: 298px;
    padding: 6px;
    border-radius: 90px 90px 4px 4px;

}

#contact-box {

    grid-row: 4 / 4;
    grid-column: 3 / 3;
    background: darkred;
    width: 175px;
    height: 285px;
    padding: 6px;
    border-radius: 87px 87px 4px 4px;

} */


#about-box-parent {

    grid-row: 1 / 3;
    grid-column: 5 / 5;
    background: darkkhaki;
    max-width: 328px;
    height: 212px;
    padding: 6px;
    padding-right: 0px;
    border-radius: 90px 4px 4px 90px;
        z-index: 10;

}

#about-box {

    grid-row: 1 / 3;
    grid-column: 5 / 5;
        background-color: #eeeeee;
   background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #e3e3e3 0, #e3e3e3 1px, #eeeeee 0, #eeeeee 50%);
        box-shadow: 0px 2px 0px 1px white inset, 0px -1px 0px 1px grey inset;
    max-width: 310px;
    height: 199px;
    padding: 6px;
    border-radius: 87px 4px 4px 87px;
    	transition: width 1s, height 1s;
	-webkit-transition: opacity 1s linear;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;

}

#about-box:hover {

    height: 229px;
	-moz-transition: all 2s;

}

#music-box-title { 
 
    position: absolute;
    right: 395px;
    grid-row: 1 / 3;
    grid-column: 5 / 5;
    background: lightsteelblue;
    max-width: 200px;
    height: 30px;
    padding: 6px;
    border-radius:10px 4px 4px 50px;
    float: right;
    z-index: 10;

}


#important-box-parent {

    grid-row: 3 / 3;
    grid-column: 5 / 5;
    background: yellowgreen;
    max-width: 328px;
    height: 60px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    border-radius: 90px 4px 4px 90px;
}

#important-box {

    grid-row: 3 / 3;
    grid-column: 6 / 6;
    background: aquamarine;
    max-width: 310px;
    height: 47px;
    padding: 6px;
    border-radius: 87px 4px 4px 87px;
}


#music-box-parent {

    grid-row: 4 / 4;
    grid-column: 5 / 5;
    background: orchid;
    max-width: 322px;
    height: 299px;
    padding: 6px;
    border-radius: 90px 4px 4px 90px;
}

#music-box {

    grid-row: 4 / 4;
    grid-column: 5 / 5;
    background: goldenrod;
    max-width: 310px;
    height: 286px;
    padding: 6px;
    border-radius: 87px 4px 4px 87px;
}

#to-do-list-box {

    background: greenyellow;
    max-width: 180px;
    height: 160px;
    padding: 6px;
    border-radius: 6px;
    margin: 10px;
}

#contact-box {

    background: greenyellow;
    max-width: 190px;
    height: 110px;
    padding: 6px;
    border-radius: 6px;
    margin: 10px;

}

#webrings-marquee-box-parent {

    background: blue;
    max-width: 190px;
    height: 300px;
    padding: 6px;
    border-radius: 6px 6px 6px 119px;
    margin: 10px;
}

#webrings-marquee-box {

    background: greenyellow;
    max-width: 178px;
    height: 287px;
    padding: 6px;
    border-radius: 6px 6px 6px 112px;
}

           @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }