* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header, footer {
   background: black;
   position: relative;
   z-index: 1;
   margin: 0;
   padding: 0;
   width: 100%;
}
html, body {
   margin: 0;
   padding: 0;
   background: black;
   font-family: helvetica, serif;
}

.name {
    color: rgb(255, 255, 255);
    font-size: 40px;
    font-weight: bold;
}
.title {
    color: rgb(255, 255, 255); /* White color */
    font-size: 26px;
    font-weight: bold;
}

main {
    background: #181818;
    width: 100%;
    min-height: 80vh;/* padding: 20px; Optional: Adds some padding inside the main content */
}


.hover-container {
    position: relative;
    display: inline-block;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

.hover-image {
    display: block;
    /*width: auto;
    height: auto; /* Ensures the image scales proportionally */
    transition: filter 0.3s ease;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    background-color: transparent;
}

.hover-container:hover .hover-image {
    filter: brightness(65%);
}

.hover-text {
    visibility: hidden;
    color: white;
    text-align: center;
    padding: 5px 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: visibility 0.3s ease;
}

.hover-container:hover .hover-text {
    visibility: visible;
}

.icon {
    width: 50px; /* Adjust the size as needed */
    height: auto;
    transition: transform 0.3s ease;
    background: black;
}

.icon:hover {
    transform: scale(1.5); /* Slightly enlarges the logo on hover */
}

/* Hide the visual search icon */
img {
    -ms-high-contrast-adjust: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
   /* -webkit-tap-highlight-color: transparent; */
    background: black;
}

.black-background {
  background-color: black;
}
@media (max-width: 600px) {
    header, footer {
        height: auto;
        padding: 10px;
    }
    main {
        padding: 10px;
    }
}
.container {
            background-color: black;
            width: 100%; 
            justify-content: center;
            align-items: left;
            text-align: left;
            margin-left: 0;
            padding: 20px;
}
.outer-container {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            background-color: #181818;
            width: 100vw;
            
           
}