html {
    scroll-behavior: smooth; 
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin:0;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px; /* Space between grid items */
    padding: 20px;
    background: transparent; 
    position: fixed; /* Keep the grid fixed at the top */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; 
    z-index: 1000;
    height: auto;
}

.dark-mode .grid {
    background:rgb(28, 28, 28) ;/* Darker background for dark mode */
}
.dark-mode body {
    background: rgb(58, 58, 58); /* Dark background for the body */
}

body::before {
    --size: 2.5rem; /*size of squares in grid (lower means bigger squares)*/
    --line: color-mix(in oklch, canvasText, transparent 70%);
    content: '';
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        90deg,
        var(--line) 0.0625rem,
        transparent 0.0625rem var(--size)
    )
    50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size);
    
    mask: linear-gradient(-0deg, transparent 50%, #f0f0f0); /* length of grid effect (higher means shorter grid effect)*/

    top: 0;
    transform-style: flat;
    position: fixed;
    z-index: -1;
}
/* Dark Mode Styles */
.dark-mode body::before {
    --line: color-mix(in oklch, white, transparent 0%);
    content: '';
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        90deg,
        var(--line) 0.0625rem,
        transparent 0.0625rem 2.5rem
    )
    50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size);
    mask: linear-gradient(-0deg, rgba(255, 255, 255, 0.5) 75%, transparent 100%); 
    top: 0;
    position: fixed;
    z-index: -1;
}

.hero {
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#WelcomeText {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    text-align: center; 
    z-index: 1000; 
    font-size: max(13vw, 30px);
}  

.dark-mode .content {
    color: white; /* Text color in dark mode */
}
#SwitchLang {
    position: fixed;
    right: 5px;
    top: 5px;
    margin: 5px;
    border-color: gray;
}
#Nightmode {
    position: fixed;
    left: 5px;
    top: 5px;
    margin: 5px;
}
a {
    position: fixed;
    top: 10px; /* distance from the top */
    left: 50%; /* position the left edge at 50% of the viewport */
    transform: translateX(-50%); /* shift it left by half its width to center it */
    color: rgb(45, 92, 179);
  }
#ButtonContain {
    position: absolute;
    top: calc(100% + 20px); /* 20px below the hero section */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 1001;
}

#cleanliness {
    position: relative /*TBD*/
}
#portfolio {
    position:relative;
    top:150px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#infroma {
    top:0px;
    left: 0px;
}
.content {
    color: black; /* Text color in light mode */
    font-size: max(1.5vw, 20px);
}
.dark-mode .content {
    color: white; /* Text color in dark mode */
}
.toomanynames {
    position: relative;
    top: 0px;
    height: 4px; 
    background-color: rgb(0, 89, 255); /* Background color */
    width: 100%; /* Full width of its parent #Infroma */
    margin: 0 auto; /* align to center */
}
.container {
    position: relative;
    top: 180px;
    left: 0px;
    flex-direction: column;

}
#Smiley{
    position: relative;
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);
}
#ArtsAndPixels{
    position: relative;
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);
}
#Island{
    position: relative; 
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);   
}
#UFO{
    position: relative; 
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);
}
#Light{
    position: relative; 
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);   
}
#Disconnected{
    position: relative; 
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);   
}
#Smoesjesbox{
    position: relative; 
    top: 0px;
    left: 0px;
    font-size: max(1.3vw, 18px);   
}
.dark-mode .toomanynames {
    background-color: rgb(33, 48, 77); /* Background color */
}