body{position: relative;background-color: #684cb0}
.upper{margin: 12px 0}
.upper h1{
    text-align: center;
    color: #e7e1d6;
    font-size: 26px;
    width: 70%;
    margin: auto;
    padding: 12px;
    line-height: 1.6;
}
.upper h1 a{font-family: initial;color: white;}
.navbar{display: revert;height: 50%;background-color: #281e43;}
.navbar .navbar-brand{color: white;font-style: italic;background: black;padding: 5px;border-radius: 20px;}
.navbar .nav .nav-link{color: #e0dfe7}
.navbar .page{color: #e0dfe7;text-decoration: none;font-weight: bold}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{background-color: #281e43;}
.data-scroll{
	overflow-y: scroll;
	height: 50%;
	background-color:white;
	padding: 10px;
	margin-left: -30px
}
.data-scroll p, .data-scroll .list{
	background: #684cb0;
    color: white;
    padding: 10px;
    border-radius: 15px;
}
.data-scroll .list ul li{margin-bottom: 15px}
.data-scroll .list ul li:before{content: '-'}
/* media query */
@media (max-width: 767px){
.navbar{height: 100%;bottom: 15px}
.navbar .navbar-brand{font-size: 18px;padding: 0}
.navbar .nav, .navbar .nav .nav-link{padding:10px 0}
.data-scroll{margin-left: 0}
.upper h1{
    width:100%;
}
}