body {
  background-color: #fff;
  animation: fadein 1.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.navbar {
  overflow: hidden;
  background-color: #000;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  font-size: large;
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 30px 30px;
  text-decoration: none;
}

.navbar a:link {
  color: #fff;
}

.navbar a:visited {
  color: #fff;
}

.navbar a:hover {
  background: #fff;
  color: #000;
}

.navbar a:active {
  color: #fff;
}

.main {
  margin-top: 110px;
  margin-left: 30px;
}

mark {
	background: linear-gradient(104deg, rgba(190, 200, 208, 0) 0.9%, rgba(190, 200, 208, 1.25) 2.4%, rgba(190, 200, 208, 0.5) 5.8%, rgba(190, 200, 208, 0.1) 93%, rgba(190, 200, 208,0.7) 96%, rgba(190, 200, 208, 0) 98%), linear-gradient(183deg, rgba(190, 200, 208, 0) 0%, rgba(190, 200, 208, 0.3) 7.9%, rgba(190, 200, 208, 0) 15%);
	padding: 0.5em 3px;
	-webkit-box-decoration-break: clone;
	margin: 0;
	border-radius: 7.5px;
}

p {
   font-family: 'Roboto Slab', serif;
   font-size: large;
   line-height: 160%;
   color: #000;
   margin-right: 20px;
}

.main a:link {
  color: #000;
  text-decoration: none;
}

.main a:visited {
  color: #000;
  text-decoration: none;
}

.main a:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.main a:active {
  color: #000;
  text-decoration: none;
}

hr {
  width: 90%;
  border: 0.5px dashed rgb(128, 128, 128);
  margin: 0px;
}

::selection {
  background: #000;
  color: #fff;
}

@media only screen and (orientation: landscape){
	.main {
	  max-width: 60%;
	}
	}

@media only screen and (orientation: portrait) {
	.main {
	  max-width: 85%;
	}
	}

@media screen and (max-width: 600px) {
	.main {
	  max-width: 95%;
	}
	}