@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
}

body{
    background: linear-gradient(90deg, rgb(62, 0, 133) 20%,rgb(56, 0, 61));
}

header .header-container{
    background-color: rgba(0, 0, 0, 0.726);
    height: 8vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header .title-container{
    display: inline-flex;
    flex-direction: column;
    margin-left: 6%;
    margin-top: 0.5%;
    z-index: 255;
}

header .header-container h1{
    float: left;
    color: wheat;
    text-decoration: none;
    text-align: center;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
}

header .header-container h2{
    float: left;
    color: rgb(111, 103, 180);
    text-decoration: none;
    text-align: center;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 2%;
    font-size: 17px;
}
header nav {
    height: 100%;
    float: right;
    margin-right: 5%;
    
}
header .header-container nav ul{
    display: flex;
    flex-direction: row;
    list-style: none;;
    height: 100%;
    float: right;
    margin-right: 2%;
}
header .header-container nav ul li{
    text-align: center;
    padding: 25px 60px 25px 60px;
}
header .header-container nav ul li a{
    color: wheat;
    text-decoration: none;
    text-align: center;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
} 
main{
  min-height:100%;
}
main .title-container {
  padding-top:2%;
  padding-bottom:2%;
    margin-bottom: 0;
    font-family: "Cal Sans", sans-serif;
    background-color: rgba(100,100,100,0.4);
}

main .container {
    margin-bottom: 0;
    font-family: "Cal Sans", sans-serif;
}

main .profile-container{
  background: linear-gradient(130deg,rgba(255, 255, 255, 0.199),rgba(10, 10, 10, 0.301)40%);
  border-radius: 1vh;
  padding: 2%;
  margin: 5%;
  color: black;
  font-family: "Cal Sans", sans-serif;
}

main .profile-container h1{
  color:wheat;
  font-size: 45px;
}

main .profile-container .logout-button{
  border-radius: 10vh;
  background-color: red;
  padding: 1%;
  color: white;
  font-size:30px;
  text-decoration:none;
}

main .profile-container h2{
  color:aliceblue;
  margin-bottom:2%;
  font-size: 35px;
}

main .profile-container h2 a{
  color:#4168ff;
  text-decoration:none;
}

main .description-container h3{
  color: wheat;
  text-decoration:underline;
  font-size:40px;
}

main .title-container h1{
    color: rgb(179, 179, 179);
    font-family: "Cal Sans", sans-serif;
    font-size: 60px;
    text-align: center;
    text-shadow:
      0 0 4px #fff,
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px rgb(105, 0, 190),
      0 0 40px rgb(105, 0, 190),
      0 0 45px rgb(105, 0, 190),
      0 0 50 rgb(105, 0, 190),
      0 0 75 rgb(105, 0, 190);
      
    animation-iteration-count: infinite;
    animation-name: neon-brightness-change;
    animation-duration: 1.5s;
    animation-direction: alternate;

}

main .title-container h2{
    color: blueviolet;
    font-size: 45px;
    text-align: center;
}

main .description-container {
    margin: 3%;
    font-family: "Cal Sans", sans-serif;
    color: aliceblue;
    transition: 0.8s;
    background: linear-gradient(130deg,rgba(255, 255, 255, 0.199),rgba(10, 10, 10, 0.301)40%);
    padding: 2%;
    display: inline-flex;
    flex-direction: column;
    border-radius: 1vh;
    font-size: 30px;;
}

main .description-container p{
  margin-top:2%;
  color:rgb(202, 220, 255);
}

main .description-container:hover {
    margin: 4%;
    font-size: 35px;
    color: aliceblue;
    z-index: 2;
}

main .container .right{
    float:inline-end;
}


footer{
  bottom:0;
   background: rgb(39, 39, 39);
   padding: 2%;
}
footer #contact p{
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
}
footer #copyright p{
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
}
footer ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
    font-size: 25px;
}
footer ul li {
    margin: 8%;
}
footer ul li a i{
    color: #fff;
}

.shop-cointainer{
  display:flex;
  flex-direction: row;
  margin:3%;
  justify-content: space-between;
}

.shop-item{
  padding: 2%;
  background: white;
  box-shadow: 4px 4px black;
  border-radius: 2vh;
  width: 20%;
  display:flex;
  flex-direction: column;
  justify-content:center;
}

.shop-item img{
  width: 100%;
  margin-bottom: 2%;
}

.shop-item p{
  font-family: "Cal Sans", sans-serif;
  margin-bottom: 1%;
}

.shop-item h1{
  font-family: "Cal Sans", sans-serif;
  margin-bottom: 1%;
}

.shop-item a{
  font-family: "Cal Sans", sans-serif;
  text-decoration: none;
  color: white;
  padding: 1%;
  padding-right:2%;
  padding-left: 2%;
  background: blue;
  border-radius:2vh;
}

.preview-item{
  max-width: 50%;
  min-width: 25%;
  position:fixed;
  display:flex;
  flex-direction:column;
  background:wheat;
  box-shadow: 3px 3px black;
  padding:2%;
  border-radius:2vh;
  justify-self:anchor-center;
}

.preview-item i{
  font-size: 20px;
  margin: 2%
}

.preview-item img{
  width: 100%
  border-radius: 2vh;
  margin: 2%
}

.preview-item h1{
  font-family: "Cal Sans", sans-serif;
  margin-bottom: 1%;
}

.preview-item p{
  font-family: "Cal Sans", sans-serif;
  margin-bottom: 1%;
}

.preview-item .buy-button{
  font-family: "Cal Sans", sans-serif;
  text-decoration: none;
  color: white;
  padding: 1%;
  padding-right:2%;
  padding-left: 2%;
  background: blue;
  border-radius:2vh;
}

.preview-item .close-preview-button{
  float:right;
  font-size:30px;
  color:black;
}

.success-message{
  position: fixed;
  z-index: 99;
  background: #04ff00;
  width: 80vw;
  text-align: center;
  justify-self: anchor-center;
  border-radius: 10vh;
  top: 1vh;
  box-shadow: 0px 0px 20px 10px lime;
  color:white;
  animation-iteration-count: 0;
  animation-name: fade-away;
    animation-duration: 2.5s;
    animation-delay: 3s;
}

.error-message{
  position: fixed;
  z-index: 99;
  background: red;
  width: 80vw;
  text-align: center;
  justify-self: anchor-center;
  border-radius: 10vh;
  top: 1vh;
  box-shadow: 0px 0px 20px 10px red;
  color:white;
 	animation-iteration-count: 1;
    animation-name: fade-away;
    animation-duration: 2.5s;
    animation-delay: 3s;
}

@keyframes fade-away{
  from{
    opacity: 0;
  }to{
    opacity: 1;
    z-index:-1;
  }
}
@keyframes neon-brightness-change {
    from{
        text-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px rgb(105, 0, 190),
      0 0 40px rgb(105, 0, 190),
      0 0 45px rgb(105, 0, 190),
      0 0 50px rgb(105, 0, 190),
      0 0 75px rgb(105, 0, 190);
    }
    100%{
        text-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px rgb(174, 130, 209),
      0 0 40px rgb(174, 130, 209),
      0 0 45px rgb(174, 130, 209),
      0 0 50px rgb(174, 130, 209),
      0 0 75px rgb(174, 130, 209);
    }
}