Permeable-Glossary/2.0/style-Copy1.css

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

@font-face {
    font-family: Fluxisch;
    src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
}

@font-face {
    font-family: symbols1;
    src: url(fonts/symbols.woff) format("woff");
}

@font-face {
    font-family: mono;
    src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
}

body {
    font-size: 16pt;
    font-family: mono;        
    margin:0;
}

hr {
    background: black;
    height: 0.1pt;
    margin: 0;
}

h1 {
    font-size: 20pt;
    font-family: Fluxisch; 
    font-style: bold;
    margin-top: 10pt;
    margin-bottom:10pt;
    
}

h2 {
    font-size: 20pt;
    font-family: Fluxisch; 
    font-style: bold;
    margin-top: 10pt;
    margin-bottom:10pt;
    margin-right: 0;
}

p {
    margin-top: 2pt;
    margin-bottom: 2pt;
}

strong {
    font-weight: normal;
}

ul {
    margin: 0%;
    padding: 0%;
}

a {
    font-size: 18pt;
    font-family: mono;   
    color:blue;
    text-decoration:none;
}

.head{
    display:flex;
    justify-content: space-between;
    margin-left: 15pt;
    margin-right: 15pt;

}

.head a{
    margin-top: 10pt;
    margin-bottom:10pt;
}

.description p{
    margin-top: 10pt;
    margin-bottom: 10pt;
    margin-left: 15pt;
    margin-right: 15pt;
    text-indent: 20pt;
}

#sptContainer {
    margin-top: 10pt;
    margin-bottom: 10pt;
    margin-left: 15pt;
    margin-right: 15pt;
    text-indent: 20pt;
}


.question input{
    width:500px;
    font-size: 14pt;
    padding-top: 3pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 3pt;
    margin-left: 15pt;
    margin-right: 2pt;
    margin-top: 14pt;
    color:white;
    background-color:black;
    border-radius: 8pt; 
}


.legend{
    display:flex;
    flex-wrap: wrap;
    margin-left: 15pt;
    margin-right: 15pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.btn{
    background: white;
    font-size: 20pt;
    border-radius: 8pt; 
    border:  1.2pt solid black;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
    padding-top: 3pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 3pt;
    margin-left: 2pt;
    margin-right: 2pt;
    margin-top: 1pt;
    margin-bottom: 1pt;
    cursor: pointer;
    
}

.btn:hover {
    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
}

.btn.active {
    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
}

.btn.snippet {
    background:white;
    font-family: serif;
    font-style: italic;
}

.diffraction{
    display: none;
    flex-wrap: wrap;
    object-fit: contain;
    margin-left: 15pt;
    width: 100%;
}

img{
    width: 11.8%;
}

.words {
/*     -webkit-column-count: 3;
    -moz-column-count: 3;
        column-count: 3;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
        column-width: 400px;
    overflow: hidden; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.3rem;
    margin-top: 10pt;
    margin-left: 15pt;
    margin-right: 15pt;
}

.word {
    display: none;
    margin-top: 7pt;
    margin-bottom: 7pt;
}

.show {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; 
}


.word p{
    order:2;
}

.title {
    /* border: solid 0.3pt; */
    font-size: 20pt;
    font-weight:bold;
    font-family: Fluxisch;
    padding: 0%;

    /* width: 20%; */
    margin-top: -0.5pt;
    margin-left: 2vw;
    margin-right: 0.5vw;
    margin-bottom: 0;

    text-decoration: underline 1pt;     
    text-decoration-color:black; 
}

.symbol {
    order:1;
    color:black;
    margin-top: -5pt;
    font-family: symbols1;
    font-size: 20pt;
    cursor: pointer;
    transition: color .5s;
}