@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --yellow: #ffecb3;
    --yellow-darker: #fad875;

    --turquoise: #a1d4bf;
    --turquoise-darker: #81b6a0;

    --green: #c6deaf;
    --green-darker: #aad784;

    --pink: #f9cad6;
    --pink-darker: #fbb2c6;
    --pink-darkest: #fe8ca8;

    --light: #f4f5f7;
    --lighter: #eee;
    --grey: #8e8e8e;
    --darker: #666;
    --dark: #322e25;
}

* {
    font-family: "Rubik", sans-serif;
}

html {
    font-size: 15px;
}

@media (max-width: 1199px) {
    html {
        font-size: 13px;
    }
}

/* Sizing */

.w-40 { width: 40%; }
.w-49 { width: 49%; }
.w-80 { width: 80%; }

.w-3rem  { width: 3rem; }
.w-10rem { width: 10rem; }
.w-12rem { width: 12rem; }
.w-15rem { width: 15rem; }
.w-20rem { width: 20rem; }
.w-25rem { width: 25rem; }
.w-40rem { width: 40rem; }

.h-5rem { height: 5rem; }
.h-6rem { height: 6rem; }
.h-7rem { height: 7rem; }
.h-8rem { height: 8rem; }
.h-9rem { height: 9rem; }
.h-10rem { height: 10rem; }

@media only screen and (min-width: 992px) {
    .w-lg-25 { width: 25%; }
    .w-lg-40 { width: 40%; }
    .w-lg-80 { width: 80%; }

    .w-lg-3rem  { width: 3rem; }
    .w-lg-10rem { width: 10rem; }
    .w-lg-12rem { width: 12rem; }
    .w-lg-15rem { width: 15rem; }
    .w-lg-20rem { width: 20rem; }
    .w-lg-25rem { width: 25rem; }
    .w-lg-40rem { width: 40rem; }
    
    .h-lg-5rem  { height: 5rem; }
    .h-lg-6rem  { height: 6rem; }
    .h-lg-7rem  { height: 7rem; }
    .h-lg-8rem  { height: 8rem; }
    .h-lg-9rem  { height: 9rem; }
    .h-lg-10rem { height: 10rem; }
}

.mt-1rem { margin-top: 1rem; }
.mt-2rem { margin-top: 2rem; }
.mt-3rem { margin-top: 3rem; }
.mt-4rem { margin-top: 4rem; }
.mt-5rem { margin-top: 5rem; }
.mt-6rem { margin-top: 6rem; }
.mt-7rem { margin-top: 7rem; }
.mt-8rem { margin-top: 8rem; }
.mt-9rem { margin-top: 9rem; }

@media only screen and (min-width: 992px) {
    .mt-lg-4rem { margin-top: 4rem; }
    .mt-lg-5rem { margin-top: 5rem; }
    .mt-lg-6rem { margin-top: 6rem; }
    .mt-lg-7rem { margin-top: 7rem; }
    .mt-lg-8rem { margin-top: 8rem; }
    .mt-lg-9rem { margin-top: 9rem; }
}

@media only screen and (min-width: 768px) {
    .mt-md-4rem { margin-top: 4rem; }
    .mt-md-5rem { margin-top: 5rem; }
    .mt-md-6rem { margin-top: 6rem; }
    .mt-md-7rem { margin-top: 7rem; }
    .mt-md-8rem { margin-top: 8rem; }
    .mt-md-9rem { margin-top: 9rem; }
}

.mt-neg-3rem { margin-top: -3rem; }
.mt-neg-5rem { margin-top: -5rem; }
.mt-neg-6rem { margin-top: -6rem; }
.mt-neg-10rem { margin-top: -10rem; }

.mb-neg-5rem { margin-bottom: -5rem; }
.mb-neg-10rem { margin-bottom: -10rem; }

/* Special sizing */

.min-w-73rem {
    min-width: 73rem;
}

/* Text */

.uppercase { text-transform: uppercase; }

.fs-smaller1 { font-size: .9rem; }
.fs-smaller2 { font-size: .8rem; }

.fs-bigger1 { font-size: 1.1rem; }
.fs-bigger2 { font-size: 1.2rem; }
.fs-bigger3 { font-size: 1.3em; }
.fs-bigger4 { font-size: 1.4rem; }
.fs-bigger5 { font-size: 1.5rem; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.text-grey { color: var(--grey); }
.text-darker { color: var(--darker); }

.text-black { color: #000 !important; }

@media only screen and (min-width: 992px) {
    .text-lg-nowrap { white-space: nowrap; }
}

/* Border radius */

.rounded-1rem { border-radius: 1rem; }
.rounded-2rem { border-radius: 2rem; }
.rounded-3rem { border-radius: 3rem; }

@media only screen and (min-width: 992px) {
    .rounded-lg-1rem { border-radius: 1rem; }
    .rounded-lg-2rem { border-radius: 2rem; }
    .rounded-lg-3rem { border-radius: 3rem; }

}

/* Shadows */

.box-shadow-none { box-shadow: none !important; }

/* Flex */

.flex-1 { flex: 1; }

.gap-1rem { gap: 1rem; }
.gap-2rem { gap: 2rem; }

/* Outline */

.outline-none {
    outline: none !important;
}

/* Overflow */

.overflow-x-auto {
    overflow-x: auto;
}

/* Special text */

.link-light:link, .link-light:visited {
    color: var(--light);
    text-decoration: none;
}

.link-light:hover, .link-light:active {
    color: var(--yellow) !important;
    text-decoration: none;
}

/* Special backgrounds */

.transparent {
    background-color: transparent !important;
}

.grad-yellow {
    background: linear-gradient(
        80.46deg, 
        var(--yellow) 28.36%, 
        var(--yellow-darker) 73.74%
    );
}

.grad-turquoise {
    background: linear-gradient(
        222.93deg,
        var(--turquoise) 3.63%,
        var(--turquoise-darker) 96.97%
    );
}

.grad-green {
    background: linear-gradient(
        183.4deg,
        var(--green) 5.92%,
        var(--green-darker) 97.16%
    );
}

.grad-pink {
    background: linear-gradient(
        201.22deg,
        var(--pink) 4.14%,
        var(--pink-darker) 95.42%
    );
}

.solid-pink-darkest {
    background-color: var(--pink-darkest);
}

.solid-white {
    background: #fff;
}

.solid-light {
    background: var(--light);
}

.solid-lighter {
    background: var(--lighter);
}

.solid-grey {
    background: var(--grey);
}

.solid-darker {
    background: var(--darker);
}

.solid-dark {
    background: var(--dark);
}

/* Special borders */

.border-none {
    border: none;
}

@media only screen and (min-width: 992px) {
    .border-lg-underline {
        position: relative;
        display: inline-block;
        z-index: 1;
    }
    
    .border-lg-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: .4rem;
        width: 100%;
        height: .7rem;
        background-color: #fff;
        z-index: -1;
    }
}

/* Special stripes */

.striped-container {
    position: absolute;
    width: 98%;
    max-width: 100rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 15rem;
    z-index: -100;
}

.stripe {
    width: 100%;
    height: 4rem;
    background-color: var(--light);
}