/* i feel that removing every remnant would take so long i dont wanna do it at ALL rn */
body {
  background-image: url(image.jpg);
  background-size: auto;
  font-family: 'Inter';
}
.top {
  display: inline-block;
  margin-left: 10rem;
}
h1 {
  color: #3d276b;
}
.title{
  margin-top: 4rem;
}
.titletext{
  margin-top: 3rem;
  text-align: center;
}

h4 {
  color: #795ab8;
}
h3 {
	color: #795ab8;
}
a {
	color: #7345cf;
}
.endbar {
	color: #3d276b;
}
a:visited {
	color: #4c317e;
}
.flex-container0 {
display: flex;
text-align: center;
margin: auto;
width: 940px;
padding-bottom: 10px;
align-items: center;
}
ul {
	list-style: none;
	margin-right: 2.5rem;
}

div.buttons a {
  font-size: 0;
}
div.buttons a > img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  object-fit: contain;
  width: 88px;
  height: 31px;
}

.flex-container {
display: flex;
text-align: center;
border-radius: 15px;
margin: auto;
max-width: 1000px;
max-height: 1000px;
min-height: 500px;
align-items: center;
}
.flex-container > .aboutbox{
  box-shadow: 5px 10px 50px #797b7d;
  max-width: 650px;
  height: 500px;
  backdrop-filter: blur(10px);
  margin: auto;
  padding: 1rem;
  border-radius: 10px;
  transition: box-shadow 1s;
}
.flex-container > .aboutbox:hover{
  box-shadow: 5px 10px 50px #894ccf;
  }
.flex-container > .navbar{
  box-shadow: 5px 10px 50px #797b7d;
  height: 31.25rem;
  backdrop-filter: blur(10px);
  width: 9.3rem;
  padding-right: 10rem; 
  padding: 1rem;
  border-radius: 10px;
  transition: box-shadow 1s;
}
.flex-container > .navbar:hover{
  box-shadow: 5px 10px 50px #894ccf;
  }
.flex-container > .general{
  box-shadow: 5px 10px 50px #797b7d;
  backdrop-filter: blur(10px);
  height: 31.25rem;
  width: 9.3rem;
  padding-right: 10rem; 
  padding: 1rem;
  border-radius: 10px;
  transition: box-shadow 1s;
}
.flex-container > .general:hover{
  box-shadow: 5px 10px 50px #894ccf;
  }
.end {
  content: center;
  text-align: center;
  max-width: 650px;
  margin: auto;
  left: 1%; 
  right: 1%;

}
@media screen and (max-width: 700px) {
  .flex-container > .aboutbox{
    height: 700px;
  }
  .flex-container > .navbar {
    height: 700px;
  }
  .flex-container > .general {
    height: 700px;
  }
}