Permeable-Glossary/style.css

:root {
  --blue: blue;
  --white: #e4e5e2;
  --light-yellow: #ffffcc;
  --silver: #999999;
  --links-color: #3366ff;
  --body-text-color: #3b3b3b;
  --action-color: #3366ff;
  --situation-color: #66cc66;
  --logic-color:#ff9933;
  --proposition-color: #ff6633;
  --hyperlink-color: #cc3333;
  --process-color: #66cc99;
  --language-color: #ffcc66;
  --agent-color: #cc3333;
  --tool-color: #4b2f2e;
  --form-color: #003399;
}

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

@font-face{
    font-family: Picnic;
    src: url(fonts/PicNic-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;
    background-color: var(--white);
    color: var(--body-text-color);
}

h1 {
    font-size: 23pt;
    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;
}

a {
    font-size: 18pt;
    font-family: mono;   
    color: var(--links-color);
    text-decoration:none;
}

.guide{
    display:none;
}

.head{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20pt;
    padding-right: 15pt;
    border-bottom: 1.6pt solid white;

}

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

#title{
    margin-top: 17pt;
}

.question input{
    width:10em;
    font-size: 16pt;
    padding-top: 3pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 3pt;
    margin-left: 15pt;
    margin-right: 2pt;
    margin-top: 10pt;
    color:var(--body-text-color);
    background-color: var(--white);
    border:  1.8pt solid white;
    border-radius: 8pt; 
}

.description{
    display: flex;
    justify-content:flex-start;
    align-items: start;
    border-bottom: 1.6pt solid white;
}

.description p{
    width: 100%;
    margin-bottom: 10pt;
    padding-left: 20pt;
    padding-right: 15pt;
    text-indent: 20pt;
}

#intro {
    width: 70%;
    padding-top: 10pt;
    padding-right: 50pt;
    border-right:1.6pt solid white;
}

#intro p{
    text-indent: 20pt;
}

#panel {
    width: 30%;
}

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

.btn {
    display: flex;
    align-items: center;
    background: var(--white) solid;
    color: var(--body-text-color);
    font-size: 18pt;
    border-radius: 8pt; 
    border:  1.6pt solid white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
    padding-top: 2pt;
    padding-right: 8pt;
    padding-left: 8pt;
    padding-bottom: 2pt;
    margin-left: 2pt;
    margin-right: 2pt;
    margin-top: 2pt;
    margin-bottom: 2pt;
}

.btn:hover {
    box-shadow: 0 0px 10px 0 var(--silver), 0 0px 10px 0 var(--silver);
    cursor: pointer;
}

.btn.active {
    box-shadow: 0 2px 0px 0px var(--silver), 0 0px 10px 0 var(--silver);
}


.words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 0;
    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: 21pt;
    font-weight:bold;
    font-family: Fluxisch;
    padding: 0%;

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

    text-decoration: underline 1pt;     
    text-decoration-color: var(--body-text-color); 
}

.symbol{
    font-family: symbols1;
}

.symbol-leg {
    color: var(--body-text-color);
    font-family: symbols1;
    font-size: 25pt;
    padding-left: 10pt;
    padding-right: 10pt;
}

.symbol-word {
    color: var(--body-text-color);
    margin-top: -5pt;
    font-family: symbols1;
    font-size: 20pt;
}

.leg_titles{
    display: none;
    font-size: 18pt;
    font-family: mono;
    margin-left: 8pt;
}

.leg_titles.on {
    display: inline;
}

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

@media screen and (min-width: 1400px) {
    
    body{
        font-size: 14pt;
    }
    
    #intro {
        column-count: 2;
        column-gap: 2em;
        /* padding: 1%; */
        margin: 0.5%;
        margin-bottom: 1%;
    }

    .leg_titles{
        font-size: 16pt;
    }

    .btn{
        font-size: 16pt; 
    }

    a{
        font-size: 14pt;
    }


  }