/***********************************/
/* Content component for container */
/***********************************/

section>div {
  background-color: rgba(var(--foreground), .3);
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 10vh 10vw;
  width: 100%; }


@media (max-width: 800.00px) {

  section>div {
    flex-direction: column;
    padding: 5vh 5vw 5vh 5vw; } }



/************************************/
/* Elements for multiple components */
/************************************/

section>div>h1 {
  color: rgba(var(--color-pink-dark), 1);
  font-family: 'SignPaint';
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 3rem;
  text-shadow: .1rem .1rem rgba(var(--foreground), 1);
  transition: all 300ms ease-in-out;
  width: 100%; }


html.night section>div>h1 {
  color: rgba(var(--color-pink-lite), 1);
  text-shadow: .1rem .1rem rgba(var(--background), 1); }


@media (max-width: 800.00px) {

  section>div>h1 {
    text-align: center;
    font-size: 4rem;
    line-height: 4rem; } }



/***********************************/
/* Content component for container */
/***********************************/

section>div>p {
  display: flex;
  color: rgba(var(--color-blue-dark), 1);
  flex: 1;
  font-family: 'Roboto';
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7rem;
  text-shadow: .1rem .1rem rgba(var(--color-blue-dark), .25);
  transition: color 300ms ease-in-out; }


html.night section>div>p {
  color: rgba(var(--color-blue-lite), 1); }


@media (max-width: 800.00px) {

  section>div>p {
    text-align: center; } }