sebastiano-guerriero

/* -------------------------------- 

Typography

-------------------------------- */

:root {
    --font-primary: sans-serif;
    --font-secondary: serif;

sebastiano-guerriero

.parent {
  height: 200px;
  text-align: center;
  
  .child {
    line-height: 200px;
  }
}

sebastiano-guerriero

.child {
  width: 40%;
  max-width: 800px;
  margin: 0 auto; // align the item on the x-axis
}

sebastiano-guerriero

.parent {  
  position: relative;
  
  .child {
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

sebastiano-guerriero

.parent {
  position: relative;
  
  .child {
    width: 200px;
    height: 200px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
  }

sebastiano-guerriero

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  
  .child {
    width: 40%;
  }
}

sebastiano-guerriero

.parent {
  display: flex;
  
  .child {
    margin: auto;
    align-self: center;
  }
}

sebastiano-guerriero

.flex {
    display: flex;

    .align-center {
        margin: auto;
        align-self: center;
    }
    
    .align-left {
        margin-right: auto;

sebastiano-guerriero

:root {
    --color-primary: #4D84F4;
    --color-secondary: #f5414f;

    --color-text: #2e2e31;
    --color-border: #d1d0d2;

    --color-success: #88c459;
    --color-error: #f5414f;
    --color-warning: #ffd137;

sebastiano-guerriero

:root {
    --blue: #4D84F4;
    --red-brand: #f5414f;

    --black: #2e2e31;
    --gray: #d1d0d2;

    --green: #88c459;
    --red: #f94747;
    --yellow: #ffd137;