/* use border-box pretty much everywhere */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* line height */

.line-height {
  line-height: 1.5;
}

/* background colors */

.bg-light-blue {
  background-color: rgb(113, 113, 255);
}

.bg-white {
  background-color: rgba(255, 255, 255, 0.952);
}

.bg-light-gray {
  background-color: rgb(201, 199, 199);
}

/* text color */

.text-white {
  color: white;
}

/* text align */

.text-center {
  text-align: center;
}

/* fonts */

.my-font {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* font size */

.font-size-4 {
  font-size: 1rem;
}

.font-size-6 {
  font-size: 1.5rem;
}

.font-size-8 {
  font-size: 2rem;
}

/* margin */

.m-auto {
  margin: auto;
}

.m-4 {
  margin: 1rem;
}

.m-16 {
  margin: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

/* padding */

.p-4 {
  padding: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

/* width and height */

.w-fit {
  width: fit-content;
}

.w-50-vw {
  width: 50vw;
}

@media screen and (max-width: 600px) {
  .w-50-vw {
    width: 100vw;
  }
}

.w-full {
  width: 100%;
}

.fit-image {
  max-height: 400px;
  width: auto;
}

@media screen and (max-width: 600px) {
  .fit-image {
    max-width: 95%;
    height: auto;
  }
}

.center-image {
  display: block;
  margin: auto;
}

.max-w-100-percent {
  max-width: 100%;
}

.h-full-special {
  height: calc(64px + 50wh);
}

@media screen and (max-width: 600px) {
  .h-full-special {
    height: fit-content;
  }
}

.h-full {
  height: max-content;
}

.h-max-height-100 {
  max-height: 100%;
}

@media screen and (max-width: 600px) {
  .h-full {
    max-height: none;
    min-height: fit-content;
  }
}

.square-mobile {
  aspect-ratio: auto;
}

@media screen and (max-width: 600px) {
  .square-mobile {
    aspect-ratio: 1 / 1 ;
  }
}

.h-auto {
  height: auto;
}

.max-h-100-percent {
  max-height: 100%;
}

.max-h-400-px {
  max-height: 400px;
}

/* flex box */

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

@media screen and (max-width: 600px) {
  .flex-row {
    flex-direction: column;
  }
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* display property */

.block {
  display: block;
}

.list {
  list-style: circle;
  width: max-content;
  margin: auto;
  padding: 1rem;
}