You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

235 lines
3.7 KiB
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;
}