:root {
    --color-main                             : rgb(26, 190, 215);
    --swiper-theme-color                     : rgb(255, 255, 255);
    --swiper-pagination-bullet-inactive-color: transparent;
}

body {
    background-color: rgb(255 255 255);
    font-family     : monospace;
    font-size       : 16px;
}

h1 {
    font-size  : 2.5rem;
    font-weight: 500;
    margin-top : 0.25rem;
}

header {
    padding: 24px 0;
}

header .tagline {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;;
    color: rgb(42, 103, 130);
}

.container {
    max-width : 1140px;
    text-align: center;
    margin    : auto;
}

p {
    max-width: 800px;
    margin   : 0 auto 8px;
    font-size: 0.875rem;
}

p.--has-decoration {
    position  : relative;
    margin-top: 32px;
}

p.--has-decoration::before {
    content         : "";
    position        : absolute;
    top             : -20px;
    left            : 50%;
    transform       : translateX(-50%);
    height          : 4px;
    width           : 224px;
    background-color: var(--color-main);
}

img {
    max-width: 100%;
    height   : auto;
}

footer {
    padding         : 8px 0;
    background-color: rgb(244 244 244);
    font-size       : 0.875rem;
}

footer p {
    text-align: center;
}

.section {
    position: relative;
    padding : 24px 0;
    overflow: auto;
}

.section__decoration {
    position        : absolute;
    z-index         : -1;
    top             : 0;
    left            : 5%;
    width           : 90%;
    height          : 50px;
    background-image: url('../images/dot.png');
}

/* Swiper customization */
.swiper-pagination-bullet {
    opacity: 1;
    border : 2px solid rgb(255, 255, 255);

}

.swiper-button-prev {
    left: 40px;
}

.swiper-button-next {
    right: 40px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 20px;
}