* {
  box-sizing: border-box;
}

body {
background-color: rgb(112, 103, 103);
display: flex;
justify-content: center;
width: 100%;
}

.mainContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.page-title-card-title {
  vertical-align: top;
  height: 100%;
  width: 100%;
  position: relative;
  font-size: 70px;
  margin-top: 0px;
  margin-left: 5%;
  line-height: 7px;
  text-align: left;
}

.page-title-card-title p{
  margin-top: 20px;
  margin-bottom: 60px;
}

.start {
color: aliceblue;
font-family: Courier, monospace;
}

/* Styling specific to an index card */
.card{
font-family: Courier, monospace;
background-color: white;
background: repeating-linear-gradient(white, white 25px, #9198e5 26px, #9198e5 27px);
background-position-y: 34px;
height: 300px;
width: 500px;
padding: 0;
margin-top: 50px;
margin-right: 15px;
}

.titleCardContent {
  font-family: 'Odibee Sans', cursive;
  display: flex;
  flex-direction: row;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

.crystalImageContainer {
  width: 20%;
  height: 60%;
  margin-right: 20%;
  margin-top: 2%;
}

.card header {
background: linear-gradient(white, white 33px, pink 35px, pink 36px);
height: 36px;
}
.card-title {
position: relative;
left: 10px;
top: 8px;
font-size: 30px;
font-weight: bold;
}

.card-text {
  position: relative;
  top: 30px;
  font-size: 18px;
  margin: 0 20px;
  line-height: 27px;
}

.card-title-small {
  font-size: 15px;
  position: relative;
  left: 10px;
  top: 6px;
  font-weight: bold;
}

.card-text-medium {
  font-size: 14px;
  position: relative;
  left: 10px;
  top: 0px;
}

.card-text-small {
  position: relative;
  top: 0px;
  font-size: 9px;
  margin: 0 8px;
  line-height: 27px;
}

.attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 200px;
}

/* twitter badge */

.twitter {
position: fixed;
display: block;
right: 12px;
bottom: 12px;
}
.twitter svg {
width: 32px;
height: 32px;
fill: rgb(66, 239, 255);
border: none;
}