/******************************************
/* BASE STYLES
/*******************************************/
/* Box Model Hack */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  height: 1;
}

body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.6rem;
  color: #000;
}


/******************************************
/* BASE STYLES
/*******************************************/
/* root */
:root {
  --color1: white;
  --color2: #426696;
  --color3: #658ec6;
  --color4: #a2a2a2;
}

li {
  list-style: none;
  display: flex;
  flex-direction: column;
}

input {
  outline: none;
  border: 0;
  border-radius: 2rem;
  height: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
}

.hidden {
  display: none;
}

/******************************************
/* LAYOUT
/*******************************************/

main {
  min-height: 100vh;
  background: #fad0c4;
  background: linear-gradient(to right top, #fad0c4, #f1a7f1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass {
  background: white;
  min-height: 80vh;
  width: 60%;
  background: linear-gradient(to right bottom,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.3));
  border-radius: 2rem;
  z-index: 2;
  backdrop-filter: blur(2rem);
  display: flex;
}

.circle1,
.circle2 {
  background: white;
  background: linear-gradient(to right bottom,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.3));
  height: 20rem;
  width: 20rem;
  position: absolute;
  border-radius: 50%;
}

.circle1 {
  top: 5%;
  right: 15%;
}

.circle2 {
  bottom: 5%;
  left: 10%;
}

/* Input Menu*/
h1{
  color: var(--color2);
}

.inputMenu {
  flex: 1;
  padding: 2rem;
  background: linear-gradient(to right bottom,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.2));
  border-radius: 2rem 0 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.labelItem {
  color: var(--color2);
  opacity: 0.9;
  padding: 1.5rem 0 0.2rem 1rem;
}

input:disabled, 
button:disabled {
  background: rgb(240, 233, 233);
  color: var(--color4);
}

.pronounsDiv {
  display: flex;
  align-items: center;
  padding: 0 0 0 1rem;
  opacity: 0.9;
}

.pronounsDiv>input {
  margin: 0 0.5rem 0 0;
}

.pronounsDiv>label {
  padding-right: 1.5rem;
}

.cursor {
  cursor: pointer;
}

button {
  background: linear-gradient(to right bottom, #fad0c4, #f1a7f1 55%);
  border-radius: 2rem;
  border: none;
  text-align: center;
  width: 70%;
  color: whitesmoke;
  padding: 1rem;
}

.horizonCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

#regButton {
  margin-top: 2rem;
  width: 10rem;
}

/* Collection Menu*/
.collectionDiv {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 1.5rem;
}

.carouselContainer {
  width: 19rem;
  overflow: hidden;
}

.carouselSlider {
  display: flex;
  width: 100%;
  height: 35rem;
}

.collcetionContainer {
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  text-align: center;
  background: linear-gradient(to right bottom,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.5));
  border-radius: 1rem;
  box-shadow: 0.6rem 0.6rem 2rem rgba(122, 122, 122, 0.2);
}

.zodiacImg {
  background-size: cover;
  background-position: center;
  width: 15rem;
  height: 15rem;
  overflow: hidden;
  margin: 0 auto;
}

.memberName {
  color: var(--color2);
  font-size: x-large;
}

.memberPronouns {
  color: var(--color3);
}

.memberBirthYear {
  color: var(--color2);
}

.memberBirthYear::before {
  content: "Birth Year : ";
  font-weight: 500;
}

.memberSign {
  color: var(--color2);
}

.memberSign::before {
  content: "Sign : ";
  font-weight: 500;
}

.btnDiv{
  display: flex;
  justify-content: center;
  gap: 3rem;
}

#prevButton{
  width: 8rem;
}

#nextButton{
  width: 8rem;
}

/******************************************
/* Media Queries
/*******************************************/
/* for mobile*/
@media screen and (max-width: 440px) {
  .glass{
    display: flex;
    flex-direction: column;
    width:85%;
    margin: 2rem 0;
    gap: 3rem;
  }

  input{
    height: 3rem;
    padding: 0.5rem 1rem;
    font-size: 2rem;
  }

}

/* for tablet */
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .glass{
    width:80%;
  }
}