html{
    min-height:100%;
}

body{
  margin: 0;
  font-family: sans-serif;
  width: 96%;
}

.wrap{
	width: 100%;
	height:100%;
  /*padding-bottom: 35px;*/
	overflow-x: hidden;
  	overflow-y:hidden;
	position: absolute;
	 -webkit-transform-style: preserve-3d;
  	scrollbar-width: none;  
}

section{
  overflow-y:auto;
  scrollbar-width: none;
  height: 95% !important;
}

.content p{
  padding: 10px 150px;
  font-family: sans-serif;
  font-weight: bold;
}

.header{
  overflow: hidden;
  background-color: rgb(100,100,100);
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
}

.navbar{
  overflow: hidden;
  background-color: rgb(100,100,100);
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
}

.navbar a{
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 22px;
  float: left;
  flex: auto;
}

.navbar a:hover{
  background: rgb(100,100,100);
  color: #000;
}
.navbar a.active{
  /*background-color: #4CAF50;*/
  background-color: #448656;
  color: #fff;
}

main{
  /*padding: 2em .5em;*/
  padding: 2em 0;
  margin-bottom: 30px;
  color: #fff;
  width:100%;
}

#home, #info, #alert, #contact, #profile{
  position: absolute;
  height: 100%;
  width: 100%;
}
#info, #alert, #contact, #profile{
  display: none;
}

#info{
  background-color: blue;
}

#alert{
  background-color: red;
}

#contact{
  background-color: green;
}

#profile{
  background-color: yellow;
}