*{margin: 0; padding: 0;}



body{background-image: url(war-bg.png);}






#container{
    height: 100vh;
    

}

/* styling for the header itself */

header{display: flex;
justify-content: space-between;
width: 100%;
margin: auto;
height: 200px;


}
/*styles for the left side of header */


.left-side{display: flex;
    text-transform: uppercase;
    margin: auto;
    
}

.navbar-left ul{list-style-type: none;
    margin-top: 30px;


}

.navbar-left ul li{display: inline;
    padding: 10px 10px;

}

.navbar-left ul li a{text-decoration: none;
    color: wheat;

}

.navbar-left ul li a:hover{}

/*styles for the right side of header */

.right-side{display: flex;
    margin: auto;

    

}

.right-side img{width: 25px;
height: 25px;
border-radius: 25px;


}

.navbar-right ul{list-style-type: none;

}

.navbar-right ul li{display: inline;
    padding: 20px 20px;

}



#main{display: flex;
width: 100%;
height: 400px;
justify-content: space-between;

}

.col{width: 300px;
height: 300px;
border: 2px solid black;

}