:root {
    --font: "Unbounded", sans-serif;
    --bgc: #2A1E17;
    --bgc-card: #3B2A20;
    --text: #F3E5D0;
    --fade-text: #A68B73;
    --akc-1: #D9A066;
    --akc-2: #C4704F;
    --round-brd: 20px;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    cursor: default;
    margin-top: 2rem;
    margin-left: 10vw;
    margin-right: 10vw;
    display: flex;
    font-family: var(--font);
    font-size: 1.6rem;
    color: var(--text);
    background-color: var(--bgc);
    flex-direction: column;
    gap: 20px;
}

.logo {
    max-width: 180px;
}

.qbody {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

button,
.addQuote-btn {
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: var(--round-brd);
    background-color: var(--akc-2);
    padding: 0.5rem 1.5rem;
    gap: 5px;
    border-width: 0;
    font-size: 12pt;
    font-family: var(--font);
    color: var(--text);
}

a:hover {
    color: #e2cfbf;
}

button:hover,
.addQuote-btn:hover,
.author-link:hover {
    background-color: #b53935;
    color: #e2cfbf;
}

.tag:hover {
    background-color: var(--fade-text);
    color: #e2cfbf;
}

.quote {
    background-color: var(--bgc-card);
    border-radius: var(--round-brd);
    /* padding: 2rem; */
    display: flex;
    flex-grow: 2;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: center;
    /* align-items: center; */
}

.quote-breck {
    width: 40px;
    position: relative;
    left: 5%;
    top: 2rem;
}

.quote-breck-back {
    width: 40px;
    position: relative;
    left: 90%;
    bottom: 12rem;
}

.block-quote {
    display: flex;
    flex-direction: column;
    padding-left: 15rem;
    padding-right: 15rem;
    padding-top: 3rem;
    padding-bottom: 5rem;
    font-size: 14pt;
    gap: 20px;
}

.single {
    text-align: center;
}

.dialog {
    align-items: left;
    padding-top: 1rem;
}

.dialog .about-quote {
    justify-content: right;
}

.dialog-line {
    display: flex;
    gap: 10px;
}

.author-quote span {
    border-radius: var(--round-brd);
    background-color: var(--akc-2);
    font-size: 12pt;
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.tag {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
    border-radius: var(--round-brd);
    font-size: 12pr;
    background-color: var(--akc-1);
    padding: 0.5rem 1rem;
}

.tags-quote {
    display: flex;
    gap: 10px;
}

.about-quote {
    display: flex;
    flex-grow: 2;
    align-items: center;
    justify-content: space-between;
    margin-left: 5rem;
    margin-right: 5rem;
    margin-top: 3rem;
}


.author-link {
    cursor: pointer;
    border-radius: var(--round-brd);
    background-color: var(--akc-2);
    font-size: 12pt;
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.reactions {
    display: flex;
    padding: 1rem 2rem;
    gap: 10px;
    margin-right: 3rem;
}

.reaction--mine {
    background-color: #ce4331;
}

.top-tabs {
    display: flex;
    gap: 10px;
}