body {
   background-image: url("../assets/base/bg1.png");
                background-size: 37%;
    font-family: 'aleoregular', serif;
    font-size: 1em;
    color: mediumpurple;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 6, 2025 */
 @font-face {
    font-family: 'aleoregular';
    src: url('https://annaxangel.neocities.org/fonts/Aleo-Font/aleo-variablefont_wght-webfont.woff2') format('woff2'),
         url('aleo-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cutepixelmedium';
    src: url('https://annaxangel.neocities.org/fonts/Cute-Pixel-Font/cute-pixel-webfont.woff2') format('woff2'),
         url('https://annaxangel.neocities.org/fonts/Cute-Pixel-Font/cute-pixel-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

small{
font-size: .8em
}

#content {
 margin-left: auto;
 margin-right: auto;
 width: 95%;
 background-color: #fff5f7;
  box-sizing: border-box;
  display: block;
  padding: 5px;
  border: 20px solid pink;
  background-clip: padding-box;
                border-image-repeat: round round;
                border-image: url("../assets/base/border.png") 23 round;
}

/* grid-area: rowstart / column start / rowend /column end */
 
#content-grid {
  display: grid;
  grid-template-columns: .8fr 1fr 1fr 1fr .8fr;
  grid-template-rows: 200px 100px 100px 100px 200px 300px;
  column-gap: 5px;
  grid-row-gap: 5px;
  border-width: 5px;
}

#main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: .6fr .6fr .6fr;
  column-gap: 5px;
  grid-row-gap: 5px;
  border-width: 0px;
  padding: 5px;
}

#big-main-grid {
  grid-template-columns: (1, 4fr);
  grid-template-rows: 2.5fr;
  display: grid;
  border-width: 0px;
  padding: 5px;
}

#main-2-grid{
  display: grid;
  grid-template-columns: repeat(5, .5fr);
  grid-template-rows: 270px;
}

#header {
background-color: #fff5f7;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                border-image: url(.png) 30 round;
                font-family: 'cutepixelmedium', sans-serif;
                font-size: 1.4em;
}

#nav {
  grid-area: 1 / 1 / 6 / 2;
}

#main {
  grid-area: 1 / 2 / 6 / 5;

}

#big-main {
  grid-area: 1 / 2 / 6 / 5;

}

#aboutme {
  grid-area: 1 / 1 / 3 / 3
}

#aside {
 grid-area: 1 / 5 / 3 / 6;
}

/*#leftbox {
  grid-area: 4 / 1 / 6 / 2;
}
*/
#rightbox {
  grid-area: 3 / 5 / 6 / 6;
}

#leftbox2 {
  grid-area: 6 / 1 / 6 / 2;
}

#rightbox2 {
  grid-area: 6 / 5 / 6 / 6;
}

#main2 {
  grid-area: 6 / 2 / 7 / 5;
}

#footer {
background-color: #fff5f7;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                border-image: url(.png) 30 round;
}
.box {
border-color: pink;
border-style: solid;
border-width: 10px;
background-color: #fff5f7;
overflow: auto;
padding: 5px;
border-image-repeat: round round;
border-image: url("../assets/base/small-border.png") 10 round;
scrollbar-width: thin;
scrollbar-color: #fa9dd3 #fac5e4;
}