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

:root {
    --background-1: hsla(164, 25%, 12%, 1);
    --background-2: rgb(22, 42, 62);
    --background-4: hsla(164, 30%, 9%, 1);
    --background-3: hsla(270, 14%, 97%, 1);
    --highlight-1: hsla(214, 19%, 51%, 1);
    --highlight-2: hsla(28, 71%, 57%, 1);
    --highlight-background-2: hsla(28, 80%, 40%, 1);

    /* Tartarus Painting Pallet */
    /* --background-1: hsl(340, 21%, 14%);
    --background-4:hsl(346, 24%, 17%);
    --background-2:hsl(359, 39%, 30%);

    --highlight-2:hsl(6, 91%, 70%);
    --highlight-2:hsl(48, 61%, 78%);
    --highlight-2:hsl(6, 75%, 48%); */
}

body {
    font-family: "Electrolize", sans-serif;
    /* font-size: 30px; */
    background-color: var(--background-1);
    color: white;
    padding: 30px ;
}

a {
    color: var(--highlight-2);
}

.sidebar {
    background-color: var(--background-4);
    width: 20%;
    max-width: 200px;
    border-radius: 2px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

.sidebar h2 {
    text-align: center;
}

.maincontent h2 {
    text-align: center;
}

.maincontent {
    width: 55%;
}

.bubble1 {
    background-color: var(--background-4);
    padding: 15px;
    border-radius: 5px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    text-align: justify;
}

.content {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 50px;
}

h1 {
    text-align: center;
}

.tag {
    background-color: var(--highlight-1);
    padding: 5px;
    border-radius: 4px;
}