body {
    color: red;
    font-family: "Pixelated MS Sans Serif";
    background-color: black;
    background-image: url(./370.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 10em;
}

header {
    background-image: url(./dingleberry.png);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: center;
    background-size: cover;
    background-position-y: 10px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.2fr 1fr;
    grid-template-rows: 1.5fr 1.2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px 5px;
    grid-template-areas:
        "Navbar Navbar Navbar Navbar"
        "MySona Introduction Introduction ScatterDots"
        "MySona AboutMe AboutMe ScatterDots"
        "MySona AboutMe AboutMe ScatterDots"
        "MySona AboutMe AboutMe ScatterDots"
        "Chat AboutMe AboutMe ScatterDots"
        "Chat AboutMe AboutMe ScatterDots"
        "Chat MusicPlayer ArtGallery ScatterDots"
        "Chat MusicPlayer ArtGallery ScatterDots"
        "Chat Blog Blog ScatterDots"
        "Chat Blog Blog ScatterDots"
        "Chat Blog Blog ScatterDots";
    background-color: rgba(0, 0, 0, 0.5);
}

.container > div {border: 1px dashed white;}

.Navbar {
    grid-area: Navbar;
    position: fixed;
    background-color: #000000;
    padding-right: 20px;
    display: block;
    
    logo {
    font-weight: bold;
    text-decoration: none;
    color: #ff0000;
    }
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: #ff0000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover {
    background-color: #000000;
    color: #00ffff;
    }
    
    li .active {
    background-color: #ff0000;
    color: #00ffff;
    }
}

.container .MySona {
    grid-area: MySona;
    background-color: #ffffff;
    
  }

.container .Introduction {
    grid-area: Introduction;
  }

.AboutMe {
    grid-area: AboutMe;
    background-color: black;
  }

.MusicPlayer {
    grid-area: MusicPlayer;
  }

.ArtGallery {
    grid-area: ArtGallery;
  }

.Blog {
    grid-area: Blog;
  }

.ScatterDots {
    grid-area: ScatterDots;
  }

.Chat {
    grid-area: Chat;
  }