/* This one controls things. Maybe still copy into both style.css files*/
body {margin: 3% auto; background: #232323; color: #f8f8f8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4; text-shadow: 0 1px 0 #232323; max-width: 90%;}
a {color: #cff6cf; text-decoration: none;}
a.image{border-bottom: 0;}
a:hover {color: rgb(138, 255, 136);}
h1 {color: rgb(138, 255, 136);}
h2 {color: rgb(138, 255, 136);}
h3 {color: #81db99;}
canvas {margin: auto; width:100%}

/* For Phone */
#portrait img {width:100%}
#navigation a{display:block; margin-bottom:8px; font-size:20px}
div.gallery {width: 100%}
a.image {margin-bottom: 8px}
a.image img {width: 100%}

div.gallery .header {width: 100%, height:100%;}

@media only screen and (min-width: 768px) {
  /* For desktop: */
            #content {max-width: 78%;}
            #content.full {max-width: 100%;}
            #portrait {float: right; max-width:20%;}
            #portrait img {width: 100%; margin-bottom:5px;}
            #navigation {float:right; margin-top:10px}
            #navigation a{margin-right:8px; margin-left:8px; display:inline;}
            div.gallery {width: 360px; height:270px}
            div.gallery.mini {width:200px; height: 250px}
            a.image{position: relative}
            a.image .title {
  position: absolute;
  bottom: 16px;
  left: 0px;
  width:360px;
  color:white;
  text-weight:bold;
background-color: #000000AA;
  font-size:18px;
transition: opacity 0.2s;
text-shadow: none}

.gallery:hover .image .title {
  opacity: 0.3;
}

.mini .image .title {
  width:200px;
}

            a.image img {width: 45%}
            a.image img.large {width: 800px}
            div.gallery img {width: 480px; height:320px;}
            div.gallery.mini img {width: 200px; height:100px; }
            div.gallery .desc {margin-top:-12px}
}

div.gallery.mini div.desc {
  font-size:16px;
}

div.gallery {
          margin: 5px;
          border: 2px solid #ccc;
          float: left;
          background-color:white;
        }

        div.gallery:hover {
          border: 4px solid #777;
        }

        div.gallery img {
          width: 100%;
          height: auto;
        }

        div.desc {
          padding: 15px;
          text-align: left;
        }

div.header {
  color:white;
  text-weight:bold;
  font-size:30px;
  display: flex;
  text-align:center;
   justify-content: center;
   align-items: center;
}


div.Math, div.header.Math:hover {border:4px solid #0085FF60}
div.Miscellany, div.header.Miscellany:hover {border:4px solid #9728a160}
div.Music, div.header.Student:hover {border:4px solid #FF900060}
div.header.Math {background-color:#0085FFAA}
div.header.Miscellany {background-color:#9728a1AA}
div.header.Music {background-color:#FF9000AA}


h2, h3 {display:block;margin-bottom:.1in;}

.inline {display:inline-block; margin-right:.25in; margin-top:.1in;}

ul {margin:0px}

.email:after { content: attr(data-domain); }

.email:before { content: attr(data-localpart) "@"; }

#contact_info td{
  width:40%;
  margin-left: 10%;
}

#contact_info {
  margin:0;
}

#info {
  margin-top:50px;
  font-style: italic;
}

#gallery:after {
    content: '';
    display: block;
    clear: both;
}

table.agenda td {
  border: 1px solid black;
  padding: 3px;
}

.spoiler{
  background-color: black;
  color: transparent;
  text-shadow:none;
  user-select: none;
}

.spoiler:hover{
  background-color: inherit;
  color: inherit;
}

details {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
}

details > summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 24pt;
  color: rgb(138, 255, 136)
}

/* details > p {
  border-radius: 0 0 10px 10px;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
} */

/* details:open > summary {
  background-color:#232323;
} */