/*---link styling must be kept in this order---*/
a:link {
color: black;
}

a:visited {
color: lightgray;
}

a:hover {
background: gray;
color: white;
}

a:active {
background: black;
color: white;
}

/*---overall styling---*/
body {
background-attachment: fixed;
background-color: black;
background-image: url("images/background.png");
font-family: monospace;
margin: auto;
overflow: scroll;
padding: .5%;
width: 50%;
}

button {
background-color: white;
border: 1px solid gray;
font-family: monospace;
margin: .3%;
}

button:hover {
background: gray;
color: white;
}

button:active {
background: black;
color: white;
}

div {
background: white;
padding: 1%;
border: 2px solid gray;
overflow: scroll;
height: 37vh;
width: 98%;
}

iframe {
background: white;
border: 2px solid gray;
height: 50vh;
width: 100%;
}

mark {
background-color: lightgray;
}

ul>li {
list-style-type: square;
}

/*---xml file styling---*/
item, title, pubDate, description {
display: block;
margin: 1%;
}

guid, language, link {
display: none;
}

item {
display: block;
overflow: scroll;
}

rss {
font-family: monospace;
overflow: scroll;
padding: 1%;
width: 95%;
}

title {
background-color: lightgray;
}

.xmlhidden {
display: none;
}

/*---specialized styling---*/
.collapsible {
padding: .5%;
}

.collapsible:after {
content: " ▶";
}

.active:after {
content: " ▼";
}

.default {
background-color: #ffa31a;
}

.hidden {
display: none;
}

.instructions {
animation-delay: 3s;
animation-duration: 1s;
animation-iteration-count: 4;
animation-name: attention;
background-color: #ffa31a;
border: 2px solid white;
font-size: 200%;
text-align: center;
}

@keyframes attention {
0% {background-color: #ffa31a; color: black;}
50% {background-color: white; color: black;}
100% {background-color: #ffa31a; color: black;}
}

.rainbow {
animation-direction: alternate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: gentlestrobe;
animation-timing-function: linear;
color: #ffa31a;
}

@keyframes gentlestrobe {
0% {color: #ffa31a;}
100% {color: purple;}
}

.show {
display: none;
}

/*---mobile styling---*/
@media only screen and (max-width: 1280px), screen and (max-height: 680px) {
body {
padding: 1%;
width: 90%;
}

iframe {
height: 42vh;
}

}