/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: #ffffff83;
}

canvas#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Viewport width */
    height: 100vh; /* Viewport height */
    z-index: -1; /* Ensure it stays behind all other content */
}

.feature-area {
    height: auto; /* Let it grow as needed */
    background-color: #ffffff00;
    perspective: 1000px;
}

.description, .screenshot {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-out, opacity 0.5s ease-in;
}

.description {
    transform: translateY(20px);
    opacity: 0;
    width: 100%; 
}

.screenshot-minus {
    transform: rotateY(-45deg); /* Start with the image inclined to the left */
    transform-origin: center center; /* Ensure rotation is around the center */
    transition: transform 1s ease-out;
}
.screenshot-plus {
    transform: rotateY(45deg); /* Start with the image inclined to the left */
    transform-origin: center center; /* Ensure rotation is around the center */
    transition: transform 1s ease-out;
}

.screenshot img {
    height: auto;
    display: block;
    max-width: 100%;
}


.full-height-center {
    display: flex;      /* Enable flex container */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    height: 100vh;      /* Full viewport height */
    margin-top: 0;      /* Remove top margin */
    margin-bottom: 0;   /* Remove bottom margin */
}