body {
  background-color: black;
  color:white;
  margin: 0;
}

p{
  font-family: "Bitcount Grid Single", sans-serif;
  font-size: 20px;
  line-height: 1.6;
}
@media (max-width: 800px){
.magic-wrap {
  flex-direction: column;
}
.super-sidebar{
  width: 100%;
  position:static;
}
}



.magic-wrap{
  display: flex;
  max-width: 1100px;
  margin: 40px auto;
  gap: 20px;
align-items: stretch;
}

.super-sidebar{
width: 200px;
flex-shrink: 0;
background-color: #15069c;
padding: 20px;
height: fit-content;
font-family: "Smooch Sans", sans-serif;
position: sticky;
top:20px;
align-self:stretch;
}

.super-sidebar a {
display:block;
color: #52a3a0;
margin-bottom: 10px;
text-decoration: underline overline;
}
.super-sidebar ul{
list-style: none;
padding: 0;
margin: 0;
}
.main-content {
  flex:1;
  display: flex;
  flex-direction: column;
  gap: 20px;}
.box{
  background-color: #a39b52;
  padding: 30px;
  box-shadow:10px 10px 20px rgba(0,0,0,0.4);
  
}
.small-box{
  background-color:#a39b52;
  padding: 20px;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
  
}