* {
    /* using this to make borders of each element more clear for manipulating later and properly formatting/designing web page */
    /* border: 1px solid red; */
    font-family: 'Ubuntu', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
  /* background-image: url("https://i.pinimg.com/originals/a0/b1/e3/a0b1e3bb3bbcae73121638ece04af038.png"); */
  /* background-color: black;  */
  background: rgb(70,16,138);
  background: linear-gradient(121deg, rgba(70,16,138,1) 0%, rgba(32,6,87,1) 93%);
}

header {
  color: white;
  text-align: center;
  /* text-indent: 1rem;  */
  /* background-color:#a9019b; */
  background: rgb(169,1,155);
  background: radial-gradient(circle, rgba(169,1,155,1) 0%, rgba(70,16,138,1) 100%);
  padding: 10px 0px 10px 0px;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px
}

form input, label, textarea{
  box-sizing: border-box;
  display: block;
  margin: 5px 0;
  width: 100%;
}

form button[type="submit"],
button {
  background: white;
  border: none;
  border-radius: 5px;
  color: black;
  cursor: pointer;
  margin: 10px 0;
  padding: 10px;
}

form button[type="submit"]:hover,
button:hover {
  background: #108a31;
}

form button[type="reset"],
button {
  background: black;
  border: none;
  border-radius: 5px;
  color: #f7f7f7;
  cursor: pointer;
  margin: 10px 0;
  padding: 10px;
}

form button[type="reset"]:hover,
button:hover {
  background: #8a1016;
}

form button[type="In Stock"],
button {
  background: #73956f;
  border: none;
  border-radius: 5px;
  color: #f7f7f7;
  cursor: pointer;
  margin: 10px 0;
  padding: 10px; 
}

form button[type="Remove NFT"],
button {
  background:black;
  border: none;
  border-radius: 5px;
  color: #f7f7f7;
  cursor: pointer;
  margin: 10px 0;
  padding: 10px;
}

.nft-selector {
  /* display: grid;
  grid-template-rows: repeat(2 , 1fr); */
  /* background-color:#234885; */
  background: rgb(70,16,138);
  background: linear-gradient(6deg, rgba(70,16,138,1) 27%, rgba(35,72,133,1) 93%);
  color: white;
  border-radius: 5px;
  padding-left: 2rem;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.inputs {
  width: 95%;
}

.main-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-right: 20px; 
}

.image1 {
  width: 100%;
  height: auto;
  margin-right: 5px;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 5px; 
} 

.nft-collection {
  color: white;
  /* background-color:#008080; */
  background: rgb(70,16,138);
  background: linear-gradient(336deg, rgba(70,16,138,1) 27%, rgba(0,128,128,1) 72%);
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0 0 0 2rem; 
  padding-top: 5px;
}
/* grid box set up for nft collection sections */
.nft-collection ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding-left: 0;
  padding-right: 15px; 
  margin-right: 20px;
}

/* border box arond nft collection list items */
.nft-collection ul li {
  border: 5px solid white;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  margin-bottom: 20px;
}

/* add media query that changes grid-columns to 2 or 1 at certain width */
@media(max-width: 620px) {
  .nft-collection ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 440px) {
  .nft-collection ul {
    grid-template-columns: 1fr;
  }
  .image1 {
    display: none;
  }
  body {
    grid-template-columns: 1fr;
  }
  .main-page {
    grid-template-columns: 1fr;
    padding-right: 1px;
  }
}