/* nunito-600 - latin */
@font-face {
  /*font-display: swap;*/
  font-family: 'monospace';
  font-style: normal;
  src: url('') format(''),
       url('') format('');
}
/* nunito-900 - latin */
@font-face {
  font-family: 'monospace';
  font-style: normal;
  font-weight: bold;
  src: url('') format(''),
       url('') format('');
}

html {scroll-behavior: smooth;}
* {box-sizing: border-box;}
details > summary {cursor:pointer;}

body {
  font-family: monospace;
  margin: 0;
  color: #1746A2;
  background-color: #FFF7E9;
   background-attachment: fixed;
}
::selection {
  background: #5F9DF7;
  color: #FFF7E9;
}

h1, h2, h3 {color: #1746A2;}
h1, h2 {line-height: 1.5em;}
h1, h2 {background-color: #FFF7E9; padding: .4em 20px;}
h3 {border-bottom: 2px dashed #5F9DF7; padding: .4em 0;}

a {color: #1746A2;}
a:hover {
  color: #5F9DF7;
  text-decoration: none;
}

nav {margin: auto;}
nav ul {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  font-weight: bold;
}
nav li {
  padding: 4px 20px;
  list-style-type: "";
  background: #FFF7E9;
  border-radius: 8px 8px 0 0;
}
nav li a {
  text-decoration: none;
}
nav li a:visited {
  color: #5F9DF7;
}

summary {
  border: 1px dashed;
  padding: 6px;
  margin: 4px 0;
  font-size: 15px;
  font-weight: bold;
}
details[open] > summary {border: 1px dashed;}

img {max-width: 90%;}

main {
  background-color: #FFF7E9;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5em 42px;
  border-radius: 20px;
  line-height: 1.5rem;
  box-shadow: 0 0 18px #5F9DF7;
}
main hr {
  border: none;
  border-bottom: 2px dashed #FFF7E9;
}

main h3 {
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;
}
main a:visited {color: #1746A2;}
main ul {list-style-type: "❤︎";}
main li {padding-left: 8px;}

.navi {
  display:flex;
  flex-wrap: wrap;
}
.navi li {
  margin-right: 30px;}

.gallery {
  display:flex;
  flex-wrap: wrap;
}
.gallery details > summary,
.gallery img {
  border: 2px solid #1746A2;
}
.gallery img {
  width: 96px;
}
.gallery details > summary:hover,
.gallery img:hover{
  border: 2px solid #FF731D;
}

.gallery details > summary {
  background: #FFF7E9;
  list-style-type: "";
  font-size: small;
  font-weight: bold;
  width: 86px;
  height: 86px;
  margin: 0; padding: 16px 12px;
  margin-right: 10px;
}
.gallery details[open] > summary {display:none;}

footer {
  font-size: small;
  text-align: center;
  padding: 10px;
}
footer a,
footer a:hover,
footer a:visited {color: #1746A2;}

@media only screen and (max-width: 800px) {

  main {
    border-radius: 0;
    padding: 1rem 20px;
  }
  .gallery img {width: 90px;}
  .gallery details > summary {width: 90px;}
  
  nav ul {margin-bottom: 10px; justify-content: center;}
  nav li {border-radius: 0;}
}