:root,
:root.light {
    --left-colour: #f5dcbf;
    --right-colour: #cfdad1;
    --bc-colour: #faf9f6;
    --bg-colour: #7F9190;
    --bg-colour2: #eee;
    --bg-colour3: #4C4E52;
    --highlight-colour: orange;
    --special-colour: limegreen;
    --key-colour: #F4F0D9;
    --modal-colour: #faf9f6;
    color: #4C4E52;
    font-weight: 800;
}

[data-theme = "dark"] {
    --left-colour: #4C4E52;
    --right-colour: #4C4E52;
     --bc-colour: #070504;
    --bg-colour: #B8A598;
    --bg-colour2: #7F9190;
    --bg-colour3: #eee;
     --highlight-colour: #df9c20;
    --special-colour: #51ae51;
    --key-colour: #4C4E52;
    --modal-colour: #4C4E52;
     color: #eee;
    font-weight: 450;
}


html, body {
          background-color: var(--bc-colour);
    color: var(--bg-colour3);
        font-family: verdana;
    font-size: 0.8rem;
    margin: 0 auto;
      }

container {
  align-content: center;
}

h1 {
 text-align: left;
    font-size: 1.2rem;
 color: var(--special-colour);
    font-family: verdana;
}

h2 {
 text-align: left;
     font-size: 0.9rem;
 color: var(--highlight-colour);
    font-family: verdana;
}

h3 {
 text-align: left;
     font-size: 0.8rem;
 color: var(--bg-colour);
    font-family: verdana;
}

h4 {
 text-align: left;
     font-size: 0.9rem;
 color: var(--bg-colour3);
    font-family: verdana;
}


.column1 {
  display: flex;
    background-color: var(--bc-colour);
  flex-direction: column;
  flex-basis: 100%;
     flex: 0.1;
}

.column2 {
  display: flex;
    background-color: var(--bc-colour);
  flex-direction: column;
  flex-basis: 100%;
    max-width: 510px;
     flex: 0.8;
}

.column3 {
  display: flex;
    background-color: var(--bc-colour);
  flex-direction: column;
  flex-basis: 100%;
     flex: 0.1;
}

.row {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
    }

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: var(--bc-colour);
  color: var(--bg-colour);
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
}

/* 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 {
  background-color: var(--left-colour);
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 1rem;
  display: none;
  overflow: hidden;
  background-color: var(--bc-colour);
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 1rem;
  color: white;
  float: right;
  margin-left: 2vw;
}

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