/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


    

  
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap" rel="stylesheet">


<!-- Animated Rainbow Nyan Cat - https://www.cursors-4u.com/cursor/animated-nyan-cat-rainbow -->
<link rel="stylesheet" href="https://cdn.cursors-4u.net/cursors/animated/animated-nyan-cat-rainbow-c493f1ef-32.css">
<!-- End www.Cursors-4U.com Code -->
  
  
  
  

     
  
  <style>
          #wrapper {
    width: 950px;
    margin: auto;
}
       .content {
    display: flex;
}


  .content {
    max-width: 500px;
    margin: auto;
  }
  
  body {
    font-family: "Chakra Petch", sans-serif;
      background-image: url("images/windows xp background.png");
}


header {
  background-image: url("images/windows xp background.png");
  padding: 10px;
  text-align: center;
  font-size: 35px;
  color: white;
  border: 2px solid #7aa4d4;
}


  h1 {
    color:#000033;
    font-family: "Chakra Petch", Sans-Serif;
  }
  
  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #bbd3e3;
  text-align: center;

}

ul li {
   display: inline-block;
}

ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 10px 14px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #97b0c0;
}


.inline-img {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 5px; /* Spacing between images */
}

* {box-sizing: border-box}

.main-layout {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    border: 4px solid #7aa4d4;
}

.sidebar {
    width: 220px;
}

.main-content {
    flex: 1;
}

.window {
    background: white;
    border: 3px solid #7aa4d4;
    margin-bottom: 10px;
    padding: 8px;
}

.window h3 {
    margin: -8px -8px 8px -8px;
}



.status-post {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.status-avatar {
    width: 60px;
    height: 60px;
}

.speech-bubble {
    position: relative;
    background: #ffeef5;
    border: 2px solid #f2bfd2;
    border-radius: 15px;
    padding: 10px;
    max-width: 400px;
}

.speech-bubble::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 15px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #f2bfd2;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 15px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #ffeef5;
}

.status-date {
    font-size: 0.8em;
    color: #666;
    margin-top: 4px;
}


.footer {
    background: white;
    border: 2px solid #7aa4d4;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
}

.footer img {
    margin: 5px;
    vertical-align: middle;
}

.button-bar {
    text-align: center;
    padding: 10px;
}

.neocities-button {
    height: 31px;
     width: 88px;
}

.window.status {
    max-height: 300px;
    overflow-y: auto;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #3dd8ff #d6fff3;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #d6fff3;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #3dd8ff;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
  
  .explore-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.explore-links a {
    display: block;
    text-align: center;

    background: linear-gradient(
        to bottom,
        #f4fbff,
        #d6efff
    );

    margin: 2;
    padding: 4px;

    border: 2px solid #7aa4d4;
    border-radius: 4;

    text-decoration: none;
    color: #000033;
    font-weight: bold;
}


.explore-links a:hover {
    background: #b8d5f0;
    transform: translateY(-2px);
}