/* Common */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Press+Start+2P&display=swap');

.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #F7EC13;
}

hr {
	clear: both;
	border: 1px solid #000000;
}

footer {
	clear: both;
	width: 100%;
	height: 7em;
	background-color: black;
	color: white;
	position: relative;
	bottom: 0;
}

.footerText {
	padding-top: 1em;
	text-align: center;
	display: block;
	margin: 0 auto;
	font-family: "Oswald";
	font-weight: bolder;
	letter-spacing: 2px;
}


/* Homepage */

.paragraph {
	color: white;
	background-color: black;
	width: 100%;
	padding: 20px;
	margin: 20px 0;
	font-weight: 700;
	font-family: "Press Start 2p";
	font-size: 32px;
	background-image: url("../images/formbackground.png");
}

.mainHome {
	display: inline-block;
	float: left;
	width: 72%;
	margin: 5px 0 5px 2%;
	padding-top: 20px;
}

aside {
	float: right;
	width: 22%;
	display: inline-block;
	margin: 5px 2% 5px 0;
}

.aboutUsImageLink {
	margin-top: 50px;
	width: 100%;
	height: auto;
	float: right;
}

.shopNowImageLink {
	width: 100%;
	height: auto;
	float: right;
	padding-top: 20px;
}

.rowHome {
	clear: both;
	display: flex;
	background-image: url("../images/formbackground.png");
	padding-top: 20px;
}

.col3home {
	width: 33%;
}

.colImage {
	display: block;
	margin: 0 auto;
	user-select: none;
}

.colBtn {
	display: block;
	margin: 30px auto;
	width: 400px;
	height: 80px;
	background-color: #ef4923;
	color: white;
	font-size: 2em;
	font-family: "Press Start 2p";
	border-radius: 10px;
	box-shadow: 0 10px 10px 0 black;
}


/* About Us page */

.mainAbout {
	margin: 50px 2% 5px 2%;
}

.rowAbout {
	clear: both;
	display: flex;
	height: 100%;
}

.col3about {
	width: 20%;
	background-color: #b22425;
	margin: 5px;
	font-family: "Press start 2p";
	font-size: 1.3em;
	color: white;
	background-image: url("../images/formbackground.png")
}

.col3about2 {
	width: 56.5%;
	background-color: #b22425;
	margin: 5px;
	margin: 0 auto;
	display: block;
	background-image: url("../images/formbackground.png")
}

#item1 {
    grid-area: one;
	margin: 5px;
}

#item2 {
    grid-area: two;
	margin: 5px;
}

#item3 {
    grid-area: three;
	margin: 5px;
}

#item4 {
    grid-area: four;
	margin: 5px;
}

#item5 {
    grid-area: five;
	margin: 5px;
}

#item6 {
    grid-area: six;
	margin: 5px;
}

#item7 {
    grid-area: seven;
	margin: 5px;
}

#item8 {
    grid-area: eight;
	margin: 5px;
}

.gridAbout {
	margin: 0 auto;
	width: 57%;
    display: grid;
	grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 
    "one   one   one  two two two"
    "three three four four five five"
    "six six seven seven eight eight";
}

.aboutGridImages {
	width: 100%;
	height: 100%;
}


/* Shop */

.shopTopFill {
	margin: 0 0 50px 0;
	border: 0;
	box-shadow: 0 0 30px 30px black;
}

.mainShop {
	width: 70%;
	margin: 0 auto;
}

.rowShop {
	clear: both;
	display: flex;
	margin-bottom: 30px;
}

.cardDiv {
	width: 48%;
	margin: 0 auto;
	display: flex;
	background-color: #333333;
	background-image: url("../images/formbackground.png");
}

.col2shopImg {
	width: 50%;
	height: auto;
	margin: 0 auto;
	padding: 15px;
}

.col2shopText {
	width: 45%;
	height: auto;
	margin: 0 auto;
	padding: 15px;
	padding-right: 30px;
	padding-top: 40px;
	text-align: right;
}

.col2shopText2 {
	width: 45%;
	height: auto;
	margin: 0 auto;
	padding: 15px;
	padding-left: 30px;
	padding-top: 40px;
	text-align: left;
}

.shopImg {
	width: 100%;
	height: 100%;
}

.slide {
	background-image: url("../images/gallery-background.png");
	max-width: 100%;
}

.langing-image {
	margin-top: -15px;
	width: 100%;
}

a {
	text-decoration: none;
	color: white;
}
a:hover {
	color: #ed1d7e;
	text-decoration: none;
}

.colBtn:hover {
	background-color: black;
	color: #ed1d7e;
}

.navigation-logo {
	height: 80px;
}


.add-to-cart-button {
	position: fixed;
	bottom: 20px;
	right: 1.5em;
}

.cardDiv h4 {
	color: white;
	font-family: "Press start 2p";
}

.cardDiv p {
	color: white;
	font-family: "Press start 2p";
}

.cardDiv h5 {
	color: white;
	font-family: "Press start 2p";
}

.cardDiv .add-to-cart-button {
	margin-top: 1em;
	color: black;
	font-family: "Oswald";
	font-size: 1.5em;
}

.cardDiv .add-to-cart-button2 {
	margin-top: 1em;
	color: black;
	font-family: "Oswald";
	font-size: 1.5em;
}

.cart-image {
	height: 1.5em;
}

.col3about p {
	padding: 20px;
}

.col3about2 h1 {
	margin-top: 40px;
	text-align: center;
	font-family: "Press start 2p";
	color: white;
}

.col3about2 p {
	text-align: center;
	margin: 0 50px;
	font-family: "Press start 2p";
	font-size: 1.3em;
	color: white;
}

.mainContact {
	margin: 5px 0 8em 0;
	padding-top: 20px;
}

.contact-us-main {
	background-color: #b22425;
	background-image: url("../images/formbackground.png");
	width: 70%;
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	padding: 50px;
	justify-content: center;
	text-align: center;
}

.contact-us-h1 {
	font-family: "Press start 2p";
	color: white;
}


.contact-us-paragrtaph {
	font-family: "Press start 2p";
	color: white;
}

.contact-us-label {
	font-family: "Press start 2p";
	color: white;
}

.contact-us-fields {
	width: 220px;
	text-align: center;
}

.contact-us-submit {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	width: 250px;
	height: 60px;
	background-color: #ef4923;
	color: white;
	font-size: 1.3em;
	font-family: "Press Start 2p";
	border-radius: 10px;
	box-shadow: 0 10px 10px 0 black;
}

.contact-us-submit:hover {
	background-color: black;
	color: #ed1d7e;
}


.contact-us-textarea {
	text-align: center;
}

.upcycling-main {
	background-color: #b22425;
	background-image: url("../images/formbackground.png");
	width: 70%;
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	padding: 50px;
	justify-content: center;
	text-align: center;
}

.add-to-cart-button2 {
	position: fixed;
	bottom: 20px;
}

.mainLookbook {
	width: 90%;
	padding-top: 20px;
	justify-content: center;
	margin: 20px auto 0 auto;
}

.lookbook-main {
	display: flex;
	justify-content: center;
	width: 100%;
}

.lookbook-left {
	width: 21%;
}

.lookbook-right {
	width: 21%;
}

.lookbook-middle {
	width: 56%;
}

.lookbook-middle-row {
	display: flex;
	justify-content: center;
}

.lookbook-miidle-col4 {
	width: 25%;
}

.lookbook-images {
	width: 100%;
	padding: 2%;
	height: 100%;
}



.lookbook-aside-image {
	height: 50%;
}