@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&display=swap');

body {
    background-image: linear-gradient(to bottom, #595859, #212121);
    background-attachment: fixed;
}

main {
    background-color: white;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgb(136, 109, 93, 0.616);

    max-width: 600px;
    width: 90%;

    padding: 5px;
    margin: 0 auto;
}

footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

h1#titulo-principal {
    color: #0D0D0D;
    text-shadow: 1px 1px 2px rgb(44, 44, 44);
    font: normal bold 2.5em 'Cinzel', 'Cormorant SC', 'Cormorant Unicase', serif;
    text-align: center;
}

h1.titulos {
    font: normal bold 2em 'Cinzel', 'Cormorant SC', 'Cormorant Unicase', serif;
    background: linear-gradient(90deg, red 0%, blue 50%, green 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2#circulo-cromatico {
    font: normal bold 2em 'Cinzel', 'Cormorant SC', 'Cormorant Unicase', serif;
    background: linear-gradient(90deg, red 0%, blue 50%, yellow 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2.base {
    font: normal bold 2em 'Cinzel', 'Cormorant SC', 'Cormorant Unicase', serif;
    text-align: left;
    color: black;
}

h2.explicacao {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: black;
    text-indent: 1.5em;
}

abbr {
    all: unset;
    font: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: text;
}

p#paragrafo-circulo {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
}

p.red {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(0, 100%, 50%);
}

p.blue {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(240, 100%, 50%);
}

p.yellow {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(60, 75%, 50%);
}

p.cyan {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(180, 75%, 50%);
}

p.red-roxo {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(330, 100%, 50%);
}

p.red-alar {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(30, 100%, 50%);
}

p.blue-roxo {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(270, 100%, 50%);
}

p.blue-green {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(210, 100%, 50%);
}

p.yell-green {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(90, 80%, 50%);
}

p.yell-alar {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(30, 100%, 50%);
}

p.violet {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(300, 100%, 50%);
}

p.green {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(120, 100%, 50%);
}

p.orange {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;
    color: hsl(39, 100%, 50%);
}

p.degrade-red {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(0, 60%, 25%),
            hsl(0, 100%, 50%),
            hsl(0, 80%, 65%),
            hsl(0, 65%, 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.degrade-blue {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(240, 60%, 25%),
            hsl(240, 100%, 50%),
            hsl(240, 80%, 65%),
            hsl(240, 65%, 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.degrade-yellow {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(60, 60%, 25%),
            hsl(60, 100%, 50%),
            hsl(60, 80%, 65%),
            hsl(60, 65%, 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.degrade-violet {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(300, 60%, 25%),
            hsl(300, 100%, 50%),
            hsl(300, 80%, 65%),
            hsl(300, 65%, 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.degrade-green {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(120, 60%, 25%),
            hsl(120, 100%, 50%),
            hsl(120, 80%, 65%),
            hsl(120, 65%, 80%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.degrade-orange {
    font: normal bold 1.2em Arial, Helvetica, sans-serif;
    text-align: left;

    background: linear-gradient(90deg,
            hsl(39, 60%, 25%),
            hsl(39, 100%, 50%),
            hsl(39, 80%, 65%),
            hsl(39, 65%, 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}