/* styles.css */
body, html {
    margin: 0;
    font-family: 'Press Start 2P', cursive; /* Pixel font */
    height: 100%; /* Set the height of body and html to 100% */
    
    scroll-snap-type: y mandatory;
}

.container {
    display: flex;
    flex-direction: column;
    height: 304vh;
}

.container section {
    height: 100%; /* Set each section to full viewport height */
    scroll-snap-align: start;
    position: relative;

    justify-content: center;
    align-items: center;
}


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: 3;
}


#home {
    background: url('background.gif') center/cover no-repeat fixed;
}


.scroll-text-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    color: white;
}


.scroll-down-text {
    margin: 0 20px;
    font-size: 18px;
}

.left-arrow {
    border-width: 10px 15px 10px 0;
    border-color: transparent #fff transparent transparent;
    margin-right: 4px;
}

.right-arrow {
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}


#portfolio {
    background: none;
     /* No background for the portfolio section */
}




#pixelCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 3;
}




canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}


#name, #subtitle {
    
    display: block;
    margin: 0 auto; /* Set initial opacity to 0 for fade-in effect */
}

#name{
    margin-bottom: 2%;
}

nav {
    text-align: center;
    margin-top: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    transition: color 0.3s;
}

nav a:hover {
    color: #42a5f5;
}


.slide-animation {
    transition: background 1s ease;
}

nav a.underline {
    border-bottom: 2px solid #42a5f5;
}