@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap');

.open-sans-normal {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
	"wdth" 100;
}

.roboto-mono-regular {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.roboto-mono-light {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* body {
   font-family: Verdana, sans-serif;
   background-color: #Faebd7;
   } */

body {
    background-color: #Faebd7;
}

li a {
    color: green;
}

.navlinks {
    text-align: left;
    /* float: left; */
    font-size: small;
}

.jumpbox {
    text-align: right;
    /* float: right; */
    font-size: small;
}

/* .head-center {
   text-align: center;
   font-family: Verdana, sans-serif;
   } */

.heading-relative {
  width: 60%;
  position: relative;
  margin: auto;
  border: .1em solid grey;
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
  background-color: #Faebd7;
  background-image: linear-gradient(to top right, #Faebd7, #Ffffff);
  box-shadow: .5em .5em .25em #Cdb38b;
  color: white;
  text-shadow: .125em .125em .25em black;
  font-family: Arial, Helvetica, sans-serif;
}

.listing {
  position: relative;
  margin: auto;
  width: 400px;
  border: .1em solid grey;
  background-color: #Faebd7;
  background-image: linear-gradient(to top right, #Faebd7, #Ffffff);
  margin-top: 10px;
}

.listing-heading {
  position: relative;
  left: 20px;
}

.listing-table {
  padding-left: 1em;
  padding-bottom: 1em;
}

.listing-row:hover {
  background-color: #F0f8ff;
}

.listing-col {
  border-style: none;
  /* padding: .25em; */
}

.detail {
  position: relative;
  margin: auto;
  width: 95%;
  border: .1em solid grey;
  background-color: #Faebd7;
  background-image: linear-gradient(to top right, #Faebd7, #Ffffff);
  margin-top: 10px;
  padding: 10px;
  /* box-shadow: .5em .5em .25em #Cdb38b; */
}

.detail a {
    font-size: small;
}

.index {
  border: .1em solid grey;
  box-shadow: .5em .5em .25em #Cdb38b;
  background-color: #Faebd7;
  background-image: linear-gradient(to top right, #Faebd7, #Ffffff);
  padding: 1em;
}

.index-left > p {
    font-size: small;
    /* font-size: .75em; */
    /* font-size: 12px; */
}

.index-right a {
    font-size: small;
}

footer > a {
    font-size: x-small;
}

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    /* border: 2px solid yellow; */
    border-style: dotted;
    border-width: .1em;
}

.flex-child-right {
    flex: 1;
    text-align: right;
    /* border: 2px solid yellow; */
    border-style: dotted;
    border-width: .1em;
}

.flex-child-right-header {
  text-align: right;
  margin-left: auto;
}

.preview {
    background-color: white;
    border-radius: 1.5625em;
    padding: 1em;
    box-shadow: .5em .5em .25em #Cdb38b;
    /* width: 20em; */
    /* height: 30em; */
    overflow-x: auto;
    overflow-y: auto;
    /* flex-grow: 2; */
    width: 70%;
}

.preview > p {
    /* background-color: aliceblue; */
    /* color: white; */
    text-shadow: 2px 2px 4px #000000;
    text-decoration: overline underline;
}

.smallprint {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: .75em;
}

.search-heading {
  padding: 1em;
}

.search-results {
  padding: 1em;
    /* width: 10em; */
    width: 25%;
    /* flex-grow: 1; */
}

.search-results > h5 {
    margin-bottom: 0.1em;
}

.search-table {
  padding-left: 1em;
  padding-bottom: 1em;
}

.search-row:hover {
  background-color: #7ccd7c;
}

/* .search-row:nth-child(odd) {
   background-color: #B0e0e6;
   }
   .search-row:nth-child(even) {
   background-color: #Deb887;
   } */

.grid-index {
  /* Activate grid layout */
  display: grid;

  /* Create 2 columns, each 1 "fractional unit" wide */
  grid-template-columns: 1fr 1fr;

  /* Add a 1em gap between columns and rows */
  grid-gap: 5em;

  margin: 2em;
}

.flex-header {
  display: flex;
  /* justify-content: center; */
}

.title-word {
  animation: color-animation 4s linear infinite;
}

.title-word-1 {
  --color-1: black;
  --color-2: grey;
  --color-3: black;
}

.title-word-2 {
  --color-1: black;
  --color-2: black;
  --color-3: grey;
}

.title-word-3 {
  --color-1: grey;
  --color-2: black;
  --color-3: black;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

.animate-charcter
{
  /* text-transform: uppercase; */
  background-image: linear-gradient(
    -225deg,
    /* #231557 0%, */
    /* #44107a 29%, */
    /* #ff1361 67%, */
    /* #fff800 100% */
    #006400 0%,
    #556b2f 29%,
    purple 67%,
    #Ff7f00 100%
  );
  background-size: auto auto;
  /* background-clip: border-box; */
  background-size: 200% auto;
  /* color: #fff; */
  background-clip: text;
  text-fill-color: transparent;
  /* -webkit-background-clip: text; */
  -webkit-text-fill-color: transparent;
  animation: textclip 4s linear infinite;
  /* display: inline-block; */
  /* font-size: 190px; */
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}