*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Bruno Ace SC", sans-serif;
}

body{
background-image: url("header.png");
color:white;
}

/* HEADER */

.topcontainer{
text-align:center;
font-size:40px;
padding:20px;
background-image: url("header.png");
}

/* MAIN LAYOUT */

.container{
display:flex;
min-height:100vh;
}

/* SIDEBAR */

.topnavbar{
width:300px;
background:#1b1340;
padding:20px;
background-image: url("header.png");
}

.topnavbar img{
width:100%;
height:auto;
border-radius:10px;
margin:15px 0;
}

.topnavbar ul{
list-style:none;
}

.topnavbar li{
margin:10px 0;
font-size:14px;
}

/* MAIN CONTENT */

main{
flex:1;
padding:30px;
}

.mainheading{
text-align:center;
margin-bottom:30px;
font-size:30px;
}

.card{
background:#3b2b8c;
padding:20px;
margin-bottom:20px;
border-radius:10px;
}

.card h2{
margin-bottom:10px;
}

/* TABLET */

@media (max-width:900px){

.container{
flex-direction:column;
}

.topnavbar{
width:100%;
text-align:center;
}

.topnavbar img{
width:200px;
}

}

/* MOBILE */

@media (max-width:500px){

.topcontainer{
font-size:25px;
}

.mainheading{
font-size:22px;
}

.card{
padding:15px;
}

}