body {
   background-color: #0e1c1a;
   background: #000;
   animation: bg 100s linear infinite;
   color:white;
}

@font-face {
  font-family: American Typewriter;
  src: url(american_typewriter.woff);
}
@font-face {
  font-family: Cascadia;
  src: url(CascadiaMono-SemiLight.otf);
}


@keyframes bg {
  0% { background: #0e1c1a; }
  25% { background: #5d5d93; }
  50% { background: #009999; }
  75% { background: #999999; }
  100% { background: #0e1c1a; }
}


/*header style*/
header {
   font-family: Cascadia;
}

header h1 {
      font-weight: normal;

      width: 300px;
      height: 10px;

}
header  a {
         color:white;
      text-decoration: none;
}
header  a:hover {
         color:#ffdba6;
      text-decoration: none;
}
header h2 {
      font-weight: normal;
      font-size: 18px;
      padding-top: 10px;
      width: 280px;
      height: 10px;
}

.left-nav {
   display: inline-block;
   height: 120px; 
padding-left: 20px;}
.right-nav {
   display: inline-block;
   height: 150px; 
   width:420px;
   
border-top-width: 1px;
  border-top-style: solid;}

/*navigation menu style*/
nav {
   
   word-spacing: 28px;
   padding: 13px;

   display: inline-block;   
}

/*navigation bar button style*/
nav a {
   color: white;
   text-decoration: none;
   font-size: larger;
   font-weight: normal;
}

nav a:hover{
   color:#ffdba6;
}

main {
   font-family: Cascadia;
}

main a{
   color:#ffdba6;
   text-decoration: none;
}

main a:hover{
   color:#ccaf84;
}

 summary{
   padding-left: 8%;
   padding-bottom: 20px;
   font-weight: normal;
   font-size: 30px;

}

summary:hover{
   color:#ffdba6;
   cursor:pointer;
}

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}




ul {
  padding-left: 12%;
  padding-right: 8%;
  list-style-type: none;
  font-size: 18px;
}


    li {
        width: 90%; 
        font-size: 16px;
        padding-bottom: 31px;
        font-family: Cascadia;
    }

    small b {
      color:#f5cbcd;
    }



.intro-text {
  display: block;
  font-size: 60px;
  
  padding-bottom: 30px;
  font-weight: lighter;
  padding-left: 20%;
}


/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */

@media screen and (min-width: 965px) {
  .intro-text-small {
  font-size: 25px;
  display: block;
  font-weight: lighter;
  color:white;
  line-height: 60px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 964px) and (min-width: 601px) {
  .intro-text-small {
    font-size: 20px;
      display: block;
  font-weight: lighter;
  color:white;
  line-height: 60px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  .intro-text-small {
    font-size: 15px;
      display: block;
  font-weight: lighter;
  color:white;
  line-height: 60px;
  }
}