*
{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

.nav-bar
{
    background: rgb(247, 173, 175);
    text-align: center ;


}

.nav-bar ul
{
    display: inline-flex;
    list-style: none;
    color: #fff;
}

.nav-bar ul li
{
	width: 130px;
	margin: 15px;
	padding: 15px;
}

.nav-bar ul li a
{
	text-decoration: none;
	color: #fff;


}

.active, .nav-bar ul li:hover
{
	background: #E67D81;
	border-radius: 3px;

}

.sub-nav-1
{
    display:none;
}

.nav-bar ul li:hover .sub-nav-1
{
	display: block;
	position: absolute;
	background: rgb(247, 173, 175);
	margin-top: 15px;
	margin-left: 15px

}

.nav-bar ul li:hover .sub-nav-1 ul
{
	display: block;
	margin: 10px;
}

.nav-bar ul li:hover .sub-nav-1 ul li
{
	width: 150px;
	padding: 10px;
	border-bottom: 1px dotted #fff;
	background: transparent;
	border-radius: 0;
	text-align: left;

}

.nav-bar ul li:hover .sub-nav-1 ul li:last-child

{
    border-bottom: none;
}

.nav-bar ul li:hover .sub-nav-1 ul li a:hover
{
    color: #b2ff00;
}

.sub-nav-2
{
    display: none;
}


.hover-me:hover .sub-nav-2
{
	position: absolute;
	display : block;
	margin-top: -40px;
	margin-left: 160px;
	background: rgb(247, 173, 175);
}
.boty-background
{
    i
}

/* ------------ BACKGROUND IMAGE------------------------ */

body {
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 40%  100%;

}


h1 {
  text-align: center;
}