.flexing
	.section.section--yellow
			h3.title Work
	.section.section--pink
			h3.title About
	.section.section--green
			h3.title Contact

$yellow: #eac435;
$pink: #e40066;
$green: #03cea4;

.flexing {
  display: flex;
  flex-direction: column;
  height: 100vh;

  @media screen and (min-width: 1000px) {
    flex-direction: row;
  }
}

.section {
  flex: 1;
  position: relative;
  transition: 0.5s ease;

  &--yellow {
    background-color: $yellow;
  }

  &--pink {
    background-color: $pink;
  }

  &--green {
    background-color: $green;
  }

  &:hover, &:active, &:focus {
    flex: 3;

    .title {
      transform: translate(-50%, -50%) rotate(0);
      
      @media screen and (min-width: 1000px) {
        transform: translate(-50%, -50%) scale(1.25);
      }
    }
  }

  .title {
    font-family: "Fredoka One";
    font-size: 5rem;
    left: 50%;
    margin: 0;  
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s ease;

    @media screen and (min-width: 1000px) {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
}