@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@800&family=Luckiest+Guy&display=swap');
body{
	background-color: #171b76;
	background-image: url("../img/bk.png");
	font-size: 10px;
    scroll-behavior: smooth;
	color:#fff;
}
.navbar-toggler-icon {
    color: #000;
}
.navbar-toggler{
	 color: #000;
}

a{
	color:#fff;
	text-decoration: none;
}
a:hover{
	color:yellow;
	text-decoration: underline;
}
#logo{

}
h1{
	font-size:6.4em;
	font-family: 'Luckiest Guy', cursive;
}
h2{
	font-size:5.4em;
	font-family: 'Luckiest Guy', cursive;
}
h3{
	font-size:3.4em;
	font-family: 'Luckiest Guy', cursive;
}
p{
	font-size:1.8em;
	font-family: 'Dosis', sans-serif;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
	text-align: center;
	list-style: inside;

}


li{
	font-size:1.4em;
	font-family: 'Press Start 2P', cursive;
	display: inline;
	 float: left;
	

}


.navbar-light .navbar-nav .nav-link {
	color:#000!important;
	text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:hover{
	color:#fff!important;
	text-decoration: none;
}
.pinkbg{
	background-color: #F1BFF7;
	color:#000;
}
	.headerimg{
		max-height: 46px!important;
		height: auto; 
	}
.collections img{

	margin-bottom: 10px;
}
.collections img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
	
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#header{
	background-image: url("../img/header.png");
	background-repeat: repeat-x;
	background-position: top;

	padding-top:80px;
}
#footer{
	background-image: url("../img/footer.png");
	background-repeat: repeat-x;
	background-position: bottom;
	height: 92px;}

@media (min-width: 768px) { 

}


@media (min-width: 992px) { 
a{
	color:#fff;
	text-decoration: none;
}
a:hover{
	color:yellow;
	text-decoration: underline;
}
}


@media (min-width: 1200px) { 
	a{
	color:#fff;
	text-decoration: none;
}
a:hover{
	color:yellow;
	text-decoration: underline;
}
h1{
	font-size:9.4em;
	font-family: 'Luckiest Guy', cursive;
}
	li{
	font-size:1.8em;
	font-family: 'Press Start 2P', cursive;
	display: inline;
	 float: left;
	margin-left:20px;

}
	p{
	font-size:1.8em;
	font-family: 'Press Start 2P', cursive;
}

	#header{
	background-image: url("../img/header.png");
	background-repeat: repeat-x;
	background-position: top;

	padding-top:150px;
}
	.headerimg{
		max-height: 70px!important;
	}

}
@media (min-width: 1400px) {  
h1{
	font-size:9.4em;
	font-family: 'Luckiest Guy', cursive;
}
h2{
	font-size:5.4em;
	font-family: 'Luckiest Guy', cursive;
}
h3{
	font-size:3.4em;
	font-family: 'Luckiest Guy', cursive;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
	#logo{
	max-width: 600px
}

li{
	font-size:1.8em;
	font-family: 'Press Start 2P', cursive;
	display: inline;
	 float: left;
	margin-left:20px;

}

.pinkbg{
	background-color: #F1BFF7;
}
.collections img{

	margin-bottom: 10px;
}
.collections img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
	
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#header{
	
	background-image: url("../img/header.png");
	background-repeat: repeat-x;
	background-position: top;
}
#footer{
	
	background-image: url("../img/footer.png");
	background-repeat: repeat-x;
	background-position: bottom;
	height: 92px;}