@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
@import url('https://fonts.googleapis.com/css?family=Lobster');




body {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}
i{
    cursor: pointer;
}
.navbar-brand {
    font-family: 'Lobster', cursive;
    font-size: 2rem;
}
.cart{
    position:relative;
    background-color: #fff;
    color: #000;
    font-size: 30px;
    padding: 3px, 2px;
    border-radius: 4px;
    width:35px;
    float:right;
}
.cartAmount {
    position: absolute;
    top:-10px;
    right:-10px;
    font-size: 16px;
    background-color: rgb(223, 58, 58);
    color:white;
    padding: 3px;
    border-radius:4px;
}
.shop {
    display:grid;
    grid-template-columns: repeat(4,224px);
    gap:30px;
    justify-content: center;
}


@media (max-width: 1000px) {
    .shop { grid-template-columns: repeat(3,224px);
    gap: 15px;
}
}

@media (max-width: 720px) {
    .shop { grid-template-columns: repeat(2,224px);
    gap: 15px;
}
}

@media (max-width: 500px) {
    .shop { grid-template-columns: repeat(1,224px);
    gap: 15px;
}
}

.item {
    margin-top: 20px;
    border:  solid rgb(255,208,249);
    border-style:ridge;
    border-radius: 19px;
    background: rgb(238,174,202);
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(161,148,233,1) 100%);
    box-shadow: 10px 13px 14px -1px rgba(225,189,255,0.85);
-webkit-box-shadow: 10px 13px 14px -1px rgba(225,189,255,0.85);
-moz-box-shadow: 10px 13px 14px -1px rgba(225,189,255,0.85);
}
.item img {
    -webkit-border-top-left-radius: 19px;
-webkit-border-top-right-radius: 19px;
-moz-border-radius-topleft: 19px;
-moz-border-radius-topright: 19px;
border-top-left-radius: 19px;
border-top-right-radius: 19px;
}


.details {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap:10px;
}
.price-quantity {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.buttons{
    display:flex;
    flex-direction: row;
    gap:7px;

}
.bi-dash-lg {
    color:red;
}
.bi-plus-lg {
    color:green;
}

.text-center{
    text-align: center;
    margin-bottom:20px;
}
.HomeBtn,
.checkout,
.removeAll{
    background-color: #000;
    color:white;
    border: none;
    padding:6px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
}
.checkout{
background-color: rgb(0, 140, 21);
}
.removeAll{
background-color: rgb(188, 10, 10);
}
.bi-x-lg{
    color: rgb(188, 10, 10);
    font-weight: bold;
}

/**
Shopping Cart Here!
**/
.shopping-cart{
display: grid;
grid-template-columns: repeat(1,420px);
justify-content: center;
gap:10px;

}

.cart-item{
    border: 2px solid rgb(21, 21, 21);
    border-radius: 5px;
    display: flex;
    margin-top:5px;
}

.title-price-x{
width:250px;
display: flex;
align-items: center;
justify-content: space-between;

}

.title-price{
    display: flex;
    align-items: center;
    gap:7px;
}
.title-price p{
    margin-bottom:0;
}
.cart-item-price{
background-color: rgb(22, 22, 22);
color:white;
border-radius: 4px;
padding:3px 4px;
}
.nodisplay {
    display:none;
}

#intro {
    background-image:url(/images/maisema.jpg);
    height: 92.5vh;
  }


  nav {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
  }

.taustakuva {
background: rgb(255,206,243);
background: radial-gradient(circle, rgba(255,206,243,1) 0%, rgba(68,0,63,1) 62%, rgba(24,0,21,1) 86%);
}

.taustakori {
background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
background: rgb(68,0,63);
background: linear-gradient(90deg, rgba(68,0,63,1) 20%, rgba(255,206,243,1) 38%, rgba(255,206,243,0) 48%, rgba(255,206,243,1) 58%, rgba(68,0,63,1) 80%);
}

.hover {
    --c:rgb(64,0,116); /* the color */
    color: #0000;
    background: 
      linear-gradient(90deg,rgb(64,0,116) 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
      linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
    -webkit-background-clip: text,padding-box;
            background-clip: text,padding-box;
    transition: 0.5s;
  }

  .hover:hover {
    --_p: 100%;
    opacity: 0.5;
    border-radius: 50%;
  }

  .overlayt {
    position: absolute;
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1; 
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
  }
  
  .animation:hover .overlayt {
    opacity: 1;
  }
  .center {
    text-align: center;
  }