@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
  /* outline: 1px dotted red; */
  font-family: "Poppins", sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  background: radial-gradient(circle, #d9dfb7, #8a994a);
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

nav {
	position: absolute;
	top: 0;
	width: 100%;
	padding: 2vh 6vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
  z-index: 10;
}

nav a h1 {
	font-size: 3vh;
	font-family: "Nunito", serif;
	font-weight: 800;
	color: #fff;
}

nav ul {
	display: flex;
	column-gap: 2vh;
	align-items: center;
}

nav ul li {
	font-size: 2.5vh;
	cursor: pointer;
}

nav ul li i {
	position: relative;
	padding: 1vh;
	color: #fff;
	border-radius: 50%;
	background-color: #00000060;
}

nav ul li:last-child i:after {
	content: "0";
	position: absolute;
	top: -1vh;
	right: -1vh;
  padding: 0.5vh 1vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5vh;
	border-radius: 50%;
	background-color: red;
}

nav ol {
	display: flex;
	column-gap: 2vh;
	align-items: center;
}

nav ol li {
	font-size: 2.2vh;
  padding: 1vh 2vh;
	border-radius: 25px;
  color: #fff;
	background-color: #00000060;
	cursor: pointer;
}

nav ol li:first-child {
  color: #000;
  background-color: #fff;
}

h1 {
  font-size: 50vh;
  color: #fff;
  text-transform: capitalize;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  object-fit: cover;
}

.text {
	position: absolute;
  left: 6vh;
	bottom: 0;
	width: 25%;
	display: flex;
	flex-direction: column;
	row-gap: 2vh;
	padding: 2vh 0;
	font-family: "Montserrat", serif;
}

.text p:first-child {
	font-size: 2.5vh;
	font-weight: 500;
	color: #fff;
}

.text p {
	font-size: 2.2vh;
	font-weight: 500;
  color: #fff;
}

.text p span {
  margin-left: 1vh;
  font-size: 2.5vh;
  font-family: "Nunito", serif;
  font-weight: 800;
}

.text h2 {
  font-weight: 500;
	line-height: 1;
	text-transform: capitalize;
  color: #fff;
}

.text a {
  cursor: default;
}

.text a button {
	padding: 2vh 2vh;
	font-size: 2vh;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-weight: 400;
	color: #000;
	background-color: #fff;
	border-radius: 5vh;
  border: none;
	cursor: pointer;
}

#price {
  position: absolute;
  bottom: 1vh;
}

#price h1 {
  font-family: "Nunito", serif;
  font-size: 5vh;
}

#size {
  position: absolute;
  top: 20%;
  right: 6vh;
  display: flex;
  flex-direction: column;
  row-gap: 1vh;
}

#size p {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vh;
  font-weight: 500;
  color: #fff;
  border-radius: 50%;
  background-color: #00000060;
  cursor: pointer;
}

#size p:nth-child(2){
  font-weight: 800;
  color: #000;
  background-color: #fff;
}

#cart {
  position: absolute;
  right: 6vh;
  bottom: 2vh;
  width: 15vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 25px;
  background-color: #00000060;
}

#cart i {
  padding: 1vh;
  border-radius: 50%;
  background-color: #00000060;
  cursor: pointer;
}