body {
background-image: url('/static/images/tbg.png');
background-size: cover;
font-family: Arial;
}

@keyframes colorbar {
  0% {
      background-color: #A41414;
  }
  20% {
      background-color: #2B2424;
  }    
  40% {
      background-color: #34C434;
  }
  60% {
      background-color: #444D44;
  }
  80% {
      background-color: #5454E4;
  }
  100% {
      background-color: #14141F;
  }
}


.colorbar {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 5.25%;
background: linear-gradient(#0000FF, #9c4ff7);
}

.area {
position: relative;
display: flex;
column-gap: 4em;
justify-content: center;
top: -2.5%;
font-family: Arial;
}

#VNSESDLITE {
width: 25.64%;
height: 90vh;
background: transparent;
backdrop-filter: blur(10px);
border-radius: 5px;
font-family: arial;
border-width: 5px;
border-color: #9c4ff7;
border-style: inset;
}

#VNSESDLITE .h1{
position: relative;
left: 10%;
}

#VNSESDLITE #monthly {
position: relative;
top: -20px;
left: 13.64%;
font-size: 1.46%;
font-family: Arial;
}

#VNSESDLITE h2{
position: relative;
top: -10px;
left: 14%;
font-family: helvectia;
font-size: 20px;
}


#VNSESD {
width: 25.64%;
height: 90vh;
background: transparent;
backdrop-filter: blur(10px);
border-radius: 5px;
font-family: arial;
border-width: 5px;
border-color: #9c4ff7;
border-style: inset;
}

img{
    height: 90vh;
    width: 25.64vw;
}


#back {
width: 7.32em;
height: 3.66em;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

#back:hover {
transition-duration: 0.5s;
transform: scale(1.13);
    
}