body
{
font-family: arial;
font-size: 13px;
color: #FFFFFF;
background-color: #000000;
background-image: url(https://kaiteng.neocities.org/tausta3.png);
background-size: auto;
background-repeat: repeat;
}

#textarea {
  background: rgba(0, 0, 0, 0.7);
  font-family: arial;
  font-size: 13px;
  color: #FFFFFF;
  padding:8px;
  height:580px;
  overflow: auto;
}

.head {
font-family: arial;
font-size: 16px;
font-weight: bold;
color: #414785;
text-transform: normal;
text-align: center;
border-bottom: 1px solid #D6D6F4;
letter-spacing: 0px;
}

#head {
border-bottom: 1px dashed #CED7E4;
letter-spacing: 0px;
font-family: 'Abel';
font-size: 16px;
font-weight: bold;
text-transform: normal;
}

h1 {
  border-bottom: 1px dashed #CED7E4;
  letter-spacing: 0px;
  font-family: 'Abel';
  font-size: 16px;
  font-weight: bold;
}

h2 {
  border-bottom: 1px dotted #CED7E4;
  letter-spacing: 0px;
  font-family: 'Abel';
  font-size: 14px;
  font-weight: bold;
}

A:link
{color: #A9BCF5;
text-decoration: none;
cursor: crosshair;
font-size: 13px;
}

A:visited
{color: #A9BCF5;
text-decoration: none;
cursor: crosshair;
font-size: 13px;
}

A:active
{color: #A9BCF5;
text-decoration: none;
cursor: crosshair;
font-size: 13px;
}

A:hover
{color: #FFFFFF;
text-decoration: underline overline;
cursor: crosshair;
font-size: 13px;
}

figure {
    float: right;
    display: flex;
    flex-flow: column;
    margin: auto;
    max-width:150px;
    padding:3px;
}

figcaption {
    color: #000000;
    padding: 3px;
    text-align: center;
}

#side {
    position: -webkit-sticky;
    position: fixed;
    bottom: 0;
    right: 0; 
    max-width:450px;
    width:40vw;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color:transparent;
  color:#ffffff;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 5px;
  display: none;
  overflow: hidden;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 16px;
  color: white;
  float: left;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}

/*.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}-->*/

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
}

:root {
  --color-1: #186cb8;
  --color-2: #2a9a9f;
  --color-3: #f1b211;
  --color-4: #e83611;
  --color-5: #f9002f;
}

.ex1 {
  font-size: 25px;
  font-weight:bold;
  font-family: 'Roboto';
  text-shadow: 4px 4px 4px #000;
line-height: 50%;
}

.ex2 {
  font-size: 20px;
  text-shadow: 4px 4px 4px #000;
  line-height: 50%;
}

h3 {
  font-size: 30px;
  font-family: 'Roboto';
  padding:0px;
}