/* Styles for desktop (e.g., screens wider than 768px) */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  overflow: hidden; /* Prevent body scrolling */

  background-image: url("bg_desktop_1920x1080.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

.outer-container {
  max-width: 33.33%; /* Set the maximum width to one-third of the page */
  float: left; /* Float the container to the left */
  margin: 1%; /* Add margin for spacing */
}

.image-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns with equal width */
  grid-gap: 10px; /* Adjust the gap between images */
  align-items: start; /* Align items at the start (top) of the container */
  justify-content: start; /* Align content to the start (left) of the container */
  margin: 5px; /* Add margin to the container for spacing */
}
.icon {
  text-align: center;
  flex-direction: column;
}
.icon img {
  display: block; /* Make the image a block element to stack it above the text */
  max-width: 48px;
  max-height: 48px;
  margin: 0 auto; /* Center the image horizontally within the icon */
  cursor: pointer;
}
.icon span {
  display: block; /* Make the span a block element to stack it below the image */
  text-align: center; /* Center the text horizontally */
  margin-top: 5px; /* Add some spacing between the image and text */
  font-size: 75%;
  color: aliceblue;
}

/* Style for the images (optional) */
.open-window-button {
  max-width: 100%; /* Ensure images don't exceed their container */
  height: auto; /* Maintain aspect ratio */
}

.window {
  position: absolute;
  max-width: 500px;
  max-height: 600px;

  /* background-color: #fff;
  border: 2px solid #ccc;   */
  background-color: #fff;
  border: 2px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none; /* have it closed by default */
}

.window-content {
  max-width: 500px;
  max-height: 550px;
  overflow: auto; /* Add scrollbar when content exceeds dimensions */
}

.window-content p {
  color: black;
  padding-top: 10px;
}

.paradise p {
  padding-top: 20px;
}

.window-content img {
  max-width: 450px;
  max-height: 450px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 20px;
}

.window-top-bar {
  background-color: #1f0e49;
  color: #fff;
  padding: 5px;
  cursor: grab; /* Change cursor to indicate draggable */
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.window-name {
  text-align: left;
  font-size: 16px;
}

.opening-buttons {
  display: flex;
  justify-content: center; /* This places the buttons at opposite ends */
}
.paradise-button {
  margin-left: 10%;
  margin-right: 10%;
}

.close-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-align: right;
}

.close-button:hover {
  background-color: #ff0000;
}

.inxendere-header {
  font-size: 400%;
  text-align: center;
  background-color: #031432;
  color: #f14f1e;
  font-style: oblique;
}

.window-content {
  background-color: rgb(246, 249, 252);
  padding: 20px;
}
.window-content-specs h4 {
  justify-content: center;
}
.window-content-specs {
  vertical-align: top;
}
.window-content-specs div {
  border: solid;
  border-color: aqua;
  margin-top: 20px;
}

/* Style each project card */
.project {
  display: flex; /* Use flexbox to align image and details */
  border: 2px solid #c6e9ee;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: border-color 0.3s ease-in-out;
}
.project:hover {
  border: 2px solid;
  border-color: rgb(65, 8, 22);
  border-radius: 5px;
  transform: scale(1.02); /* Increase size on hover */
  box-shadow: 5px 5px 10px rgba(7, 36, 99, 0.3); /* Add a shadow on hover */
}

.project img {
  max-width: 200px; /* Adjust image width as needed */
  max-height: 200px; /* Adjust image height as needed */
  border-radius: 15px 0px 0px 15px;
  padding: 10px;
}
.project-details {
  padding: 10px;
}

.project h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}
.project p {
  margin-top: 5px; /* Add space between title and description */
}
/* Style links within project grids */
.project-link {
  text-decoration: none; /* Remove underlines from links */
  color: #111766; /* Set the desired text color for links */
}

/* Style links on hover */
.project-link:hover {
  text-decoration: none; /* Remove underline on hover */
  color: #580000; /* Set the desired text color for links on hover */
  transition: color 0.5s ease-in-out;
}
p.indent {
  text-indent: 5%;
}

/* Style for the bottom panel */
.taskbar-panel {
  background-color: rgba(15, 14, 68, 0.4);
  padding: 1px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32px;
  display: flex;
  text-decoration: none;
}

/* Style for individual panel items */
.panel-item {
  display: flex;
  align-items: center;
  padding-left: 2px;
  border-color: #333;
  border: 2px solid;
  border-radius: 10%;
  margin-right: 0.2%;
}

.panel-item a {
  text-decoration: none;
}
.panel-item:hover {
  border-color: rgb(195, 231, 241);
}

.panel-item img {
  max-width: 24px;
  max-height: 24px;
}

.panel-item p {
  font-size: 120%;
  text-align: center;
  text-decoration: none !important;
  color: #c6e9ee;
}

/* styles.css */

/* Apply margin to all but the last panel item to avoid a gap on the right of the last item */

/* might be useful */

/* .panel-item:not(:last-child) {
  margin-right: 10px;
} */