.homepage {
    display:grid;
    grid-template-areas:
      'welcome welcome'
      'all new'
      'all update';
    gap:2%;
    width:853px;
    height:auto;
    padding:10px 10px 20px 10px;
    margin:auto;
    background:#130837;
  }
  .header {
    width:873px;
    margin:auto;
    background: var(--accent2);
    background-image: url('https://cyboarnetic.neocities.org/img/myocs.jpg');
    background-size:contain;
    background-repeat:no-repeat;
    height:100px;
  }
  .welcome {
    grid-area:welcome;
  }
  .all {
    grid-area:all;
  }
  .filterbox {
    display:grid;
    grid-template-columns:auto auto auto auto;
    min-width:425px;
    height:325px;
    overflow:auto;
  }
  .title {
    border-radius:0;
  }
  .box {
    border-radius:0;
  }
  .new {
    grid-area:new;
    width:395px;
    height:100px;
    text-align:center;
  }
  .new img {
    width:100px;
    height:100px;
    margin:5px;
    background: rgba(0,0,0,.3);
  }
  .update {
    grid-area:update;
  }
  .fakead {
    grid-area:ad;
    margin:auto;
  }
  .footer {
    text-align:center;
    background:var(--accent2);
    padding:5px 0 5px 0;
    margin:auto;
    width:873px;
    border-radius:0;
  }
  .footer a:hover {
    color:var(--accent1);
  }
  .filterDiv {
    background-color: rgba(0,0,0,.3);
    color: #ffffff;
    width: 100px;
    height:100px;
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none;
  }
  .filterDiv img {
    height:100px;
    width:100px;
  }
  .show {
    display: block;
  }
  .btn {
    height:30px;
    border: none;
    outline: none;
    margin:3px;
    padding: 5px 5px;
    background-color: var(--accent2);
    color:#fff;
    cursor: pointer;
  }
  .btn:hover {
    filter:brightness(50%);
  }
  .btn.active {
    background-color: var(--accent3);
    color: #fff;
  }
  #myBtnContainer{
    display:flex;
    flex-direction:row;
    justify-content:center;
  }
  .myocs {
    display:grid;
    grid-template-areas:
      'basic basic about about'
      'music music about about'
      'interest interest about about'
      'friend friend comment comment'
      'friend friend comment comment'
      'photo photo photo photo';
      
    width:853px;
    margin:auto;
    padding:15px;
    background:#140837;
    gap:10px;
  }
  .ppic {
    height:150px;
    width:150px;
    background:#341a83;
  }
  .ppic img {
    height:150px;
    width:150px;
  }
  .basic {
    grid-area:basic;
    display:flex;
    flex-direction:row;
    background: var(--box);
    height:150px;
    width:375px;
    border: 1px solid var(--accent1);
  }
  .about {
    grid-area:about;
    text-align:center;
  }
  .interest {
    grid-area:interest;
    width:375px;
    height:auto;
  }
  .music {
    grid-area:music;
    display:flex;
    flex-direction:column;
    width:375px;
    height:100px;
    background:#181818;
    border: 1px solid var(--accent1);
  }
  .music img {
    height:60px; 
    width:60px;
  }
  .commentbox {
    grid-area:comment;
    margin-top:-75px;
  }
  .commenter {
    display:grid;
    grid-template-columns:auto auto;
    margin:10px;
    width:430px;
    background:#341a83;
  }
  .commenter img {
    height:75px;
    width:75px;
    margin:5px;
  }
  .comment {
    display:flex;
    flex-direction:row;
  }
  .column {
    display:flex; 
    flex-direction:column; 
  }
  .row {
    display:flex;
    flex-direction:row;
  }
  .friend {
    grid-area:friend;
    height:auto;
    width:373px;
  }
  .friend-grid {
    display:grid;
    padding:10px 10px 0 10px;
    width:351px;
    max-height:350px;
    grid-template-columns: auto auto auto;
    background:var(--box);
    border: 1px solid var(--accent1);
    overflow:auto;
    gap:10px;
  }
  .friend-wrap {
    height:150px;
    width:100px;
  }
  .friend-grid img {
    height:100px;
    width:100px;
    background:#341a83;
  }
  .friend-info {
    background:var(--accent2);
    text-align:center;
    line-height:20px;
    width:100px;
  }
  .photo {
    grid-area:photo;
    width: 853px;
    height:220px;
    text-align:center;
  }
  .photo-box {
    display:flex
    flex-direction:row;
    flex-wrap:wrap;
    margin:auto;
    background:var(--box);
    border: 1px solid var(--accent1);
    width:831px;
    height:160px;
    padding:10px;
  }
  .photo-box img {
    width:150px;
    height:150px;
    margin:5px;
    object-fit:contain;
  }
  .header {
    width:873px;
    margin:auto auto 30px auto;
    background: var(--accent2);
    background-image: url('https://cyboarnetic.neocities.org/img/myocs.jpg');
    background-size:contain;
    background-repeat:no-repeat;
    height:100px;
  }
  .title {
    border-radius:0;
    margin:0;
  }
  .box {
    border-radius:0;
    margin:0;
  }
  .footer {
    text-align:center;
    background:var(--accent2);
    padding:5px 0 5px 0;
    margin:auto;
    width:873px;
    border-radius:0;
  }
  .footer a:hover {
    color:var(--accent1);
  }
  ul {
    list-style:none;
    padding:0 0 0 25px;
  }
  hr {
    color: var(--accent2);
  }