body{
    margin: 0px;
    padding: 0px;
    background-color: black;
}

.modules-container {
    display: flex;
    flex-direction: column;
}


.module{

    font-family: "Yu Gothic Light";
    font-size: 16px;
    padding: 50px;
    color: rgb(255, 150, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

#stock{
    color: rgb(255,100,100);
    display: inline;
}



.module:nth-child(odd){
    background-color: black;
}

.module:nth-child(even){
    background-color: rgb(255, 150,255);
    color: black;
}

.module-text {
    width: 50%;
}

.module img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    display: block;
    object-position: center;
}





.navbar{
    display: flex;
    font-family: "Yu Gothic Light";
    background: black;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: rgb(255, 150, 255);
    gap: 20px;

}


#floating-navbar a{
    font-family: "Yu Gothic Light";
    color: white;
    background: darkmagenta;
    position: fixed;
    top: 0px;
    left: 0px;
}

footer{
    margin-top: 50px;    
    padding: 20px;
    text-align: center;
    color: rgb(255, 150, 255);
    font-family: "Yu Gothic Light";
    background: black;
}

.navbar a{
    font-size: 40px;
    color: rgb(255, 150, 255);
}

@media (max-width: 600px) {
    .navbar{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .module {
        flex-direction: column;
        text-align: center;
    }

    .module img {
        width: 100%;
        max-width: 300px;
    }

     #stock{
        display: block;
    }
}