main.css

body{
  height:fit-content;
}

.pagebg{
  position:relative;
  background-image: linear-gradient(to left, rgb(0, 0, 0) , rgba(61, 35, 35, 0.884));
  width: 100%;
  height:65%;
}
.nav-btn{
  background-color: rgb(255, 236, 70);
  position: fixed;
  top:0;
  left: 0;
  color: black;
  z-index: 100;
  border-radius: 5px;
}
button{
  background-color: black;
  border-radius: 5px;
  color: rgb(255, 255, 255);
  font-size: 20px;
  padding: 10px;
  margin: 7px;
  cursor: pointer;
}
button :active {
  transform: scale(0.5);
}

.aligntextright{
  text-align: right;
}
.topbar{
  border-width: 0px 0px 5px 0px;
  border-style:double;
  border-color: black;
}
.cardborder:hover{
  background-image: linear-gradient(to right, )rgba(163, 163, 49, 0.514) ,rgba(201, 201, 201, 0.884), rgba(255, 255, 255, 0);
  animation-name:shadow;
  animation-duration:1.1s;
  animation-timing-function :ease-in;
  animation-iteration-count:1; 
}
@keyframes shadow{
  0%{
    border-width: 0px 0px 0px 0px;
    border-style:groove;
    border-color: black;
    border-width:  0px 0px 0px 0px;
    box-shadow:-10px 20px 10px #330404;
  }
  50%{
    border-width: 20px 10px 5px 2pxp;
    border-style:groove;
    border-color: black;
    box-shadow:10px -20px 10px #330404;
  }
  
}
.cardborder{
  position:relative;
  margin-bottom: 10px;
  border-width: 0.2px 3px 5px 1px;
  border-style:groove;
  border-color: rgb(255, 253, 253);
  box-shadow:-10px 20px 10px #330404;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) ,rgba(201, 201, 201, 0.884), rgba(155, 155, 76, 0.514));
  min-height: 50vh;
}
.card-title{
  text-align: center;
}
.footertext{
  text-align: right;
  color:rgb(43, 16, 16);
  position:fixed;
  width: 98vw;
  left: 0px;
  bottom:0px;
  font-size: 15px;
  
}
.no-decoration{
  text-decoration: none;
  color:rgb(56, 35, 35);
}