body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            /* background-image: url('/images/bg.png');
            background-position: 70% 60%; */
            background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
            background-color: #0b0d13;
            font-family: 'Courier New', Courier, monospace;
            overflow-x: hidden; /* Prevent horizontal scrolling */
            z-index: 2;
        }
        
        @media (max-width: 800px) {
            .main-content {
                padding: 100px 10px 40px;
            }

            embed {
                height: 500px; /* Adjust iframe height for smaller screens */
            }
        }
        
        form {
            display: inline;
            margin: 0;
            padding: 0px 0px 10px 0px;

        }

        form input[type="submit"] {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font: inherit; /* Inherit the font from the parent */
            text-decoration: none;
            padding: 0;
            margin: 5px;
            display: inline;
            line-height: normal;
        }

        form input[type="submit"]:hover {
            text-decoration: underline;
        }
        
        hr.solid {
          border-top: 3px solid #bbb;
        }
        
        .live-circle-container {
          position: relative;
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
        
        .inner-circle {
          position: absolute;
          width: 15px;
          height: 15px;
          background-color: #32CD32; /* Lime green */
          border-radius: 50%;
          z-index: 2;
          box-shadow: 0 0 2px rgba(50, 205, 50, 0.8);
        }
        
        .outer-circle {
          position: absolute;
          width: 15px;
          height: 15px;
          background-color: #32CD32; /* Lime green */
          border-radius: 50%;
          opacity: 0.6;
          z-index: 1;
          animation: expand-fade 3s infinite;
        }
        
        @keyframes expand-fade {
          0% {
            transform: scale(1);
            opacity: 0.5;
          }
          100% {
            transform: scale(2.2);
            opacity: 0;
          }
        }     


        header, footer {
            width: 100%;
            box-sizing: border-box; /* Ensure header and footer stay within viewport */
        }
        
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(17, 23, 41, 0); /* Semi-transparent background */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            z-index: 10; /* Ensure header is above main content */
        }
        
        c {
            margin: 0;
            padding: 0;
        }
        
        .header {
            display: flex;
            justify-content: center; /* Center content horizontally */
            align-items: center;
            padding: 10px;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .header-right {
            position: absolute;
            top: 10px;
            right: 10px;
            /* Additional styling if needed */
        }




        
        a {
            color: white;
            text-decoration: none;

        }

        .logo {
            width: 80px; /* Logo size */
            height: auto;
            margin-right: 0px;
        }

        .logo-text {
            color: white;
            font-size: 1.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            padding: 10px;
            text-decoration: none;
        }
        
        bottom-right-image {
            position: absolute;
            bottom: 20px;
            margin-top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            z-index: 0; /* Ensure it appears on top */
        }


        .username-display {
            color: white;
            font-size: 1em;
            margin-top: 20px;
        }

        .main-content {
            flex: 1; /* Allows content to fill remaining space */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 80px 20px 40px; /* Padding for header and footer */
            color: white;
            font-size: 1em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            width: 100%;
            box-sizing: border-box; /* Include padding in element's width and height */
            position: relative;
            padding-bottom: 50px; /* Ensure there's space for the image */
            z-index:5;
        }
        
        #container3d canvas{
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            width: 100%;
            max-width: 1200px;
            margin-top: 20px;
            padding: 0 10px; /* Padding to prevent grid items from touching the screen edges */
            box-sizing: border-box;
        }

        .grid-item {
            background: rgba(100, 100, 100, 0.1); /* Initial background */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            color: white;
            padding: 20px;
            border: 0px solid #181f30;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for better visibility */
            border-radius: 5px;
            box-sizing: border-box;
            text-align: left;
            transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth transition */
        }
        
        .grid-item1 {
            background: rgba(100, 100, 100, 0.1); /* Initial background */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            color: white;
            padding: 5px;
            border: 0px solid #181f30;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for better visibility */
            border-radius: 5px;
            box-sizing: border-box;
            text-align: left;
            transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth transition */
        }
        
        .grid-item2 {
            background: rgba(27, 45, 87, 0); /* Initial background */
            
            padding: 0px;
            border: 0px solid #181f30;
            box-shadow: none; /* Optional: adds shadow for better visibility */
            border-radius: 5px;
            box-sizing: border-box;
            text-align: left;
            transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth transition */
        }
        
        /* Hover effect for the grid item */
        .grid-item:hover {
            background: rgba(100, 100, 100, 0.3); /* Darker background on hover */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            
        }
        
        .grid-item:hover button{
            background-color: rgba(100, 100, 100, 0.4);
        }
        
        /* Dimming effect for non-hovered grid items */
        .grid-item:hover ~ .grid-item, 
        .grid-container:hover .grid-item:not(:hover) {
            filter: brightness(0.95); /* Dim the brightness of other grid items */
        }

        .grid-item .button-container {
            display: flex;
            gap: 10px; /* Space between buttons */
            margin-top: 10px; /* Space above buttons */

        }

        .grid-item button {
            padding: 10px 20px;
            font-size: 1em;
            background-color: rgba(100, 100, 100, 0.2);
            color: white;
            border: none;
            border-radius: 4px;
            /* cursor: pointer; */
            width: auto; /* Adjust width to fit button content */
            box-sizing: border-box;
            transition: background-color 0.3s;

        }
        
        .link-input {
            margin-top: 20px;
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 300px;
            max-width: 90vw; /* Increased default width */
        }
        
        
        .link-input input[type="text"] {
            padding: 10px;
            font-size: 1em;
            border: 0px solid #ccc;
            border-radius: 0px;
            width: 100%;
            background-color: rgba(100, 100, 100, 0.4); /* Dark background */
            color: white; /* White text */
            font-family: 'Courier New', Courier, monospace;
            box-sizing: border-box;
            flex: 1;
        }

        .link-input input[type="password"] {
            padding: 10px;
            font-size: 1em;
            border: 0px solid #ccc;
            border-radius: 0px;
            width: 100%;
            background-color: rgba(100, 100, 100, 0.4); /* Dark background */
            color: white; /* White text */
            font-family: 'Courier New', Courier, monospace;
            box-sizing: border-box;
        }

        .link-input button {
            background-color: rgba(100, 100, 100, 0.4);
            padding: 10px 20px;
            font-size: 1em;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: 10px;
        }

        .link-input button:hover {
            background-color: rgba(100, 100, 100, 0.8);
        }
        
        .link-input textarea {
            display:block;
            padding: 10px;
            font-size: 1em;
            border: 0px solid #ccc;
            border-radius: 0px;
            width: 100%;
            background-color: rgba(100, 100, 100, 0.4); /* Dark background */
            color: white; /* White text */
            font-family: 'Courier New', Courier, monospace;
            box-sizing: border-box;
        }

        .link-input textarea {
            height: 200px; /* Set the height for the textarea */
            resize: vertical; 
            min-height: 100px;
            max-height: 400px;
        }
        
        .status-change-buttons {
            display: flex; /* Arrange the buttons and text in a row */
            align-items: center; /* Vertically align items */
            gap: 10px; /* Space between buttons and text */
            font-size: 16px; /* Font size for consistency */
            margin-top: 20px;
        }
        
        .status-change-buttons button {
            padding: 8px 12px; /* Add some padding around the text */
            font-size: 1em;
            background-color: rgba(100, 100, 100, 0.4);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap; /* Prevent text from wrapping */
            width: auto; /* Ensure button width adjusts to the text */
        }
        
        .status-change-buttons button:hover {
            background-color: rgba(100, 100, 100, 0.8);
        }
        
        hr.solid {
          border-top: 3px solid #bbb;
        }

        .btn-settings {
            margin-top: 0px;
        }

        .btn-settings:hover {
            background-color: rgba(100, 100, 100, 0.2);
        }

        .grid-item.large {
            grid-column: span 2;
        }

        .grid-item.wide {
            grid-column: span 3;
        }

        .grid-item.small {
            grid-column: span 1;
            height: 150px;
        }

        .grid-item.long {
            grid-column: span 1;
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .grid-item.med {
            grid-column: span 2;
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .grid-item.long1 {
            grid-column: span 1;
            grid-row: span 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .grid-item2.long2 {
            grid-column: span 1;
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        


        .grid-item .project-title {
            font-size: 1.5em;
            margin-bottom: 10px;
            display: flex;
              align-items: center;
              gap: 10px; /* Add spacing between the circle and the text */

        }
        
        .grid-item .project-description {
            font-size: 1em;
        }

        .grid-item .project-description1 {
            font-size: 1em;
            margin-bottom: 20px;
        }
      .grid-item .project-description2 {
            font-size: 1em;
            margin-bottom: 0px;
        }
        .grid-item button {
            padding: 10px 20px;
            font-size: 1em;
            background-color: rgba(100, 100, 100, 0.2);
            color: white;
            border: none;
            border-radius: 4px;
            /* cursor: pointer; */
            margin: 0px;
            width: 100%;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
        }

        .grid-item btn-settings {
            margin-top: 10px;
        }

        .grid-item button:hover {
            background-color: rgba(100, 100, 100, 0.8);

        }

        .avatar-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .avatar-container img {
            display: block;
            max-width: 100%;
            height: auto;
            padding: 5px;
        }
                

        footer {
            text-align: center;
            padding: 10px 0;
            background: rgba(17, 23, 41, 0); /* Semi-transparent background */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            box-sizing: border-box;
            position: relative;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10; /* Ensure header is above main content */

        }

        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        footer ul li {
            display: inline;
            margin: 0 10px;
        }

        footer ul li a , ul li a{
            color: white;
            text-decoration: none;
            font-size: 1em;
        }

        ul {
            list-style-type: none; /* Remove bullets */
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margins */
        }

        li {
            padding: 2px; /* Remove padding */
        }

        h1, h2, h3, h4, h5, h6, h7 {
            font-weight: normal;
        }

        footer ul li a:hover,  ul li a:hover  {
            text-decoration: underline;
        }

        /* Mobile view adjustments */
        @media (max-width: 1130px) {
                    
            .header-right {
                display: none;
            }
            
            .custom-cursor {
            background-color: rgba(179, 176, 245, 0);
            box-shadow: 0 0 15px rgba(179, 176, 245, 0);
            }
            .custom-cursor.small {
                background-color: rgba(179, 176, 245, 0);
            }
            .grid-container {
                grid-template-columns: 1fr; /* Single column on smaller screens */
                gap: 10px; /* Smaller gap between items on mobile */
            }

            .grid-item {
                grid-column: span 1; /* All items take up one column */
                background: rgba(100, 100, 100, 0.1); /* Initial background */
                grid-row: auto; /* Remove row spanning */
                height: auto; /* Let the height adjust based on content */
            }
            

            .grid-item.large,
            .grid-item.wide,
            .grid-item.long,
            .grid-item.long1,
            .grid-item.med {
                grid-column: span 1; /* Ensure all items span one column */
                grid-row: auto; /* Remove row spanning */
                width: 100%; /* Make sure the width is 100% on mobile */
            }

            .grid-item button {
                width: 100%; /* Ensure buttons take up the full width */
                background: rgba(100, 100, 100, 0.4); /* Initial background */

            }

            .main-content {
                padding: 70px 10px 90px; /* Adjust padding to fit smaller screens */
            }
            
    
            ul li a{
                color: white;
                text-decoration: underline;
                font-size: 1em;
            }

        }

        .socialmediaicons .fa:hover {
            color: white;
            opacity: 0.8;
            text-decoration: none;
        }
        

        .socialmediaicons .fa {
            padding: 10px;
            font-size: 20px;
            width: 25px;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
        }

        .socialmediaicons .fa-github {
            background: #1d2127;
            color: white;
        }

        .socialmediaicons .fa-linkedin {
            background: #007bb5;
            color: white;
        }

        .socialmediaicons .fa-instagram {
            background: #dd2a7b;
            color: white;
        }

        .socialmediaicons .fa-reddit {
            background: #ff5700;
            color: white;
        }
        
        .socialmediaicons .fa-twitter {
            background: #ff5700;
            color: white;
        }
        
        /* Container for the profile photo */
        .profile-photo-container {
          position: relative;
          width: 50px;
          height: 50px;
          margin: 5px; /* Centering the photo */
        }
        
        /* The profile photo itself */
        .profile-photo {
          width: 100%;
          height: 100%;
          border-radius: 50%; /* Makes the image round */
          border: 1px solid white; /* Optional: white border around the image */
          position: relative;
          z-index: 10;
        }
        
        /* Pulsating effect */
        .profile-photo-container::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: rgba(55, 45, 115, 1); /* Blue pulsating color */
          transform: translate(-50%, -50%);
          z-index: 5;
          animation: pulse 2s infinite; /* Animation duration and repetition */
        }
        
        /* Keyframe for the pulsating animation */
        @keyframes pulse {
          0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
          }
          50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.6;
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
          }
        }
        
        /*works janky on mobile :<*/
.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  transition: 200ms;
}


#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  transition: 700ms;
  background: rgba(100, 100, 100, 0.2); /* Initial background */
            backdrop-filter: blur(10px); /* Apply Gaussian blur */
            -webkit-backdrop-filter: blur(10px); /* Safari support */
}


.title {
  opacity: 1;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  color: white;
}


#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: '';
  /*background: linear-gradient(188deg, rgba(20,20,60,0.3) 0%, rgba(25,48,96,1) 46%, rgba(21,21,88,0.5) 100%, rgba(40,60,112,0.3) 100%);*/

  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}