mixins.scss

@mixin flex-column {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@mixin flex-row {
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

@mixin odd-border {
    border-width: 3px 3px 5px 5px;
    border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
    transform: rotate(-2deg);
}

@mixin even-border {
    border-width: 3px 4px 3px 5px;
    border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
    transform: rotate(2deg);
}

@mixin even-border2{
    border-width: 5px 3px 3px 5px;
    border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
    transform: rotate(2deg);
}

@mixin odd-box-inner{
    margin:15px;
    transform: rotate(-2deg);
  }

@mixin even-box-inner{
    transform: rotate(2deg);
    margin:15px;
    padding:0 5px;
    float:right;
    background:#ddd;
    border:1px solid #222;
    box-shadow:3px 3px 0 #222;
  }

  @mixin grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
  }