body{
    padding: 0;
    margin: 0;
    padding-bottom: 150px;
    position: relative;
}
*{
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
header{
    background: linear-gradient(45deg, #8263CE, #5F17CE);
    padding: 20px 0;
    margin-bottom: 100px;
}
#header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    margin: 0 auto;
}
#header img{
    width: 30px;
    filter: brightness(100);
}
#header ul{
    display: flex;
    list-style: none;
    gap: 20px;
    color: white;
    margin: 0;
    padding: 0;
}
#header ul a{
    text-decoration: none;
    color: white;
    transition: 300ms;
    padding: 10px 0;
}
#header ul a:hover{
    transform: translateY(-2.5px);
    transition: 300ms;
}
.container{
    width: 70%;
    margin: 0 auto 100px;
}
.products{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
.products .prod{
    box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    align-items: flex-start;
    position: relative;
}
.products .prod > *{
    margin: 0;
    padding: 0;
}
.products .prod > img{
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: 10px;
    object-fit: cover;
}
.products .prod > h2{
    margin-top: 20px;
    margin-bottom: 10px;
    color: #5F17CE;
    font-weight: 900;
    font-size: 26px;
}
.products .prod .price{
    background-color: white;
    color: #5F17CE;
    margin-top: 10px;
    margin-bottom: 20px;
    text-decoration:dashed;
    font-size: 18px;
}
.products .prod .price:before{
    content: 'Precio: ';
    color: #5F17CE;
}
.products .prod .price:after{
    content: '€';
}
.products .prod  .buttons{
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: auto;
}
.products .prod .buttons a{
    color: white;
    background: linear-gradient(45deg, #8263CE, #5F17CE);
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    width: 100%;
    text-align: center;
}
.products .prod .buttons a.borrar{
    background: rgb(218, 91, 91);
    color: white
}
.products .prod .buttons a.carrito{
    background: white;
    border: 1px solid rgb(72, 179, 72);
    color: rgb(72, 179, 72);
}

.login h1{
    margin-top: 0px;
}
.login form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 60%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 15px;
    padding: 25px;
    gap: 5px;
    border-radius: 10px;
}
.login form button[type="submit"], .register form button[type="submit"]{
    background-color: #5F17CE;
    width: 100%;
    color: white;
    border-radius: 5px;
    border: 0;
    padding: 10px 20px;
    font-size: 16px;
}
.login form input, .register form input, form textarea{
    font-size: 16px;
    width: 100%;
    background-color: #5F17CE30;
    border: 0;
    border-bottom: solid 1px #5F17CE;
    padding: 10px 20px;
    margin-bottom: 10px;
}
.register form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 60%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 15px;
    padding: 25px;
    gap: 5px;
    border-radius: 10px;
}
.register form .form-group{
    display: flex;
    gap: 20px;
    width: 100%;
}
.register form .form-group > div{
    width: 100%;
    flex: 50%;
}
.register form .form-group input{
    margin-top: 5px;
}
.register h1{
    margin-top: 0;
}
.btnsLogin{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    gap: 10px;
}
.btnsLogin a{
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}
.btnsLogin a:nth-child(1){
    background-color: lightgray;
    color:gray;
}
.btnsLogin a:nth-child(2){
    border: 1px solid #5F17CE;
    color: #5F17CE;
}
.comprarBtn{
    background: linear-gradient(45deg,#8263CE,#5F17CE);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    width: 200px;
    text-align: center;
    text-decoration: none;
    font-size: 21px;
}
.errorCart{
    width: 100%;
    background-color: rgb(255, 214, 214);
    border: 3px solid rgb(187, 77, 77);
    color: rgb(187, 77, 77);
    font-weight: 600;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 21px;
}
.error{
    width: 100%;
    background-color: rgb(255, 214, 214);
    border: 3px solid rgb(187, 77, 77);
    color: rgb(187, 77, 77);
    font-weight: 600;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 21px;
}
.errorForm{
    color: red;
}
.success{
    width: 100%;
    background-color: rgb(214, 255, 235);
    border: 3px solid rgb(77, 187, 123);
    color: rgb(77, 187, 123);
    font-weight: 600;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 21px;
}

.prodsCart{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.prodsCart .prod{
    display: flex;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 15px;
    position: relative;
}
.prodsCart .prod img{
    width: 15%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
}
.prodsCart .prod > div{
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.prodsCart .prod > div *{
    margin: 0;
}
.prodsCart .prod > div > a{
    background-color: white;
    border: 1px solid rgb(187, 77, 77);
    color: rgb(187, 77, 77);
    text-decoration: none;
    padding: 5px;
    margin-top: auto;
    border-radius: 100px;
    display: inline-flex;
    align-self: flex-end;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    object-fit: contain;
    width: 30px;
    height: 30px;
}
.prodsCart .prod > div > .delivery{
    color: rgb(77, 187, 123);
    font-size: 14px;
}   
.prodsCart .prod > div > .price{
    font-size: 16px;
    font-weight: 500;
    background-color: #eee;
    color: gray;
    padding: 5px 10px;
    border-radius: 5px;
}   
.prodsCart .prod > div > span.price:after{
    content: '€';
}
.prodsCart .prod .qty{
    display: flex;
    border: 1px solid lightgray;
}
.prodsCart .prod .qty a{
    text-decoration: none;
    background-color: #eee;
    color: black;
    font-size: 21px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prodsCart .prod .qty span{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
table.pedidos{
    width: 100%;
    border-collapse: collapse;
    border: #ddd 1px solid;
}
table.pedidos th{
    background-color: #5F17CE;
    color: white;
}
table.pedidos tr:nth-child(odd){
    background-color: #eee;
}
table.pedidos td, table.pedidos th{
    padding: 10px 20px;
    text-align: center;
}
table.pedidos td:nth-child(2){
    text-align: left;
}
table.pedidos td:nth-last-child(1) svg{
    color: rgb(187, 77, 77);
    border: 1px solid rgb(187, 77, 77);
    padding: 7.5px;
    border-radius: 50px;
    font-size: 13px;
}