* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  font-family: 'Inter';
}

.outer-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inner-cont {
  width: 80%;
}

h1 {
  font-size: x-large;
  margin-right: auto;
}

.card-container {
background: white;
width: 70%;
height: 50%;
display: flex;
flex: 1;
flex-flow: wrap row;
justify-content: left;
align-items: space-around;
align-content: left;
max-width: 1000px;
min-width: 33%;
}

.card {
  width: 200px;
  height: 200px;
  margin: 30px;
  padding: 30px;
  border-radius: 10%;
  flex-direction: column;
  align-content: space-between;
  text-shadow: .2px 1px 1px gray;
}

.white {
  background-color: white;
  color: black;
}

.black {
  background-color: black;
  color: white;
  text-shadow: none;
}

.card-header {
    font-size: 17px;
    font-weight: bold;
}

.red {
  color: #e75074;
}

.red-box {
  background-color: hsl(0, 61%, 83%);
  padding-left: 5px;
  box-shadow: 0px 2px 1px gray;
  text-shadow: none;
}

.card-body {
  font-size: 12px;
  padding-top: 30px;
}

.border {
  border-style: ridge;
  border-color: gray;
  border-width: .5px;
}

.border-blue {
  border-style: ridge;
  border-color: blue;
  border-width: 1px;
}

.empty {
  width: 15%;
}