@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
    --white: #fbfbfb;
    --light: #68b7af;
    --medium: #1f5953;
    --dark: #231f20;
    --pink: #ca9475;
}

html,
body {


	font-family: 'Roboto', sans-serif;
	color: var(--white);
	scroll-behavior: smooth;
	background-size: 75%;
	background-position:center center;
	background-attachment:scroll;
	background-repeat:repeat;
	background-image: url(../data/layout/bg.webp);
	background-color: var(--dark);
}

h1, h2, h3, h4, h5 {
    font-size: 1rem;
    font-family: "AhaWow";
    font-family: 'Sigmar One', cursive;
    text-transform: uppercase;
}
h1 {
    font-size: 2rem;
}




button, input, textarea, select {
    border-radius: 0;
    font-family: "AhaWow";
    font-family: 'Sigmar One', cursive;
    transition: all 0.25s ease;

  text-align: left;
}
.sss-button-add,
#form-submit-purchase {
  background: #f9b030;
  color: var(--dark);
  border: none;
  cursor: pointer;
}

.sss-cart-item {
  border: 2px solid #f9b030;
  background: var(--dark);
}

#sss-search-bar {
  background-image: url(../data/layout/icon-search.png);
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
}
#sss-success-message {
  color: var(--dark);
}

.sss-images-prev, .sss-images-next {
  border: none;
  color: var(--medium);
}

#sss-warning,
#sss-warning:visited,
#sss-warning:active,
#sss-warning:hover,
#sss-warning:focus {
  text-decoration: none;
  color: var(--white)
}
#sss-warning {
  background-color: var(--dark);
  border-radius: 2rem;
  box-shadow: 0 0 0.5rem rgb(0, 0, 1);
  
}
#sss-warning[data-status="active"] {
  animation: sss-warning 5s ease 1;
}
@keyframes sss-warning {
  0%  {width: 3rem;}
  10%  {width: 13rem;}
  90%  {width: 13rem;}
  100%  {width: 3rem;}
}
.sss-warning-cart {
  background-color: var(--white);
  box-shadow: 0 0 0.5rem rgb(0, 0, 1);
}

#cart {
  padding: 2rem 1rem 0 1rem;
  margin: 0;
} 


.sss-information {
  background: rgba(35,31,32, 0.75);
  backdrop-filter: blur(8px);
}

footer {
	background: var(--dark);
}


footer p {
	margin: 0 0 0.5rem 0;
	font-size: 0.9rem;
	line-height: 100%;
}
footer address {
	font-style: normal;
}

a,
a:visited {
	color: var(--medium);
}

a:hover,
a:active,
a:focus {
	color: var(--medium);
	text-decoration: none;
}

.sss-time {
  display: none;
}