* {
   margin: 0;
}

/* HEADER */

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

.header__logo {
   width: 200px;
   padding: 50px;
}


/* BACKGROUNDS */

.grey-bg {
   background-color: #f4f4f4;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d8d8d8' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.blue-bg {
   background-color: #c4e3e8;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23b9dfe5' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.yellow-bg {
   background-color: #f7e9c4;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d2c6a7' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* SEPERATORS */

.seperator {
   height: 10px;
   position: relative;
   background: #fff;
}

.line-absolute-pos {
   position: absolute;
   top: -5px;
   height: 20px;
   width: 100%;
}

.zig-zag {
   background: url("https://sparktoro.com/img/zig-zag-line.svg") repeat-x center center;
}

.wavy-line {
   background: url("https://sparktoro.com/img/wavy-line.svg") repeat-x center center;
}

/* OTHER */

.section {
   height: 300px;
}