body {
           background: url('https://firefly-lanterns.neocities.org/FA_Wing/practice_4.png') repeat;
           font-family: 'CustomFontHeader', sans-serif;
           color: white;
       }
       .top-bar {
           background-color: #0095ff86;
           padding: 10px;
           display: flex;
           justify-content: space-between;
           align-items: center;
            border: 5px solid;
            border-radius: 25px;
       }
       .profile {
           display: flex;
           align-items: center;
       }
       .profile-pic {
           border-radius: 50%;
           width: 80px;
           margin-right: 15px;
       }
       marquee {
           color: #4BD68E;
           font-size: 18px;
       }
       nav ul {
           display: flex;
           justify-content: space-around;
           background-color: #0095ff7e;
           padding: 10px 0;
           border: 5px solid;
           border-radius: 15px;
       }
       nav a {
           color: #FFFFFF;
           text-decoration: none;
       }
       nav a:hover {
           color: #4BD68E;
       }
       .container {
           display: flex;
           justify-content: space-between;
           padding: 20px;
           background-color: #0095ff7e;
           border: 5px solid;
           border-radius: 25px;
       }
       .column {
           width: 48%;
           background-color: #2e2e2e62;
           padding: 20px;
           border-radius: 10px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
       }
       .img-box {
           width: 100%;
           border-radius: 10px;
           margin-bottom: 15px;
       }
       .floating-img {
           position: absolute;
           animation: float 6s infinite ease-in-out;
       }
       .floating-1 {
           bottom: 50px;
           left: 10%;
       }
       .floating-2 {
           top: 100px;
           right: 10%;
       }
       .floating-3 {
           top: 100px;
           left: 30%;
       }
       .floating-4 {
           bottom: 100px;
           right: 10%;
       }
       @keyframes float {
           0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
           100% { transform: translateY(0); }
       }
       footer {
           text-align: center;
           background-color: #0095ff7e;
           padding: 10px;
           border: 5px solid #FFFFFF;
           border-radius: 25px;
       }
        /* The sidebar menu */
.sidenav {
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #0095ff86;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  border: 5px;
  border-style: solid;
  border-radius: 25px;
  border-color: #f1f1f1;
}




/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #f1f1f1;
  display: block;
}




/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #4BD68E;
}




/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}




/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*Flex Container for the Gallery*/
.flex-box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 15px;
    
}