/* fonts  */
/* Dancing Script */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

/* Edu VIC WA NT Beginner */
@import url('https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner&display=swap');

/* Josefin Sans */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

*, ::before, ::after { box-sizing: border-box; }
body{
  text-align:center;
  line-height:1.5em;
  font-family: Edu VIC WA NT Beginner;
  background-color: #f1f1f1;
}
hr {
  border:none;
  background:#E0E4CC;
  height:1px;
  width:60%;
  display:block;
  margin-left:0;
}
.container {
  /* width: 800px;  */
  margin: 1px auto; 
  background-color:#f1f1f1; 
  padding:30px;
  border-radius:5px;
}
.logo{
    font-family: Dancing Script;
    display: inline-block;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
}
.productcont {
  display: flex;
  width: 75%;
  margin-right: auto;
  margin-left: auto;
  flex-direction: row;
  margin-top: 0;
  padding-top: 0;
}
.product {
  border:1px solid #E0E4CC; 
  border-radius:5px;
  margin-right: 10px;
  font-family: Josefin Sans;
}
@media screen and (max-width: 700px){
  .productcont {display: block;}  
  .product{margin: 0; margin-bottom: 20px;}
}
.cart-container {
  border:1px solid #E0E4CC;
  border-radius:5px;
  margin-top:1em;
  padding:1em;
}
button, input[type="submit"] { 
    border:1px solid rgb(255, 0, 43); 
    color:#ffffff; 
    background-color: rgb(255, 0, 43); 
    padding:0.6em 1em;
    font-family: Josefin Sans ;
    font-size:1em; 
    line-height:1; 
    border-radius: 1.2em;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
button:hover, button:focus, button:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
    background: #f1f1f1;
    border-color:#f1f1f1;
    color:#000;
    cursor: pointer;
}
table {
  margin-bottom:1em;
  border-collapse:collapse;
}
table td, table th {
  text-align:left;
  padding:0.25em 1em;
  border-bottom:1px solid #E0E4CC;
}
#carttotals {
  margin-right:0;
  margin-left:auto;
}
.cart-buttons {
  width:auto;
  margin-right:0;
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  padding:1em 0;
}
#emptycart {
  margin-right:1em;
}
table td:nth-last-child(1) {
  text-align:right;
}
.message {
  border-width: 1px 0px;
  border-style:solid;
  border-color:#A7DBD8;
  color:#679996;
  padding:0.5em 0;
  margin:1em 0;
}
/* nav */
.nav{
    padding: 50px;
    margin-top: -5em;
}
/* social icons  */
.fa {
    padding: 10px;
    font-size: 1.3em !important;
    width: max-content;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius:50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
background: none;
color: black;
}

.fa-twitter {
background: none;
color: black;
}

.fa-linkedin {
background: none;
color: black;
}

.fa-youtube {
background: none;
color: black;
}

.fa-instagram {
background: none;
color: black;
}

.fa-pinterest {
background: none;
color: black;
}
/* .fa:hover, :active{background-color:rgb(255, 0, 43); color: whitesmoke;} */
.nav span{
    display: none;
    cursor: pointer;
}
@media screen and (max-width: 770px) {
    .nav a{display: none;}
    .nav .logo{
        display: inline-block;
        margin-top: -0.5vh;
    }
    .nav span{
        display: inline;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}
/* all images  */
#p1{
    background-image: url('/media/img1.PNG');
    background-size: cover;
    background-position: center;
    width: fit-content;
    height: fit-content;
    background-repeat: no-repeat;
    border: 1px solid rgb(99, 99, 99);
    background-color:cadetblue;
}
#p1 .productdes{visibility: collapse; color: black; padding: 15px;}

#p1:hover .productdes{
    visibility: visible; 
    transition: 1s;
    opacity: 1;
  background-color: #a7dbd8a4;
}

@media screen and (max-width: 400px) {
  .container{margin: 10px; padding: 0;}
  .container .logo{margin-top: 1em;}
  .productdes{font-size: 15px;}
}
.res-alert{display: none;}
@media screen and (max-width: 550px){
  .productcont{width: 100%; margin: 0; padding: 0;}
  .res-alert{display: block;}
}