:root{
    --red:rgb(216, 27, 50);
    --dark-red:#c01836;
    --white:#F1ECE7;
}
@font-face {
    font-family: "monster";
    src: url("../fonts/NaughtyMonster.otf");
}
body { 
    font-family: "monster";
    letter-spacing: 0.1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center ;
    padding: 20px; 
    color: var(--dark-red);
    background-color: var(--white);
}
.container{
    display: flex;
    justify-content: space-between;
    margin: 2vw;
    width: 90%;
    /* flex-direction: column; */
}



h1 {
    font-size: 8vw;
    margin: 10px 0; 
    letter-spacing: 5px;
}
hr{
    width: 50%;
    margin-top: 10px;
    margin-bottom: 50px;
    border: 0;
    height: 5px; /* Set a visible height */
    background-image: linear-gradient(to right, var(--white), var(--red), var(--white));
    border-radius: 5px; 
}
.media-container{
    position: relative;
    width: 40%;
    display: flex;
    justify-content: center;
}

.media-container video,.media-container img{
    width: 70%;
    border-radius: 20px;
    /* border: #555 10px solid; */
    box-shadow: rgba(6, 24, 44, 0.081) 0px 0px 0px 2px, rgba(6, 24, 44, 0.145) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset, rgb(38, 57, 77) 0px 20px 30px -10px;
}

.info-container{
width: 60%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}

p.description {
    font-size: 4vw;
    margin: 15px 0;
    color: var(--red); 
    }

.price { 
    font-size: 5vw;
    margin: 10px 0;
    color: #e67e22; 
    }

.cart-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px; }

.cart-controls button {
    font-size: 1em;
    cursor: pointer; 
    width: 4vw;
    height: 4vw;
    font-size: 2vw;
    font-weight: 900;
    border: #6d0619 2px solid;
}

.cart-quantity {
    font-size: 3vw; 
}
#quantity{
    width: 2em;
    height: 1.2em;
    padding-top: 5px;
    text-align: center;
    border-radius: 3px;
    color: var(--white);
    background-color: var(--dark-red);
}

.styled-form input[type="number"] {
    width: 5em;
    height: 2.5em;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    padding: 0.2em;
    outline: none;
    transition: border-color 0.3s ease;
}

.styled-form input[type="number"]:focus {
    border-color: var(--dark-red); /* Highlight color on focus */
    box-shadow: 0 0 5px rgba(228, 39, 52, 0.5);
}

.styled-form button {
    height: 2.7em;
    background-color: var(--dark-red);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 0 1em;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

@media (max-width: 800px) {
    h1{
        font-size: 12vw;
    }
    hr{
        width: 80%;
        margin-bottom: 20px;
    }
    .container{
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .media-container video,.media-container img{
        width: 100%;
    }
    .media-container{
        width: 80%;
    }
    .info-container{
        margin-top: 20px;
        width: 90%;
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
    }

    
p.description {
    font-size: 10vw;
    line-height: 1.2;
    }

.price { 
    font-size: 10vw;
    margin: 10px 0;
    color: #e67e22; 
    }

.cart-controls button {
    font-size: 1em;
    cursor: pointer; 
    width: 8vw;
    height: 8vw;
    font-size: 4.5vw;
    font-weight: 900;
    color: #6d0619;
    border: #6d0619 2px solid;
}

.cart-quantity {
    font-size: 8vw; 
}
}