/* I'm thinking darkmode pastel? */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* Header sizes */
h1 {
    color: #e7b3c8;
    
    font-size: 50px;
}
h2 {
    color: #e7b3c8;
    font-size: 30px;

    /* Make h2s a center box */
    margin-top: 50px;
    /* border: 1px solid #e7b3c8; */
    background-color: #3f3237;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 10px 28px 78px -36px rgba(0,0,0,0.9);
}
h3 {
    color: #EDBBB4;
    font-size: 23px;
}

h3,h4 {
    margin-top: 40px;
}

h4 {
  color: #e8c7c3;
  font-weight: bold;
}

h5 {
  color: #e8c7c3;

}


/* regular text */
p,li,figcaption,td {
    font-size: 18px;
    color:#f3e3f3;
}
table td, table th {
  /* the bs css for tables is ironclad for some reason? */
  color:#f3e3f3 !important;
}




figure {
  
  /* Thsi fixes figure captions  */
  flex-direction: column;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;


  overflow: auto;

  > * {
    max-width: 100%;
  }
}

/* td, th {
    color:#f3e3f3 !important;
} */



.fade-in {
  opacity: 0;
  animation: fade-in 200ms ease-in-out forwards; 
}

@keyframes fade-in {
  from {
    scale: 0;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.alert {
  box-shadow: 10px 13px 33px -3px rgba(0,0,0,0.45);
  border-left-width: 5px;
}

.raw-inline > code {
  border: 1px solid var(--bs-secondary);
  border-radius: 3px;
  background-color: rgb(22, 23, 25);
  box-shadow: 10px 13px 33px -3px rgba(0,0,0,0.45);

  padding: 0px 5px;
}




a, a:link, a:active {
  color: #EDBBB4;
}

/* Visited link */
/* a:visited {
  color: purple;
} */

/* Hovered link */
a:hover {
  color: #b7918c;
}


.subtext {
  color: #9c919c;
  font-size: 14px;
}


.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;

    /* justify-content: center; 
     justify-items: center; */

}