/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1,
p {
  font-family: 'Space Grotesk', 'Instrument Sans', sans-serif;
  line-height: 1.5;
  color: #000; 
}

h1 {
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 900;
  font-size: 24px;
}

p {
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 16px;
}

@media (min-width: 768px) {
  h1 {
    margin-bottom: 30px;
    margin-top: 40px;
    font-size: 60px;
    line-height: 1.44;
  }
}

/* Layout */
.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

.col-12 {
  padding: 0;
}

.navbar {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .container-main {
    padding-left: 80px;
    padding-right: 80px;
    min-height: 23vh;
  }
  
  .navbar {
    margin-bottom: 80px;
  }
}

/* Logo */
.logo {
  width: 120px;
  height: auto;
}

@media (min-width: 768px) {
  .logo {
    width: auto;
  }
}

/* Buttons */
.btn-primary-alt {
  -webkit-font-smoothing: antialiased;
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: none;
  font-size: 16px;
  line-height: 1.25;
  font-family: 'Space Grotesk', 'Instrument Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  letter-spacing: 1px;
  background: rgb(96, 70, 255);
  color: rgb(239, 237, 255);
  border-radius: 48px;
}

.btn-primary-alt .text {
  position: relative;
}

.btn-primary-alt:hover,
.btn-primary-alt:active {
  text-decoration: none;
  background: rgb(77, 56, 204);
  color: rgb(239, 237, 255);
}

.btn-primary-alt:focus {
  outline: 2px solid rgb(96, 70, 255);
  outline-offset: 2px;
  color: rgb(239, 237, 255);
  text-decoration: none;
}

/* Textarea */
textarea.form-control,
pre {
  max-width: 100%;
  margin-bottom: 40px;
  margin-top: 40px;
  padding: 16px 20px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  background: #f4f2f3;
  color: #444344;
  box-shadow: none;
  white-space:normal;
}

/* Textarea */
input.form-control,
pre {
  max-width: 100%;
  margin-bottom: 5px;
  padding: 20px 20px;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  background: #f4f2f3;
  color: #444344;
  box-shadow: none;
  white-space:normal;
}

@media (min-width: 768px) {
  textarea.form-control,
  pre {
    margin-top: 10px;
  }
}

code {
  color: #333333;
  background-color: #eeeeee;
}

.text-danger {
  color: #e50000;
}

html {
  scroll-behavior: smooth;
}

.stdtxt {
  font-family: "Space Grotesk", "Instrument Sans", sans-serif;
  line-height: 1.5;
  color: #000;
  font-weight: 700;
  font-size: 16px;
}

.icon-column {
  width: 175px;
}

.vl {
  background-image: linear-gradient(#f3f3f3, #f3f3f3);
  background-size: 4px 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }