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

body {font-family: Comic Sans MS, Comic Sans, cursive; font-size: 1.2em; background: #fdedf2;}
nav a { color: gray; padding: 0 12px 0 12px; border: 1px solid gray; text-decoration: none;}
nav a:hover { background: gray; color: white;}
.splash { position: relative;}
.splash img {width: 100%}
.splash h1 { text-shadow: 2px 2px 0 black;   font-family: "Indie Flower", cursive;  font-size: 3em; font-style: normal;}
.splash h2 { text-shadow: 2px 2px 0 black;   font-family: "Indie Flower", cursive;  font-size: 2em; font-style: normal;}
.splash h3 { text-shadow: 2px 2px 0 black;   font-family: "Indie Flower", cursive;  font-size: 1.5em; font-style: normal;}
.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;}
.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;}

.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;}