@import url('https://fonts.googleapis.com/css?family=Jim+Nightshade');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Assistant:300');

*{
    box-sizing: border-box;
	font-family: Garamond, Times New Roman, serif;
}

/* html{
} */

a {
    color: hotpink;
	background-color: #6f00ff;
	text-decoration:none;
}

a:hover	{
	text-decoration:underline;
}

.cclimg {
    content:url(https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png);
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: transparent;
}

.footbtn {
    background-color: #cccccc;
    color: black;
    margin: 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.footbtn:hover,                                                                                                                                                                                 .footbtn:focus {
    background-color: #07c;
}

.footbtn:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.footbtn:active {
    background-color: #0064bd;
    box-shadow: none;
}

body {
	margin: 0;
	background: linear-gradient(to bottom, green 0%,#643232 100%);
	background: linear-gradient(to bottom, #008000 0%,#643232 50%,#008000 100%);
	color: #6feeff;
}

@-webkit-keyframes gradient_scroller {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes gradient_scroller {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@keyframes gradient_scroller {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}

.logo {
    padding: 10px;
    text-align: center;
}

.content {
    background-color: #643232;
    color: #6fda00;
    padding: 10px;
    height: 360px;
    text-align: left;
}

.footer {
    background-color: #6faaff;
    padding: 10px;
    text-align: center;
    color: #000000;
}

.dropbtn {
    background-color: #6fda00; /* 4CAF50 */
    color: black;
    padding: 8px;
    font-size: 16px;
    border: none;
    border: 1px solid transparent;
    border-radius: 3px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin: 4px;
}

.dropdown-content {
    max-height: 500px;
    overflow-y: auto;
    display: none;
    position: absolute;
    background-color: #CCCCCC;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

.dropdown-content a {
    color: black;
    padding: 10px 8px;
    text-decoration: none;
    background-color: #CCCCCC;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.dropbar {margin-right: 100px;}

.dropdown-subtitle {
    color: black;
    background-color: #CCCCCC;
    display: block;
    text-align: center;
    font-size: smaller;
}

.tex sub, .latex sub, .latex sup {
  text-transform: uppercase;
}

.tex sub, .latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

.tex, .latex, .tex sub, .latex sub {
  font-size: 1em;
}

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}

#quotation {
  font-family: "Merriweather", script;
  font-size: 2vmin;
  line-height: 1.2;
  hanging-punctuation: first;
}

#quotation em {
    font-family: "Merriweather";
    font-style: italic;
}

#source {
  font-family: 'Merriweather', sans-serif;
  font-size: 2vmin;
  text-indent: 0vmin;
  color: rgba(255,255,255,1);
}

#source em {
    font-family: "Merriweather";
    font-style: italic;
}

.rainbow {
    text-shadow: 2px 2px 4px hsl(0,0%,0%);
    animation: rainbow 5s infinite
}

@keyframes rainbow {
    0% {
        color: orange
    }

    10% {
        color: purple
    }

    20% {
        color: red
    }

    30% {
        color: CadetBlue
    }

    40% {
        color: yellow
    }

    50% {
        color: coral
    }

    60% {
        color: green
    }

    70% {
        color: cyan
    }

    80% {
        color: DeepPink
    }

    90% {
        color: DodgerBlue
    }

    100% {
        color: orange
    }
}