main.css

body
 {
  background-color: #272626;
  color:#272626;
  font-family: 'Courier';
  overflow-x: hidden; 
  }

.lead { font-weight: bold; text-transform: uppercase; letter-spacing: .5rem; }

.container { padding: 2rem 3rem 2rem 3rem; }

.container:first-child
{
  background-color: #e2e2e2;
  margin-top: 2rem;
}


i { font-size: 2.2rem; padding-right:.5rem;}

a { color: #3c8e97; }
a:hover { color:#3c8e97 ; text-decoration: none; border-bottom: 6px dotted #3c8e97;}
.menu-item a:hover { border-bottom: none; color:#57a0a8;}


/*********MENU********************/

nav 
{
  line-height: 1.4;
  background: #333;
  padding: 25px 35px;
  max-width: 700px;
  top: calc(50vh - 200px);
  left: calc(50vw - 200px);
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 60px -15px #1f1e1ebf;
  transform: scale(0) rotate(360deg);
  transition: all 0.75s;
  font-size: 1.2rem;
}

.main-menu nav.menu_active
{
  transform: scale(1) rotate(0deg);
}

.main-menu nav > ol > li 
{
  margin: 20px 0;
  color: #f2f2f2;
  font-weight: bold;
}

.main-menu nav > ol > li > ol
 {
  margin: 10px 0 0 20px;
  border-left: 1px solid #4d4d4c;
  color: #3c8e97;
}

.main-menu nav > ol > li > ol > li 
{
  margin: 7px 0;
  padding-left: 20px;
  color:#3c8e97;
  font-weight: bold;
}

.main-menu nav a:hover 
{
  color: rgb(63, 184, 197);
}

.main-menu h3 
{
  position: fixed;
  font-size: 60px;
  color: #f2f2f2;
  top: calc(90vh - 40px);
  left: calc(50vw - 126px);
  cursor: pointer;
  transition: all 0.3s;
}

.main-menu h3:hover 
{
  border-bottom: 6px dotted #f2f2f2;
  padding-bottom: 10px;
  top: calc(90vh - 50px);
}

.main-menu p 
{
  float: right;
  cursor: pointer;
  font-size: 16px;
  color: #f2f2f2;
  transition: all 0.2s;
  font-weight: bold;
}

.main-menu p:hover 
{
  border-bottom: 2px dotted #f2f2f2;
  padding-bottom: 5px;
}

.main-menu h4 { color: #f2f2f2; font-weight: bold; }


/*********LOADER********************/
#loader 
{
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  border: 1rem solid #3c8e97;
  border-radius: 50%;
  border-top: 1rem solid #272626;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.animate
{
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 }}

@keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0; opacity:1 }}

#page { display: none; }

/*****************************/