body {
  background-image: url("images/background.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font-family: Verdana, Tahoma, sans-serif;
  text-align: center;
}

/* PHONE CONTAINER */
.box {
  width: 400px;
  height: 600px;
  background-image: url("images/phone.png");
  filter: drop-shadow(0px 10px 10px rgba(100, 0, 0, 0.5));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative; /* IMPORTANT */
  transform: scale(0.7);
  transform-origin: top center;
}
/* SCREEN AREA */
.screen {
  position: absolute;
  /* 🔧 ADJUST THESE VALUES */
  top: 90px;
  left: 120px;
  width: 176px;
  height: 220px;
  font-size: 15px;
  line-height: 1.3;
  padding: 8px;
  text-align: center;
  overflow: hidden;
}
.screen a:hover {
    text-shadow: 
    0 0 8px currentColor;
  }
  
  .layout {
    display: flex;
    align-items: center;
    gap: 5px; /* space between left container and phone */
    }
    
    .side-box {
      width:400px;
      height: 600px;
      background-image: url("images/f4 gif.gif");
      background-repeat: no-repeat;
      color: black;
      font-size: 14px;
        transform: scale(0.7);
       transform-origin: top center;
    }
    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding/border are included in element's total width/height */
}

.wrapper {
    display: flex;
    min-height: 100vh; /* Ensures the wrapper takes at least the full height of the viewport */
}

.sidebar {
    width: 200px; /* Set a fixed width for the sidebar */
    background-color: #000000;
    background-image: url("images/background.jpeg");
    background-repeat: repeat;
    color: white;
    filter: drop-shadow(0px 10px 10px rgba(100, 0, 0, 40));
    padding: 20px;
    /* Optional: use position: fixed to keep the sidebar in place on scroll */
    /* position: fixed; */ 
    /* height: 100%; */
}

.sidebar h2 {
    color: #04AA6D;
    margin-bottom: 15px;
}

.sidebar ul {
    list-style: none;
}

.sidebar li a {
    color: white;
    text-decoration: underline;
    display: block; /* Makes the entire list item area clickable */
    padding: 10px 0;
    transition: background-color 0.3s;
}

.sidebar li a:hover {
    background-color: #575757;
}

.main-content {
    flex-grow: 1; /* Allows the main content to take up the remaining space */
    padding: 20px;
    /* If you use position: fixed for the sidebar, add a margin-left here: */
    /* margin-left: 200px; */ 
}