@font-face {
        font-family: TechnicRegular;
        src: url(TechnicRegular.ttf);
    }
:root{
    --img1: ;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --gap-size: 2vh;
    --border-rad: 2vh;
    --primary: #101415;
    --secondary: whitesmoke;
    font-family: TechnicRegular;
    --border: .3vh;
    --padding: 1vh;
}
head{
    padding: 0;
}
body{
    display: flex;
    padding: 2.5vh; 
    align-content: space-evenly;
    align-items: start;
    justify-content: center;
    background-color: var(--primary);
    
}
.page{
    background-color: var(--secondary);
    flex-grow: 1;
    height: 95vh;
    border-radius: var(--border-rad);
    padding: var(--gap-size);
    display: flex;
    gap: var(--gap-size);
    flex-direction: column;
    align-items: space-evenly;
    justify-content: flex-start;
}
.page-two{
    background-color: var(--secondary);
    flex-grow: 1;
    height: 160vh;
    border-radius: var(--border-rad);
    padding: var(--gap-size);
    display: flex;
    gap: var(--gap-size);
    flex-direction: column;
    align-items: space-evenly;
    justify-content: flex-start;
}
.page-three{
    background-color: var(--secondary);
    flex-grow: 1;
    height: 250vh;
    border-radius: var(--border-rad);
    padding: var(--gap-size);
    display: flex;
    gap: var(--gap-size);
    flex-direction: column;
    align-items: space-evenly;
    justify-content: flex-start;
}
.box{
    display: flex;
    border: var(--border) solid var(--primary);
    border-radius: var(--border-rad);
    gap: var(--gap-size);
    flex-direction: column;
    contain: strict;
    flex-grow: 1;
}
.text{
    gap: 0px;
    padding: 3px;
    flex-wrap: 1;
    flex-grow: 0;
    display: flex;
}
.header{
    display: flex;
    flex-grow: 0;
    flex-wrap: 1;
    height: 15vmin;
    
    display: flex;
    gap: var(--gap-size);
    align-content: flex-start;
    justify-content: space-around;
}
.row2{
    display: flex;
    flex-grow: 1;
    display: flex;
    gap: var(--gap-size);
    align-content: space-around;
    align-items: space-around;
    justify-content: flex-start;
}
.akh{
    flex-grow: 0;
    flex-wrap: 1;
    min-width: 25vmin;
    background-image: url(logo.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}
.sheet{
    flex-grow: 0;
    min-width: 15vmin;
    padding: calc(var(--gap-size)/4);
    align-items: space-evenly;
    justify-content: flex-start;
}
.quarter{
    font-size: .25in;
}
.half{
    font-size: .5in;
}
.eigth{
    font-size: .125in;
}
.textbox{
    flex-grow: 1;
    background-color: blueviolet;
    justify-content: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 0;
    flex-wrap: 0;
}
.title{
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-wrap: 0;
    row-gap: 0;
    min-width: 60vmin;
    white-space: nowrap;
    
}
.img{
    background-size: cover;
    background-position: center;
    padding: calc(var(--gap-size)/2);
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 1;
}
.caption{
    display: flex;
    border: var(--border) solid var(--primary);
    border-radius: calc(var(--border-rad) - calc(var(--gap-size)/2));
    background-color: var(--secondary);
    gap: var(--gap-size);
    flex-direction: column;
    flex-grow: 0;
    padding: var(--padding);
    align-items: center;
}
.captionb{
    display: flex;
    border: var(--border) solid var(--primary);
    border-radius: calc(var(--border-rad) - calc(var(--gap-size)/4));
    background-color: var(--secondary);
    gap: var(--gap-size);
    flex-direction: column;
    padding: var(--padding);
    align-items: flex-start;
}
.hor{
    flex-direction: row;
}
.wide{
    flex-grow: 2;
}
.med{
    flex-grow: 1.25;
}
.button-a{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vh;
    text-align: center;
}
#title-1{
    font-size: 2.5cqh;
}
.button-a:hover{
    background-image: linear-gradient(45deg, var(--primary) 10%, var(--secondary) 10%, var(--secondary) 50%, var(--primary) 50%, var(--primary) 60%, var(--secondary) 60%, var(--secondary) 100%);
    background-size: 20px 20px;
    background-repeat: repeat;
}
.bm {
  display: inline;
  padding: .125em 0;
  background: var(--secondary);
  color: var(--primary);
  border-radius: calc(var(--border-rad) - calc(var(--gap-size)/4));
  box-shadow: .25em 0 0 var(--secondary), -.25em 0 0 var(--secondary);
}
.no-border{
    border: 0px;
}
.err{
    justify-content: center;
    align-items: center;
    font-size: 4vh;
}
.smol{
    flex-grow: .5;
}
.detail{
    flex-grow: 1;
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-wrap: 0;
    row-gap: 0;
    padding: 1.5vh;
    padding-top: 1vh;
    flex-basis: 30%;
    white-space: nowrap;
}
.background-overlay{
    width: 100vw;
    height: 100vh;
    background-color: rgba(16, 20, 21);
    background-color: rgba(16, 20, 21, 0);
    margin: -2.5vh;
    position: fixed;
    overflow: hidden;
    z-index: -1;
    transition: 2s, z-index 0s, pointer-events 0s;
    backdrop-filter: blur(0);
    pointer-events: none;
}

.centerer{
    width: 100vw;
    height: 100vh;
    margin: -2.5vh;
    position: fixed;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.main-image{
    display: flex;
    background-image: url(show-data/matilda/img3.jpg);
    border: var(--border) solid var(--primary);
    border-radius: var(--border-rad);
    min-height: 0;
    max-height: 66vmax;
    flex-grow: 1;
    min-width: 0;
    max-width: 80vmax;
    contain: strict;
    background-size: cover;
    background-position: center;
    position: absolute;
    opacity: 0;
    z-index: 4;
    align-content: space-evenly;
    justify-content: space-evenly;
    pointer-events: none;
    transition: 2s, opacity 1s;
}


/*.imgbox{
    display: flex;
    border: var(--border) solid var(--primary);
    border-radius: var(--border-rad);
    gap: var(--gap-size);
    flex-direction: column;
    contain: strict;
    flex-grow: 1;
    background-size: cover;
    background-position: center;
    padding: calc(var(--gap-size)/2);
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 1;
}*/