html, body {
    height: 100%;
    margin: 0;
}

.background {
    background-color: #0000; /* transparent background */
    background-image: url("https://cdn.pixabay.com/photo/2024/07/05/16/03/green-8875120_1280.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* ensures the image covers the whole background */
}

.otsikko {
    font-family: "Arial", Sans-serif;
    font-size: 70px;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Rivittää laatikot, jos tila loppuu */
    justify-content: center; /* Keskittää laatikot vaakasuunnassa */
    gap: 10px; /* Pieni väli laatikoiden väliin */
}


.box {
    border: 0px;
    padding: 15px;
    border-radius: 20px; /* Pyöristää reunoja, mutta maltillisesti */
    width: 250px; /* Kaikki laatikot ovat saman levyisiä */
    height: auto; /* Allow the height to adjust automatically */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Tasainen jako sisällölle */
    word-wrap: break-word; /* Wrap the text within the box */
}

.box p {
    overflow: hidden; /* Hide anything overflowing */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    white-space: normal; /* Allow text to wrap normally */
    margin-top: 10px; /* Add some space above the paragraph */
}

.box:hover {
background-color: rgba(0, 0, 0, 0.4);
}

.logo {
    width: 90px;
    height: 70px;
   
}

#cart {
    display: none;
    opacity: 0; 
    transform: translateY(-10px); 
    transition: opacity 0.3s ease, transform 0.3s ease;
    
          position: fixed;
            top: 100px;
            right: 10px;
            width: 250px;
            background-color: rgba(186, 232, 184, 0.8);
            border: 2px solid green;
            padding: 10px;
        
        }
#cart.show-cart {    
    display: block; 
    opacity: 1; 
    transform: translateY(0); }        
        
.ostoskori {
     position: fixed;
    top: 15px;
    right: 10px;
    width: 70px;
    height: 60px;
}
.ostoskori-button {
     position: fixed;
      background: none;
            border: none;
    cursor: pointer; 
      height: auto;
}


.button_green {
    
    background-color: rgba(186, 232, 184, 0.8);

}

button {
    width: 100px;
    height: 40px
}

.button_green:hover {
background-color: rgba(86, 216, 79, 0.8);
}

.button_red {
    
    background-color: rgba(245, 77, 68, 0.8);

}


.button_red:hover {
background-color: rgba(238, 26, 14, 0.8);
}

image {
    width:100%;
    height:100%;
}

.button-container {
    display: flex; /* Align buttons in a row */
    gap: 10px; /* Adds spacing between buttons */
    justify-content: center; /* Centers buttons horizontally */
    margin-top: 10px; /* Adds space above buttons */
}