* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-left {
  width: 30%;
  height: 100vh;
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start;
  padding-right: 20px;
  margin-top: -15px;
}

.flex-right {
  width: 70%;
}


body {background-color: #afada8; margin: 15pt;}

h1 {font-family: "Arial Black", sans-serif; font-size: 32px; line-height: 32px;}

h2 {font-family: "Arial Black", sans-serif; font-size: 18px; line-height: 18pt;}

p {font-family: "Inconsolata", monospace; font-size: 11px; color: white; line-height: 1.6;}

#columns {font-family: "Inconsolata", monospace; font-size: 11px; color: white; line-height: 1.6; columns: 2; column-gap: 15px;}

a {color: white; text-decoration: none;}

a:hover {color: black;}

hr {border: 1px solid black; margin-top: 30px; margin-bottom: 30px;}

img {max-width: 100%;}

nav {line-height: 14pt;}

.footer {font-family: "Inconsolata", monospace; font-size: 11px; color: white; line-height: 1.6; position: absolute; width: 100%; bottom: 0%;}

.mobile {display: none;}

@media (max-width: 850px) {
  .flex-right, .flex-left {
    height: auto;
    position: relative;
    flex: 100%;
    padding-right: 0px;
  }
    .footer {display: none;}
    .mobile {display: block; font-family: "Inconsolata", monospace; font-size: 11px; color: white; line-height: 1.6;}
    #columns {columns: 1;}
    
    .drag {display: none;}
}