* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    scrollbar-color: #ff7faa white;
}

body {
    overflow-x: hidden;
    background-image: url(../images/diamonds.png);
    background-color: #908090;
}

:root {
    /* ----- strokes ----- */
    --strokeBlack: 0 1px black, 1px 0 black, 0 -1px black, -1px 0px black, 1px -1px black, -1px 1px black, 1px 1px black, -1px -1px black;
    --strokeWhite: 0 1px white, 1px 0 white, 0 -1px white, -1px 0px white, 1px -1px white, -1px 1px white, 1px 1px white, -1px -1px white;
    --strokeH2: 0 1px white, 1px 0 white, 0 -1px white, -1px 0px white, 1px -1px white, -1px 1px white, 1px 1px white, -1px -1px white,
                0 2px white, 2px 0 white, 0 -2px white, -2px 0px white, 2px -1px white, -2px 2px white, 2px 2px white, -2px -2px white;

    /* ----- gradient bubbles ----- */
    --gradWhite: linear-gradient(white 0%, hsl(340, 10%, 90%) 50%, hsl(340, 10%, 80%) 51%, hsl(340, 10%, 85%) 100%);
    --gradGrey: linear-gradient(hsl(340, 7.5%, 95%) 0%, hsl(340, 7.5%, 85%) 50%, hsl(340, 7.5%, 65%) 51%, hsl(340, 7.5%, 75%) 100%);

    --gradPink01: linear-gradient(white 0%, hsl(340, 50%, 90%) 50%, hsl(340, 50%, 80%) 51%, hsl(340, 50%, 85%) 100%);
    --gradPink02: linear-gradient(hsl(340, 60%, 95%) 0%, hsl(340, 60%, 85%) 50%, hsl(340, 50%, 70%) 51%, hsl(340, 50%, 80%) 100%);

    --gradPurple01: linear-gradient(white 0%, hsl(275, 50%, 90%) 50%, hsl(275, 50%, 80%) 51%, hsl(275, 50%, 85%) 100%);
    --gradPurple02: linear-gradient(hsl(275, 50%, 90%) 0%, hsl(275, 50%, 80%) 50%, hsl(275, 50%, 70%) 51%, hsl(275, 50%, 80%) 100%);
}

.laceTop {
    background: url(../images/laceTop.png);
    height: 15px;
    border: none;
}

.laceBtm {
    background: url(../images/laceBtm.png);
    height: 15px;
    border: none;

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* ---------- HEADINGS ---------- */

h1, h2, h3, summary, .purple {
    text-shadow: var(--strokeWhite);
}

h1, h2, h3, summary {
    font-family: 'Manufacturing Consent';
    font-weight: normal;
    font-style: normal;

    display: flex;
    align-items: center;
    gap: 5px;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: var(--gradPink02);
    padding: 1rem;
}

h3 {
    font-size: 2rem;
    align-self: flex-start;
    margin: 10px 0;
}

header {
    text-align: center;
}

/* ---------- NAVIGATION ---------- */

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

.purple {
    color: black;
    text-decoration: none;
    font-family: 'Stint Ultra Condensed';
    border: 2px solid black;
    border-radius: 15px;
    margin: 0.5rem;
    background: var(--gradPurple02);
}

.purple a {
    text-decoration: none;
    color: black;
}

.purple:hover {
    background: var(--gradGrey);
}

header nav .purple {
    width: 100px;
    font-size: 1.5rem;
    padding: 0.75rem;
}

.wrapperLeft .purple {
    color: black;
    font-size: 1.15rem;
    font-weight: normal;
    padding: 0.5rem;
}

/* ---------- MAIN ---------- */

main {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    margin: 10px auto 40px;
}

p {
    font-size: 0.95rem;
    color: #ff7faa;
    padding: 10px;
}

/* ---------- TOOLTIP ---------- */

[data-tooltip] {
    position: relative;
    display: inline-block;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);

    display: block;
    position: absolute;
    bottom: 105%;
    left: -30%;
    width: 100%;

    padding: 0.5rem;
    background: var(--gradWhite);
    border: 2px solid black;
    border-radius: 15px;
    text-shadow: var(--strokeWhite);
    text-align: center;
}

/* ---------- BORDER LACE ---------- */

.borderWhite { border-image: url(../images/borderWhite.png) 9 fill / 9px / 9px round;}

.borderBlack { border-image: url(../images/borderBlack.png) 9 fill / 9px / 9px round;}

.borderPink { border-image: url(../images/borderPink.png) 9 fill / 9px / 9px round;}

.borderPurple { border-image: url(../images/borderPurple.png) 9 fill / 9px / 9px round;}

.borderDash {
    border: 2px dashed black;
    width: 100%;
    height: 100%;
}

/* ---------- BACKGROUNDS ---------- */

.checks { background-image: url(../images/checks.png); }
.dots   { background-image: url(../images/dots.png); }

/* ---------- IMAGES ---------- */

.imgSmall, .imgMedium, .imgLarge {
    width: auto;
}

.imgSmall {
    height: 25px;
}

.imgMedium {
    height: 50px;
    margin: 0 10px;
}

.imgLarge {
    height: 75px;
}

/* -------------------- M E D I A Q U E R I E S -------------------- */

/* ---------- PHONES ---------- */

@media (max-width: 600px) {
    main {
        width: 100%;
        max-width: 340px;
    }

    h1 {
        font-size: 2rem;
    }

    .portrait {
        width: 100%;
        max-width: 290px;
        height: auto;
    }

    .wrapper {
        flex-direction: column;
    }
}

/* ---------- MOBILE ---------- */

@media (min-width: 600px) {
    main {
        width: 500px;
    }

    .portrait {
        width: 400px;
        height: auto;
    }

    .wrapper {
        flex-direction: column;
    }

    .wrapperLeft .purple {
        font-size: 1.5rem;
    }
}

/* ---------- DESKTOP ---------- */

@media (min-width: 992px) {
    main {
        width: 900px;
    }

    .portrait {
        width: 300px;
        height: auto;
    }

    .wrapper {
        flex-direction: row;
    }
    
    .wrapperLeft .purple {
        font-size: 1.15rem;
    }
}