Permeable-Glossary/style.css

:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --links-color: blue;
  --body-text-color: rgb(20, 20, 20);
  --action-color: rgb(31, 31, 31);
  --situation-color: aqua;
  --logic-color:orange;
  --proposition-color: rgb(255, 115, 96);
  --hyperlink-color: pink;
  --process-color: rgb(81, 241, 167);
  --language-color: violet;
  --agent-color: purple;
  --tool-color: lightblue;
  --form-color: gold;
}

@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: var(--body-text-color);
    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: var(--links-color);
    text-decoration:none;
}

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

}

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

.description{
    margin-bottom: 20pt;
}

.description p{
    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: 18pt;
    padding-top: 3pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 3pt;
    margin-left: 15pt;
    margin-right: 2pt;
    margin-top: 2pt;
    color:rgb(3, 3, 3);
    background-color: white;
    border:  1.2pt solid 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: 18pt;
    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 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 0;
    margin-top: 10pt;
    margin-left: 0;
    margin-right: 0;
}

.word {
    display: none;
    padding-top: 15pt;
    padding-bottom: 15pt;
    padding-left: 20pt;
    padding-right: 20pt;
}

.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;
}

.action{
    box-shadow: inset 0 0 10px 2px var(--action-color);
}

.situation{
    border-top: var(--situation-color) 3pt solid;
}

.logic{
    border-bottom: var(--logic-color) 3pt solid;
}

.proposition {
    border-left: var(--proposition-color) 3pt solid;
}

.hyperlink {
    border-radius: 0px 0px 70px 0px / 0px 0px 72px 1px;
}

.form {
    border-right: var(--form-color) 3pt solid;
}

.tool {
    box-shadow: 0 0 10px 2px var(--tool-color);
}

.language {
    text-shadow: 0 0 2px var(--text-color);
}