This website is not optimized for mobile view yet...
// Layout

.display-flex {
    display: flex;
}

.display-grid {
    display: grid;
}
// Typography

.font-size-16 {
    font-size: 1.6rem;
}

.font-size-20 {
    font-size: 2.0rem;
}
// Whitespace

.margin-24 {
    margin: 2.4rem;
}

.margin-center {
    margin: 0 auto;
}

Amigo CSS

// Shortcuts

.display-flex-center-both {
    display: flex;
    align-items: center;
    justify-content: center;
}



// Extras

.scroll-smooth {
    scroll-behaviour: smooth;
}
.cursor-pointer {
    cursor: pointer;
}

  
 

 

Flexbox

Amigo CSS has built in classes to help us make layouts using Flexbox. Layout is one of the very important features of any website and Amigo CSS makes creating layouts easy

By definition, flexbox is a layout model that allows us to build (lay out elements in) one-directional layouts.

Amigo CSS Flexbox Layout

// Applied to the flex container .display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .flex-row { flex-direction: row; } //default .flex-row-reverse { flex-direction: row-reverse; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } .flex-justify-start { justify-content: flex-start; } //default .flex-justify-end { justify-content: flex-end; } .flex-justify-center { justify-content: center; } .flex-justify-between { justify-content: space-between; } .flex-justify-around { justify-content: space-around; } .flex-justify-evenly { justify-content: space-evenly; } .flex-align-stretch { align-items: stretch; } //default .flex-align-center { align-items: center; } .flex-align-start { align-items: start; } .flex-align-end { align-items: end; } .flex-align-baseline { align-items: baseline; } .flex-content-start { align-content: flex-start; } .flex-content-end { align-content: flex-end; } .flex-content-center { align-content: center; } .flex-content-between { align-content: space-between; } .flex-content-around { align-content: space-around; } .flex-content-evenly { align-content: space-evenly; } .flex-nowrap { flex-wrap: nowrap; } //default .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } // Applied to the flex items .flex-self-auto { align-self: auto; } //default .flex-self-stretch { align-self: stretch; } .flex-self-start { align-self: start; } .flex-self-end { align-self: end; } .flex-self-center { align-self: center; } .flex-self-baseline { align-self: baseline; } .flex-grow-0 { flex-grow: 0; } //default .flex-grow-1 { flex-grow: 1; } .flex-grow-2 { flex-grow: 2; } .flex-grow-3 { flex-grow: 3; } .flex-shrink-1 { flex-shrink: 1; } //default .flex-shrink-0 { flex-shrink: 0; } .flex-order-0 { order: 0; } //default .flex-order-1 { order: 1; } .flex-order-2 { order: 2; } .flex-order-3 { order: 3; } .flex-order-minus-1 { order: -1; }