/* Css laatikon asettelu.  */
.box, .specs-box{
    border-radius: 15px;
    background-color: #f7f7f7ff;
    border-width: 1px;
    width: 336px;
    height: 305px;
    text-align: center;
    filter: drop-shadow(1rem 1rem 0.5rem #4245);
}

.box img {
    margin-top: 30px;
    margin-bottom: 7px;
    border-radius: 9px;
    width: 180px;
    height: 180px;
}

.box h3 {
    margin-top: -5px;  /* Nostetaan elementtiä ylös. */
    font-size: 12px;
    /* Jos teksti menee yli niin käsittely. */
    max-width: 92%;
    margin-left: 4%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.box:hover{
    cursor: pointer;
    animation-name: boxHover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes boxHover {  /* Kun laatikkoa osoitetaan niin se muuttuu hitaasti */
    0% {background-color: #f7f7f7ff;}
    100% {background-color: #e3f3faff; color: #666666ff;}
}

/* Tekniset tiedot laatikon asettelu. */

.specs-box {
    display: block;
    position: relative;
    text-align: left;
    max-width: 98%;
}

.specs-box p {
    font-size: 18px;
    margin-bottom: -16px;  /* Asettelu jotta tekstin rivit eivät olisi liian pitkiä. */
    margin-left: 15px;
}

/* Yleinen asettelu. */

.container {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 2;
    place-content: left;
    gap: 30px 40px;
    max-width: 70%;
    margin-left: 20%;  /* Jotta elementit eivät olisi kulmassa kiinni */
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}