/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  background-image: url('https://gwynleonterius.neocities.org/images/gwynbgf.png');
  background-size: cover;
	background-position: top;
	background-repeat: repeat-x;
	background-attachment: fixed;
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}


.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

.ascii-art {
    font-family: monospace;
    white-space: pre;
    font-size: 0.55vw;
}

a {
  color: #ffc000;
}
a:hover { 
  background-color: #34220b;
}

h1, h2, h3, h4, h5 {
  color: #5fc7cd;
}

hr {
  border-width: 2px 0 0 0;
  border-style: dashed;
  border-color: #a3bdc4; 
}


/*tabs*/

 .tabs .tab .radioClass{
    display:none;
}
.tabs .tab{
   overflow: hidden;
   width:18%;  
   }
   
   
.tabs .content {
    position: absolute;
    z-index:0;
    opacity:0;
    padding:0;
    top:110px;
    left:33%;
    right:20%;
    height: 67%;
    overflow: auto;
}
.tabs>.tab .radioClass:checked ~ .content {
  z-index:1;
  opacity:1;
  transition: opacity 1s ease;
}
.tabs .tab label {
    display: block;
    color: #443;
  background-color: #5fc7cd;
  border-width: 0.3em;
  border-radius: 25px;
  border-style: outset;
  border-color: #3588A6;
  padding: 0.3em 1.5em 0.2em 0.5em;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
   font-size: 1.2em;
       margin-bottom: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.tabs{
  margin: 3em auto;
  width: 70%;
	max-width: 1033px;
  height: 550px;
	background: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px), url(https://gwynleonterius.neocities.org/images/bgsolid.png);
	box-shadow: inset 0px 0px 15px black,0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #a3bdc4; 
  outline-color: #757575;
  outline-style: inset;
  outline-width: 20px;
  outline-offset: 0;
  padding: 20px;
   overflow: auto;

}
.tabs .tab label:hover{
  background-color: #ceccaa;
  border-color: #98987d;
}


.tabs>.tab .radioClass:checked + label {
    background-color: #8e8d74;
  border-color: #71715c;
  color: black;
    padding: 1;

}

/*GALLERY STYLE*/
/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(300px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 300px;
  max-height: 300px;
  object-fit: contain;
  object-position: bottom;
}