Glossary-making-tool/style.css

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

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


body {
    font-size: 18pt;
    font-family: 'Courier New', Courier, monospace;        
    margin:0;
}

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

h1 {
    font-size: 20pt;
    font-family: 'Courier New', Courier, monospace; 
    font-style: bold;
    margin-top: 10pt;
    margin-bottom:10pt;
    
}

h2 {
    font-size: 20pt;
    font-family: 'Courier New', Courier, monospace; 
    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: 'Courier New', Courier, monospace;   
    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{
    display: flex
}

.question input{
    margin-top: 10pt;
    margin-bottom: 10pt;
    margin-left: 15pt;
    margin-right: 15pt;
}

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

.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;
    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: 'Courier New', Courier, monospace;
    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;
    margin-top: 2.5pt;
    margin-left: 2pt;
    margin-right: 2pt;
    font-family: Sans-Serif;
}