@font-face {
    font-family: "mononoki Nerd Font";
    src: url{media/mononoki.ttf};
    font-size:16px;
    font-weight: normal;
    font-style: normal;
}
h1{
    text-align: center;
}
h2{
    text-align: center;
}
h3{
    text-align: center;
}

body{
    font-size:16px;
}
.box{
    border: 1px;
    border-style: solid;
    width: fit-content; /* or 'auto' for full */
    padding: 25px;
    text-align: center;
    margin: auto;
}
.emph{
    font-size:120%;
}

/*http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

/*https://github.com/kmoerman/css-tabs/blob/master/tabs.css*/
.tab {
  display:flex;
  flex-direction:column;
}

.tab label {
  padding: 5px;
  background-color: black;
  padding: 5px;
  overflow-wrap:break-word;
  max-width:10%;
}

.tab [type=radio]:checked + label {
  background-color: #fea5cd;
}

.tab > [type=radio] {
  display: none;
}

.tab > [type=radio] + label {
  cursor: pointer;
}

.tab > [type=radio]:not(:checked) + label + * {
  display: none;
}
.content {
position:absolute;
left: 15%;
max-width:70%;
bottom: 0;
top: 10%;
}