:root  {
	--backg-colr:  rgb(212, 226, 241);
	--hovr-colr:   rgb(247, 246, 171);
	--menu-colr:   rgb(245, 22, 22);
	--menu-h-clr:  rgb(70, 41, 235);
	--border-colr: rgb(58, 56, 56);
}

body  {
    background-color: rgb(231, 227, 252);
    font-family: Saab;
    font-size: 1.3rem;
}

.nav-cls  {
    width: 100%;
    background-color: var(--backg-colr);
    position: sticky;
    top: 0;
}

.main-items   {
    display: flex;
    width: 100%;
    background-color: var(--backg-colr);
}

.main-items a, .nav-cls .item-with-subs   {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 0.5rem;
    color: var(--menu-colr);
    background-color: var(--backg-colr);
    text-decoration: none;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
}

.main-items a:hover   {
    background-color: var(--hovr-colr);
    color: var(--menu-h-clr);
}

.nav-cls .item-with-subs:hover   {
    background-color: var(--hovr-colr);
    color: var(--menu-h-clr);
}

.nav-cls label, #burger  {
    display: none;
}

.sub-item   {
    position: absolute;   /* required otherwise [.sub-items a] is included in menu  */
    text-align: left;
    margin: 0 0 0 2rem;    /* top right bottom left  */
    display: none;
    z-index: 100;
    overflow: visible;
}

.sub-item a   {
    display: block;
    text-align: left;
    box-sizing: border-box;
    background-color: var(--backg-colr);
}

.item-with-subs:hover .sub-item   {
    display: block;
}

.item-with-subs a  {
    border-top: 1px solid var(--border-colr);
}

ol  {
    list-style-type: gurmukhi;
}

@media only screen and (max-width: 784px) {

	.main-items  {
		width: 50%;
    	position: absolute;
		z-index: 100;
		overflow: visible;
		text-align: left;
	}

	.main-items a {
		box-sizing: border-box;
		display: block;

		border-top: 1px solid  var(--border-colr);
		background-color: var(--backg-colr);
		margin: 0 0 0 1rem;		/* top right bottom left  */
		text-align: left;
	}

	.nav-cls .item-with-sub  {
		text-align: left;
	}
	
	.nav-cls label {
		display: inline-block;
		color: var(--menu-colr);
		background-color: var(--backg-colr);
		font-style: normal;
		width: 50%;
		text-align: left;
	}

	#burger   {
		width: 50%;
	}
	
	.main-items {
		display: none;
	}

	.nav-cls input:checked ~ .main-items {
		display: block;
	}

	.nav-cls {
		flex-wrap: wrap;
	}

	.nav-cls  .item-with-sub  {
		border-top: 1px solid  var(--border-colr);

		background-color: var(--backg-colr);
		margin: 0 0 0 1rem;		/* top right bottom left  */
	}


	.sub-items {
		position: static;
		width: 89%;

	}
}