/* Colors */
:root {
    --p-purple: #7f1aab;
    --p-purple-clicked: #4f0f6b;
    --p-darkpurple: #5b137a;
    --p-darkpurple-clicked: #2f0a3f;
    --p-darkblue: #1c3e89;
    --p-darkblue-clicked: #0f224d;
    --p-blue: #2c72b4;
    --p-darkblue-clicked: #1d4c78;
    --p-darkred: #8d1f31;
    --p-darkred-clicked: #3e0d16;
    --p-red: #b4253c;
    --p-red-clicked: #671522;
    --p-black: black;
    --p-black-clicked: #222;
    --p-white: white;
    --p-white-clicked: #ddd;
}

.s-purple { background: #7f1aab; color: black; }
.s-darkpurple { background: #5b137a; color: white; }
.s-darkblue { background: #1c3e89; color: white; }
.s-blue { background: #2c72b4; color: black; }
.s-darkred { background: #8d1f31; color: white; }
.s-red { background: #b4253c; color: black }
.s-black { background: black; color: white; }
.s-white { background: white; color: black; }

/* | 1 | */

.s-full {
    width: 100vw;
    height: 400px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.s-full-img {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* | 2 | */

.s-01 { display: flex; }

.s-img, .s-text {
    width: 50vw;
    height: 400px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.s-text h1 { margin-bottom: 0; }
.s-img img { height: 70%; position: relative; }
.s-bR { border-bottom-right-radius: 20px; border-top-right-radius: 20px; }
.s-bL { border-bottom-left-radius: 20px; border-top-left-radius: 20px; }

/* | 3 | */

.s-02 {
    width: 100vw;
    display: flex;
    flex-direction: row;
}

.s-3x1 {
    width: calc(100vw / 3);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

/* | 4 | */

.s-03 {
    width: 100vw;
    display: flex;
    flex-direction: row;
}

.s-4x1 {
    width: 35vw;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.s-4x1-gradient {
    background: var(--firstColor);
    background: linear-gradient(90deg, var(--firstColor) 0%, var(--secondColor) 100%);
    height: 400px;
    width: 5vw;
}