@charset "utf-8";
/* CSS styles for Cherry Tree Banner Mural */

/* box sizing reset, credit to https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {box-sizing: border-box;}
  *, *:before, *:after {box-sizing: inherit;}

/* img reset */
img {max-width: 100%; height: auto;}


/* fonts all in one place. */

h1, h2, p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/* body, wrapper, and "card" outline */

body {
  min-width: 320px;
  margin: 0;
  background-color: #9e9d90;
  background-image: url("../images/background_hoffman.png"); /* background by Josh Green, from https://www.transparenttextures.com/hoffman.html */
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 1em;
}

.card {
  max-width: 720px;
  padding: 1em;
  background-color: white;
  box-shadow: 0 0 10px #61626F; /* RGB opposite of body background #9e9d90 */ 
}


/* header */

header h1 {
  margin: 0.25em 0;
  font-size: 1.6em;
}

@media (min-width:720px) {
  header h1 {
    font-size: 2em;
  }
}


/* footer */

footer {
  font-size: 0.6em;
  font-style: italic;
  padding: 0.5em;
}

footer p {
  margin: 0;
  line-height: 1.5;
}

@media (min-width:500px) {
  footer {
        font-size: 0.75em;
        padding: 0.5em 0;
    }
}


/* main & components */

main {
  position: relative;
  padding: 1em 0;
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

main h2 {
    font-size: 1em;
    font-weight: normal;
}

#mural-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 12px;
}

#mural-container img {
    cursor: help;
}

#modal-container {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 0%);
    min-width: 85%;
    max-width: 400px;
    max-height: 300px;
    padding: 0.5em;
    background-color: rgba(216, 232, 238, 0.9);
    box-shadow: 0 0 20px rgb(24, 27, 43);
}

.hidden {
    display: none;
}

#modal-container h3 {
    margin: 0 1.5em 0.25em 0;
}

#modal-container p {
    margin: 0;
    padding-left: 1em;
    font-size: 0.75em;
}

#modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    text-decoration: none;
    color: rgb(77, 77, 77);
}

#modal-close:hover, #modal-close:active, #modal-close:focus {
    color: black;
    background-color: darkgrey;
}

@media (min-width:500px){
    #modal-container h3 {font-size: 1.3em;}
    #modal-container p {font-size: 1em;}
}