/* eb-garamond-regular - vietnamese_latin-ext_latin_greek-ext_cyrillic-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/eb-garamond-v25-vietnamese_latin-ext_latin_greek-ext_cyrillic-ext-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}

/* mea-culpa-regular - latin-ext_latin */
@font-face {
  font-family: 'Mea Culpa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mea-culpa-v3-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mea-culpa-v3-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mea-culpa-v3-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mea-culpa-v3-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mea-culpa-v3-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mea-culpa-v3-latin-ext_latin-regular.svg#MeaCulpa') format('svg'); /* Legacy iOS */
}

body {
  margin: 0px;
  background: url(https://pleurodelinae.neocities.org/assets/background.jpg) repeat top fixed;
  background-position: 0% 50%;
  background-size: 400px;
  background-color:#100001;
  font-family: 'EB Garamond', serif;
}

h1 {
  color: #021714;
  font-weight:normal;
  font-size:42px;
  text-transform:uppercase;
  letter-spacing:0.075em;
  font-family: 'EB Garamond', serif;
 }
h2 {
 color: #021714;
 font-weight:normal;
 font-size:25px;
 text-transform:uppercase;
 letter-spacing:0.075em;
 font-family: 'EB Garamond', serif;
 }
h3 {
 color: #021714;
 font-weight:normal;
 font-size:20px;
 text-transform:uppercase;
 letter-spacing:0.08em;
 font-family: 'EB Garamond', serif;
 }
h4 {
 color: #f1ece5;
 font-weight: 900;
 font-size:25px;
 margin-top: 15px;
 margin-bottom: 10px;
 text-shadow: 0px 0px 20px black;
}
p {
  text-align: left;
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  line-height: 1.25;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  text-align: justify;
  hyphens: auto;
 }
.big-letter::first-letter {
  font-family: 'Mea Culpa', cursive;
  float: left !important;
  font-size: 3em !important;
  margin: -0.15em 0.083em 0 0 !important;
  line-height: 0.67 !important;
  font-style: normal;
  font-variant-caps: normal;
}

.augh {
 color: #DD470C;
 text-decoration: underline;
 }
 
.augh:hover {
 color: #6e3464;
 text-decoration: none;
 transition:.3s;
 }
 
a {
 color: #021714;
 text-decoration: none;
 }
 
a:hover {
 color: #021714;
 text-decoration: none;
 }
.grow { 
transition: all .2s ease-in-out; 
}
.grow:hover { 
transform: scale(1.5); 
}
 
.small {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  hyphens: auto;
}

.unit {
  max-width:90%;
  margin: 0 auto;
}

.divisi {
 max-width: 170px;
 margin-top: 1em;
 margin-bottom: 1em;
 mix-blend-mode: multiply;
 background-blend-mode: multiply;
 padding: 20px 0px 20px 0px;
}

.tout { background:url(https://pleurodelinae.neocities.org/assets/sidebar.jpg);
  border-top: 0px;
  border-bottom: 0px;
  padding: 0px 0px 0px 0px;
  max-width: 70%;
  margin: 0 auto;
  box-shadow: 0px 0px 20px black;
}
header, nav {
  max-width:70%;
}

aside {
  width:250px;
}

.right-sidebar {
  width: 30px;
  }

.navlink{
  color: #f1ece5;
  background: rgb(66,0,0);
  background: linear-gradient(90deg, rgba(66,0,0,1) 0%, rgba(193,38,19,1) 35%, rgba(131,0,0,1) 61%, rgba(45,0,0,1) 100%);
  box-shadow: 0px 0px 5px black;
  display: block;
  padding: 10px 0px 10px 5px;
  margin: 8px 0px 8px 5px;
  width: 95%;
  font-weight:normal;
  font-size:20px;
  text-transform:uppercase;
  font-family: 'EB Garamond', serif;
  border-style: solid none solid none;
  border-width: 1px;
  border-color: rgba(193,38,19,1);
  transition: all .2s ease-in-out; 
}
.navlink:hover {
  margin-left: 20px;
}

.sid {
  background-color: #f1ece5;
  max-width: 200px;
  padding: 5px;
  margin: 10px;
  box-shadow: 0px 0px 10px black;
}
.flex {
  display:flex;
}
header {
  max-width: 600px;
  height:100%;
}
main {
 width:100%;
 background-image: url(https://pleurodelinae.neocities.org/assets/paper_texture.jpg);
 background-color: #faf4eb;
 color: #021714;
 box-shadow: 0px 0px 10px black;
}

.cont {
 padding: 15px 15px 15px 15px;
}

@media only screen and (max-width: 950px) {
   .tout {
  max-width:100%;
 }
}
@media only screen and (max-width: 750px) {
   .flex {
  display:block;
 }
   .unit {
  max-width: 100%
   }
   aside {
  width: 100%;
 }
   .navlink {
  text-align: center;
  margin-left: 0px;
  width: 100%;
  padding: 10px 0px 10px 0px;
 }
 
 .navlink:hover {
  margin-left: 0px;
}

}

.gallery {
  columns: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.gallery.columns {
	display: block;
	column-count: 3;
}
.gallery .art {
  display: block;
  float: left;
  padding: 5px 3px 5px 3px;
  margin:1%;
  color: black;
}
.work {
max-height: 100%;
max-width: 100%;
}
@media only screen and (max-width: 800px) {
   .gallery.columns {
  column-count: 2;
 }
}
@media only screen and (max-width: 500px) {
   .gallery.columns {
  column-count: 1;
 }
}

.note {
  background-color:#f1d773;
  width:70%;
  transform:rotate(-2deg);
  padding: 15px;
  margin: 0 auto;
  box-shadow: 0px 3px 6px grey;
}

.halfd {
  width: 40%;
  float: left;
}

.halfg {
  width: 60%;
  float: left;
}

.halfd2 {
  width: 30%;
  float: left;
}

.halfg2 {
  width: 70%;
  float: left;
}

        @media
          only screen 
    and (max-width: 650px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {
                .halfd, .halfg, .halfd2, .halfg2 {
                        width: 94%;
                }
    }