/*
 * 2025KangarooIs.css
 * 
 * CSS Reference: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
 * */

body {font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: 1.2em; background: linen;}
nav a { color: gray; padding: 0; margin-right: 5px; border: none; text-decoration: none; background: white;}
nav a:hover { background: gray; color: white;}
.splash { position: relative;}
.splash img {width: 100%}
/* font-family: "Indie Flower", cursive; */
.splash h1 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 3em; font-style: normal;}
.splash h2 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 2em; font-style: normal;}
.splash h3 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.5em; font-style: normal;}

@media screen and (max-width: 1000px) {
  .splash h1 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 2em; font-style: normal; margin: 0;}
  .splash h2 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.5em; font-style: normal; margin: 0;}
  .splash h3 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.2em; font-style: normal; margin: 0;}
}

@media screen and (max-width: 700px) {
  .splash h1 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.5em; font-style: normal; margin: 0;}
  .splash h2 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.2em; font-style: normal; margin: 0;}
  .splash h3 { color: yellow; text-shadow: 2px 2px 0 black;   font-family: "Lobster", sans-serif;  font-size: 1.0em; font-style: normal; margin: 0;}
}

.content {}
.grid {display: flex; flex-wrap: wrap;}
.cross {font-size: 2em; border: 1px solid black; background: white; cursor: pointer;
        position: absolute; top: 0; right: 0; width: 40px; height: 40px; text-align: center; padding:0; margin:0; padding: 0;}
.modal {display:none; position:fixed; top:20px; left:20px; right: 20px; bottom: 20px;
  background:beige; object-fit:scale-down; overflow:hidden;
  border: 5px solid transparent; /* Required for border-image to work */
  border-image: linear-gradient(to right, blue, green) 1;
}
.splashText {color: yellow; text-align: center; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); text-shadow: 2px 2px 0 black;}
.bigImage {max-width: 100%; max-height: 100%;}
p {padding: 10px; text-align:justify;}
cite { font-size: small;}
footer {color: gray; text-align: right;}
button { cursor: pointer; }

.square { position: relative; margin: 5px; width: 300px; border: 5px groove black; border-radius: 15px;}
.square:hover {border: 5px groove white;}
.square a { margin: 0;}
.square a img {width: 100%;}

.footnote { font-size: small; font-style: italic; border: 1px solid black; background: beige; margin: 40px; max-width: 600px; float: left;}
.footnote h3 { padding-left: 10px;}

.quirky { margin: 25px; padding: 15px; background: #BFE2F9; font-size: 0.8em; box-shadow: 20px 20px 10px grey; }

details { background: black; color: white; padding: 0; width: auto;}
summary { outline: none; font-size: 1.15em; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:before { background: #da291c; border-color: #da291c; border-radius: 15px;
    content: "+"; color: #fff; float: left; font-size: 1em; font-weight: bold;
    margin: -2px 10px 0 0; padding: 1px 0 3px 0; text-align: center; width: 30px;
}
details[open] summary:before { content: "-"; }