@font-face { font-family: asimov; src: url('asimov.ttf'); } 
@font-face { font-family: Plain Germanica; src: url('Plain Germanica.ttf'); 
} 

body {
  color: white;
  background-color: rgb(20,60,101); 
  margin: 0;
  margin-top:20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h2 {
  text-align:center;
  color:lightsteelblue;
}

.tall{
    max-width:1350px;
  margin: auto;
  padding: 15px;
}

* {
  box-sizing: border-box;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 25px;
  width: 100%;
}

@media only screen and (min-width: 1000px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

img {
   border-radius: 4px;
}


code {
  font-size:17px;color:blue;
}

.code01{
font-size: 16px;
color: blue;
border: 1px solid blue;
}
#cd01{
font-size: 16px;
color: blue;
border: 1px solid blue;
}
pre{
white-space: pre-wrap;
}

header {  
background-color:steelblue;  
position: fixed;  
left: 0;  
right: 0;  
top: 5px;  
height: 25px;  
display: flex;  
align-items: center;  
box-shadow: 0 0 25px 0 black;  
}  

header * {  
display: inline;  
}  
header li {  
margin: 10px;  
}  
header li a {  
color: white;  
text-decoration: none;  
}  


a:link {
  color: lightsteelblue;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}



.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}