@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat&display=swap');

body {
font-family: "Calibri";
font-size: 12pt;
background-image: url('images/bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: #1E0D0D;
color: #CECACA;
overflow-y: scroll;
}

a {
color: #BCB8D8;
}

a:hover {
color: #F7BCB7;
}

button {
background-color: transparent;
color: #BCB8D8;
cursor: pointer;
text-decoration: none;
font-weight: bold;
font-size: 12pt;
border: none;
}

#navBar {
background-color: rgba(17, 6, 6, 0.4);
border: 1px solid #555555;
border-bottom: none;
list-style-type: none;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
right: 85%;
top: 2.5%;
max-height: 70%;
width: 12.5%;
z-index: 2;
}

#navBar a {
display: block;
color: #CECACA;
padding: 12px 16px;
text-decoration: none;
text-align: center;
border-bottom: 1px solid #555555;
}

#navBar:last-child {
border-bottom: none;
}

#navBar a:hover {
background-color: #5A3754;
}

#navBar a:active {
background-color: #8C2E3D;
}

tr *:not(a,button,i,label,p,span,sup) {
border: 1px solid #555555;
text-align: center;
}

th {
background-color: #121216;
}

td {
background-color: #262633;
}

h1 {
background-color: #1E0D0D;
font-family: "Playfair Display";
font-optical-sizing: auto;
font-size: 48pt;
font-style: normal;
font-weight: 500;
position: fixed;
left: 0%;
top: -72px;
width: 100%;
padding-top: 72px;
padding-bottom: 48px;
text-align: center;
z-index: 1;
}

h2 {
font-family: "Playfair Display";
font-optical-sizing: auto;
font-size: 32pt;
font-style: normal;
font-weight: 400;
}

h3 {
font-family: "Montserrat";
font-optical-sizing: auto;
font-size: 18pt;
font-style: normal;
font-weight: 500;
}

.smalltext {
font-family: "Montserrat";
font-optical-sizing: auto;
font-size: 9pt;
font-weight: 400;
}

.quoteBlock {
display: inline-block;
margin-left: 4em;
}

.kataText {
font-family: "Montserrat";
font-optical-sizing: auto;
font-size: 9pt;
font-weight: 300;
color: #A57A7A;
}

.subdiv {
position: absolute;
overflow: auto;
left: 17.5%;
width: 80%;
padding-top: 144px;
display: none;
opacity: 0;
}

.subdiv:target {
display: block;
opacity: 1;
}

.icon {
position: fixed;
left: 3%;
bottom: 5%;
height: 7%;
max-height: 130px;
width: auto;
border: 0;
}

.letter {
display: block;
margin: auto;
width: 60px;
height: auto;
}

.number {
display: block;
margin: auto;
width: auto;
height: 60px;
}

.sample {
display: block;
margin: auto;
height: 120px;
width: auto;
}

#gitRev {
font-family: "Montserrat";
font-optical-sizing: auto;
font-size: 9pt;
font-style: normal;
font-weight: 400;
position: fixed;
left: 3%;
bottom: 15%;
}

#lexRibbon th {
width: 24px;
}

#happy {
z-index: 1;
}

#normal {
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
opacity: 1;
z-index: 2;
}

#normal:hover {
opacity: 0;
}