@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");

    body {
        font-family: "Ubuntu", sans-serif;
        position: relative;
        background-color: #300a24;
        color: #ffffff;
        overflow: hidden;
        height: 100vh;
        margin: 0;
    }
    
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: url("https://raw.githubusercontent.com/ChristND242/PE-logo/refs/heads/main/png/logo-no-background.png") repeat;
        background-size: 100px 100px;
        background-position: center top;
        filter: blur(8px);
        z-index: -1;
    }
  

      .window {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .window-header {
        background: linear-gradient(to bottom, #e0e0e0, #b0b0b0);
        color: #333;
        padding: 8px 12px;
        cursor: move;
        user-select: none;
      }

      .terminal {
        background-color: #300a24;
        color: #ffffff;
        font-family: "Ubuntu Mono", monospace;
        padding: 15px;
        height: 100%;
        overflow-y: auto;
      }

      .terminal-input {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }

      .prompt {
        color: #73c990;
        margin-right: 10px;
      }

      .cursor {
        display: inline-block;
        width: 10px;
        height: 20px;
        background-color: #ffffff;
        animation: blink 1s infinite;
      }

      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }

      .desktop-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80px;
        margin: 15px;
        text-align: center;
        cursor: pointer;
        user-select: none;
      }

      .desktop-icon:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
      }

      .icon-label {
        margin-top: 5px;
        color: white;
        text-shadow: 1px 1px 2px black;
        font-size: 12px;
      }

      .taskbar {
        background-color: #2d2d2d;
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        position: fixed;
        bottom: 0;
        width: 100%;
      }

      .taskbar-icon {
        padding: 5px 10px;
        margin: 0 5px;
        border-radius: 3px;
      }

      .taskbar-icon:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .active-window {
        z-index: 100;
      }

      .draggable {
        position: absolute;
      }

      .file-explorer {
        width: 300px;
        height: 400px;
      }

      .folder-view {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }

      .folder-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80px;
        margin: 10px;
        text-align: center;
        cursor: pointer;
      }

      .folder-icon:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }

      .menu-bar {
        display: flex;
        background-color: #f5f5f5;
        padding: 5px 0;
        border-bottom: 1px solid #d0d0d0;
      }

      .menu-item {
        padding: 5px 10px;
        color: #333;
        cursor: pointer;
      }

      .menu-item:hover {
        background-color: #e0e0e0;
      }

      .content-area {
        padding: 15px;
        height: calc(100% - 60px);
        overflow-y: auto;
      }

      .browser-content {
        padding: 20px;
      }

      .browser-url-bar {
        display: flex;
        padding: 5px;
        background-color: #f0f0f0;
        border-bottom: 1px solid #d0d0d0;
      }

      .url-input {
        flex-grow: 1;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-right: 5px;
      }

      .browser-button {
        padding: 5px 10px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 3px;
        cursor: pointer;
      }

      .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }

      .profile-pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 20px;
        border: 5px solid #73c990;
      }

      .contact-form {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 500px;
      }

      .form-input {
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .form-textarea {
        height: 150px;
        resize: none;
      }

      .form-submit {
        background-color: #73c990;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
      }

      .project-card {
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }

      .project-image {
        width: 100%;
        height: 150px;
        object-fit: cover;
      }

      .project-details {
        padding: 15px;
        color: #333;
      }

      .project-title {
        font-weight: bold;
        margin-bottom: 10px;
      }

      .project-description {
        font-size: 14px;
        margin-bottom: 10px;
      }

      .project-tech {
        display: flex;
        flex-wrap: wrap;
      }

      .tech-tag {
        background-color: #73c990;
        color: white;
        padding: 3px 8px;
        border-radius: 20px;
        font-size: 12px;
        margin-right: 5px;
        margin-bottom: 5px;
      }

      .start-menu {
        position: absolute;
        bottom: 50px;
        left: 10px;
        width: 300px;
        background-color: #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        display: none;
        z-index: 1000;
      }

      .start-header {
        background-color: #2d2d2d;
        color: white;
        padding: 10px;
        font-weight: bold;
      }

      .start-content {
        display: flex;
        height: 400px;
      }

      .start-sidebar {
        width: 50px;
        background-color: #e0e0e0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
      }

      .start-main {
        flex-grow: 1;
        padding: 10px;
        overflow-y: auto;
      }

      .start-item {
        display: flex;
        align-items: center;
        padding: 8px;
        cursor: pointer;
        color: #333;
      }

      .start-item:hover {
        background-color: #e0e0e0;
      }

      .start-item i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
      }

      .notification {
        position: fixed;
        bottom: 50px;
        right: 10px;
        background-color: #4caf50;
        color: white;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        display: none;
        z-index: 1000;
      }

      .maximized {
        width: 100% !important;
        height: calc(100% - 40px) !important;
        top: 0 !important;
        left: 0 !important;
      }