body {
   font-family: Raleway;
}

header {
   display: inline;
}

aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: rgb(139,223,250);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
   float: right;
   width: 25%;
}

span.yelblue {
	padding:2px 4px;
	color:rgb(0,0,255);
	background-color:rgb(247,255,179)
}

a:link {
   color: red;
   font-weight: bold;
}
 
a:visited {
   color: green;
   font-weight:normal;
}
 
a:hover {
   color: blue;
}
 
a:active {
   color:orange;
}

.jumbotron {
   font-size: 20px;
   padding: 60px;
   background-color: #00c8eb;
   text-align: center;
   color: white;
}

nav li {
   display: inline;
   list-style-type: none;
   margin-right: 20px;
}

nav {
   background-color: #00a2c6;
   padding: 5px;
   position: sticky;
   top: 0;
}

nav a {
   font-size: 18px;
   font-weight: 400;
   text-decoration: none;
   color: white;
}

.card2 {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   padding: 20px;
   margin-top: 20px;
}
.card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   padding: 20px;
   margin-top: 20px;
}

.tengah {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#content {
   float: left;
   width: 75%;
}

main {
   padding: 20px;
   overflow: auto;
}

.kotak {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
   
.kotak-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.kotak-body {padding: 2px 16px;}

.footer-kotak {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.isi-kotak {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


.tutup {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.tutup:hover,
.tutup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}