main StyleSheet

style.css

@@ -0,0 +1,201 @@
+: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;
+}
+
+
+
+
+