:root {
  --link: #000;
  --purple: #BB85AB;
  --color: #464646;
  --green: #B0FFDF;
}


body {
  background: #fff;
  padding-bottom: 2rem;
  color : 	var(--color);

  font-family: 'Roboto', sans-serif;
  font-size: 17px; 
  font-weight: 300; 
  line-height: 30px; 
 
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow-x: hidden;
}

a:not(.btn):not(.img-link) {
  text-decoration: none;
  color: var(--color);
  border-bottom: 2px solid var(--purple);
}
a:not(.btn):not(.img-link):hover {
  color:var(--green);
  background: var(--purple);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}

.btn-small {
  font-size: 12px;
  padding: 1px 6px;
  margin-right: 1em;
  border-radius: 5px;
}


a.btn-git {
  color: var(--purple);
  background-color: #FFF;
  border: 1px solid var(--color);
}

a.btn-git:hover {
  background-color: var(--purple);
  color: var(--green);
}

a.btn-dash {
  color: var(--purple);
  background-color: #FFF;
  border: 1px solid var(--color);
}

a.btn-dash:hover {
  background-color: var(--purple);
  color: var(--green);
}


h1{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--purple);
  font-family: 'Permanent Marker', cursive;
}

h2{
  margin-top: 3rem;
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  color: var(--purple);
}


.float-left{
  clear: left;
}

.section-padding {
  padding: 1rem 0;
}

.container{
  max-width: 60em;
}

.logo{
  font-family: 'Permanent Marker', cursive;
  font-size: 2rem;
  color: var(--green);
}

.error{
  font-size: 1.5rem;
  line-height: 3rem;
  padding-top: 0px;
}
.error-title{
  text-align: center;
}

#Layer_2{
  padding-top: 0px;
  width: 200px;
}

code.language-bash{
  font-family: 'Fira Mono', monospace;
  font-weight: bold;
  color: var(--purple);
}

pre.command-line{
  box-sizing: border-box;
  overflow-x: auto;
  display:block;
  font-family: 'Fira Mono', monospace !important;
  padding: 10px 20px;
  overflow:auto;
  margin: 20px auto;
  width: 90%;
  background-color: #d7f8de99;
  border-radius: 15px;
  border: 1px solid #b7ddbf;
}

.back{
  padding-top: 5px;
  padding-left: 5px;
  font-family: 'Permanent Marker', cursive;
  font-size: 1.5rem;
}

.back a{
  border-bottom: 3px black;
}

.alert-warning{
  box-sizing: border-box;
  overflow-x: auto;
  display:block;
  padding: 10px 20px;
  overflow:auto;
  margin: 20px auto;
  width: 90%;
  border-radius: 15px;
  background-color: #F8F1AE88;
}

.subtitle{
  padding-left: 1rem;
  font-style: italic;
  text-align: center;
}

.container {
  max-width: 60em;
  margin: auto;
}


/* styles.css */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
  gap: 5px;
}
.card {
  /* border: 1px solid #ccc; */
  padding: 10px;
  text-align: left;
}