@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap");

#code-area {
  display: block;
  overflow: hidden;
  resize: none;
  font-family: "Space Mono", monospace;
  /*'JetBrains Mono', monospace;*/
  -webkit-box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
  -moz-box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
  box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
  margin-bottom: 3%;
}

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23a2d9ff' fill-opacity='1' d='M0,96L40,128C80,160,160,224,240,218.7C320,213,400,139,480,128C560,117,640,171,720,165.3C800,160,880,96,960,69.3C1040,43,1120,53,1200,53.3C1280,53,1360,43,1400,37.3L1440,32L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}

.container {
  min-height: 70%;
  height: auto !important;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

.header {
  margin-top: 3%;
  margin-bottom: 2%;
  font-family: "Archivo Black", sans-serif;
}

.explanation-text {
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.3rem;
}

#execute-btn,
#reset-btn,
#clear-btn {
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.3rem;
  float: right;
  -webkit-box-shadow: 7.5px 7.5px 8.5px -0.5px #ccc;
  -moz-box-shadow: 7.5px 7.5px 8.5px -0.5px #ccc;
  box-shadow: 7.5px 7.5px 8.5px -0.5px #ccc;
  margin-bottom: 10%;
}

#terminal-area {
  font-family: "JetBrains Mono", monospace;
  -webkit-box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
  -moz-box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
  box-shadow: 7.5px 7.5px 8.5px -0.5px #888888;
}

.rounded-pill {
  margin-left: 1%;
  margin-right: 1%;
  display: inline-block;
}

.footer-basic {
  padding: 40px 0;
  background-color: #ffffff;
  color: #4b4c4d;
}

.footer-basic .social {
  text-align: center;
  padding-bottom: 25px;
}

.social > a > i {
  color: #a2d9ff;
}

.footer-basic .social > a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin: 0 8px;
  font-size: 2.6rem;
  color: inherit;
  opacity: 1;
}

.footer-basic .social > a:hover {
  opacity: 0.75;
}

.footer-basic .copyright {
  margin-top: 15px;
  text-align: center;
  font-family: "Didact Gothic", sans-serif;
  font-size: 1.4rem;
  color: #aaa;
  margin-bottom: 0;
}

@media screen and (max-width: 500px) {
  #code-area {
    margin-bottom: 15%;
  }

  .explanation-text {
    margin-bottom: 10%;
  }

  .footer-basic {
    margin-top: 10%;
  }
  .header {
    margin-top: 5%;
    margin-bottom: 6%;
    font-family: "Archivo Black", sans-serif;
  }
}