@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");

:root{
  --font-color1: #1ab5f2;
  --font-color2: rgb(49, 134, 187);
  --header-background-color: rgb(25, 40, 69);
  --header-border-color: #97b5ce;
  --info-container-background-color: rgb(48, 131, 182);
  --button-delete-color: #ff6961;
  --warning-color: #ff6961;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
}

main{
  padding: 0 50px;
}

/**********************************
* * Global Styles* *
**********************************/
.btn {
  background-color: #00BFA6;
  padding: 14px 40px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 10px;
  border: 2px dashed #00BFA6;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .4s;
 }
 
 .btn.red{
  background-color: var(--button-delete-color);
  padding: 14px 40px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 10px;
  border: 2px dashed var(--button-delete-color);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .4s;
 }

 .btn span:last-child {
  display: none;
 }
 
 .btn:hover {
  transition: .4s;
  border: 2px dashed #00BFA6;
  background-color: #fff;
  color: #00BFA6;
 }
 
 .btn.red:hover {
  transition: .4s;
  border: 2px dashed var(--button-delete-color);
  background-color: #fff;
  color: var(--button-delete-color);
 }

 .btn:active {
  background-color: #87dbd0;
 }
 
a {
  cursor: pointer;
  color: var(--font-color1);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

form button{
  margin-top: 20px;
  width: 50vw;
  align-self: center;
}


form a{
  margin-top: 20px;
  width: 50vw;
  align-self: center;
  text-align: center;
}

.red{
  color: var(--warning-color);
  font-weight: bold;
}

.margin-top-reduce{
  margin-top: -5px;
}

form button.small, form a.small{
  width: fit-content;
  margin-top: -5px;
}

/**********************************
* * NAVBAR * *
**********************************/

nav {
  font-family: "Pixelify Sans", sans-serif;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--header-background-color);
  border-bottom: 7px solid var(--header-border-color);
  padding: 20px 30px;
  color: white;
  font-size: 20px;
}

nav a {
  color: white;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
  padding: 0;
  margin: 0;
}

.checkout-link{
  position: absolute;
  margin: 0;
  right: 75px;
}

.github-link {
  position: absolute;
  margin: 0;
  right: 15px;
}

/**********************************
* * Navbar Icons* *
**********************************/
#github-icon{
  width: 50px;
  height: 50px;
}

#checkout-icon{
  width: 50px;
  height: 50px;
}

/**********************************
* * HOME PAGE * *
**********************************/
.app-title{
  font-family: "Pixelify Sans", sans-serif;
  color: var(--font-color2);
  font-size: 2rem;
  margin-bottom: 15px;
}

.home-info-container {
  padding: 5px 20px;
  background-color: var(--info-container-background-color);
  border-radius: 10px;
  color: white;
}

.status-container {
  display: flex;
  justify-content: start;
  margin-bottom: 10px;
}

.status-container .status-info h2 {
  text-align: center;
  font-size: 1.3rem;
  border-radius: 5px;
  color: var(--font-color1);
  border: 2px solid var(--font-color1);
}
.status-container .status-info dl {
  margin-top: -5px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
.status-container .status-info dl dt {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  text-align: start;
  margin-top: 5px;
  margin-bottom: 5px;
}
.status-container .status-info dl dd {
  margin: 0;
}

.flex-display{
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#valentines-image{
  border-radius: 10px;
  border-bottom: none;
  width: 30vw;
  height: auto;
  object-fit: cover;
  object-position: center;
}


/**********************************
* * Items Page * *
**********************************/
.header-container{
  display: flex;
  align-items: center;
  font-family: "Pixelify Sans", sans-serif;
  gap: 10px;
  margin-top: 10px;
  color: var(--font-color2);
}

.add-icon{
  width: 40px;
  height: 40px;
}

.item-list-container{
  display: grid;
  grid-template: 1fr/repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}

.item-container{
  box-shadow: 0px 1px 5px rgb(153, 176, 206);
  border-radius: 10px;
}

.info-container{
  padding: 10px 10px 20px;
}

.item-image{
  border-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: none;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

form{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 20px 0px;
}

.form-group{
  display: flex;
  flex-direction: column;
  width: 80vw;
  margin-top:10px;
  gap: 6px;
}


/**********************************
* * Item Detail Page * *
**********************************/

.item-detail-container{
  display: flex;
  justify-content: space-around;
  align-items: start;
  margin-top: 30px;
  gap: 20px;
}

.item-detail-container .info-container{
  width: 80%;
}

.item-img-container{
  width: 30vw;
  height: auto;
}

.item-image.detail{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

/**********************************
* * Categories List * *
**********************************/
.category-list{
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-left: 1rem;
  list-style-type: none;
}

.category-list li:nth-child(1){
  margin: 8px 0;
  padding-left: 2rem;;
  background-image: url("/images/taco-icon.png");
  background-position: 0 0;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
}

.category-list li:nth-child(2n+3){
  margin: 8px 0;
  padding-left: 2rem;;
  background-image: url("/images/taco-icon.png");
  background-position: 0 0;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
}

.category-list li:nth-child(2n){
  margin: 8px 0;
  padding-left: 2rem;;
  background-image: url("/images/flower-icon.png");
  background-position: 0 0;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
}

/**********************************
* * Categories Details * *
**********************************/
.category-detail-container{

}

hr{
  margin: 20px 0;
  border: 1px solid var(--font-color2);
}

.edit-icon, 
.delete-icon{
  width: 40px;
  height: 40px;
}

/**********************************
* * Categories Delete * *
**********************************/

form.flex-two-buttons{
  display: flex;
  flex-direction: row;
}

/**********************************
* * Checkout Page * *
**********************************/

.rick{

  margin-top: 10px;
}

.checkout-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}