@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.webpage-body{
    padding: 8% 20px;
}

/* Products Category */
.products-category{
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 5%;
    margin-bottom: 6.5%;
}
.products-category a{
    background-color: rgb(215, 215, 253);
    padding: 5px 30px;
    border: 0.1rem solid rgb(215, 215, 253);
    border-radius: 25px;
    color: rgb(49, 49, 49);
}

/* Product Slot */
.product-slot{
    align-content: center;
    justify-content: center;
}
.product-image{
    position: relative;
}
.product-image img{
    width: 43%;
    animation: bounce2 1s ease infinite;
}
#nas-width{
    width: 79%;
}
#nas-shadow{
    width: 75%;
    bottom: 100px;
}
#monitor{
    width: 80%;
}
#monitor-shadow{
    left: 100px;
    width: 80%;
    bottom: 80px;
}
#cctv{
    width: 25%;
}
#switch{
    width: 50%;
}
@keyframes bounce2 {
	0% {transform: translateY(-65px);}
    10% {transform: translateY(-64px);}
    20% {transform: translateY(-62px);}
    30% {transform: translateY(-60px);}
    40% {transform: translateY(-50px);}
    60% {transform: translateY(-40px);}
	100% {transform: translateY(-65px);}
}
.product-image span{
    display: block;
    position: absolute;
    bottom: 10%;
    border-radius: 100%;
    background-color: black;
    filter: blur(3px);
    width: 43.5%;
    height: 6px;
    animation: shadow 1s ease-in-out infinite;
}
@keyframes shadow {
    0% {
        transform: scale(45%);
    }
    10% {
        transform: scale(44%);
    }
    20% {
        transform: scale(42%);
    }
    30% {
        transform: scale(40%);
    }
    40% {
        transform: scale(50%);
    }
    60% {
        transform: scale(65%);
    }
	100% {
        transform: scale(45%);
    }
}

.product-content{
    border-radius: 5px;
    background-color: rgb(239, 239, 239);
    margin-left: 25%;
    padding: 30px 20px;
}
.product-content-header h1{
    font-family: "Roboto", sans-serif;
    margin-bottom: 20px;
}
.product-content-body{
    padding-left: 10%;
    color: rgb(80, 80, 80);
}