:root {
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    /** Theme primary colors */
    --clr-primary-a0: #a38fff;
    --clr-primary-a10: #ae9bff;
    --clr-primary-a20: #b9a7ff;
    --clr-primary-a30: #c4b3ff;
    --clr-primary-a40: #cec0ff;
    --clr-primary-a50: #d9ccff;

    /** Theme surface colors */
    --clr-surface-a0: #1c1c1c;
    --clr-surface-a10: #313131;
    --clr-surface-a20: #474747;
    --clr-surface-a30: #5f5f5f;
    --clr-surface-a40: #777777;
    --clr-surface-a50: #919191;

    /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #28262f;
    --clr-surface-tonal-a10: #3c3a43;
    --clr-surface-tonal-a20: #525058;
    --clr-surface-tonal-a30: #68676e;
    --clr-surface-tonal-a40: #807e84;
    --clr-surface-tonal-a50: #98979c;

    /** Success colors */
    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    /** Warning colors */
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    /** Danger colors */
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    /** Info colors */
    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

body {
    background-image: url("assets/images/alovelybackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    margin: 0;
    overflow: hidden;
}



/*Button*/
.button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.button {
    color: var(--clr-surface-tonal-a0);
    background-color: var(--clr-primary-a0);
    border-color: var(--clr-surface-tonal-a0);
    font-size: 2rem;
    border-style: solid;
    border-radius: 10px;
    cursor: pointer;
    padding-inline: 0.5rem;
}

.button:hover {
    background-color: var(--clr-primary-a40);
    border-radius: 10px;
    transform: scale(1.5);
    transition-duration: 0.5s;
    text-decoration-color: var(--clr-surface-a20);
}

.button:active {
    background-color: var(--clr-primary-a0);
    transition-duration: 0s;
}

/*Page Layout*/
.layout {
    display: grid;
    grid-template-columns: auto auto;
    height: 100vh;
}

.myimg {
    border: 3px solid var(--clr-surface-tonal-a0);
    width: 10vw;
    max-width: 250px;
    border-radius: 8px;
    transform:rotatey(180deg);
}


.leftcontent,
.rightcontent {
    border-radius: 10px;
}

/*LEFT PANEL*/
.leftcontent {
    margin: 0 auto;
    background-color: var(--clr-surface-tonal-a30);
    width: fit-content;
    min-height: fit-content;
    height: 99vh;
    border-style: solid;
    border-color: var(--clr-surface-tonal-a0);
    overflow-y: scroll;
}

.leftcontent p,
.leftcontent h1{
    font-family: "Rakkas", serif;
    font-weight: 400;
    font-size: 2rem;
    margin: 1rem;
}

.leftcontent sup, .leftcontent p, .leftcontent h1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftcontent sup {
    font-size:xx-small;
    margin-top: -1.5rem;
    color: var(--clr-surface-a10);
}

.leftcontent a {
    color: var(--clr-primary-a0);
    font-size: 2rem;
}

.leftcontent p {
    background-color: var(--clr-surface-a20);
    color: var(--clr-primary-a0);
    border-radius: 8px;
}

.leftcontent-jump p:hover {
    color: var(--clr-surface-a20);
    background-color: var(--clr-primary-a20);
    text-decoration-line: underline;
    text-decoration-color: var(--clr-surface-a20);

}

.leftcontent p:active,
.leftcontent a:active {
    background-color: var(--clr-primary-a0);
}

/*Right Content*/
.topbanner {
    font-family: "Rubik Glitch", system-ui;
    font-weight: 400;
    font-size: 2vw;
    z-index: 1;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-primary-a0);
    -webkit-text-stroke: 1px #000000;
}

.rightcontent {
    max-width: 75vw;
    padding: 5vw;
    overflow-y: auto;
    overflow-x: hidden;
}

.rightcontent h2 {
    font-family: "Rakkas", serif;
    font-weight: 400;
    font-size: 3vw;
    -webkit-text-stroke: 0.05rem black;
    color: var(--clr-primary-a0);
    font-style: normal;
    display: flex;
    justify-content: center;
}

.divcontent {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 20rem;
}

.divcontent div {
    height: fit-content;
    overflow-y: auto;
    background-color: var(--clr-surface-tonal-a40);
    border-style: solid;
    border-color: var(--clr-surface-tonal-a50);
    border-radius: 10px;
    padding: 1rem;
}

.divcontent p {
    text-indent: 2rem;
    font-size: 2rem;
    color: var(--clr-surface-a0);
    padding-inline: 1rem;
}

.divcontent img {
    width: 10vw;
    border-style: solid;
    border-color: var(--clr-surface-a50);
    border-radius: 8px;
    margin-inline: 1rem;
}

/*Quadrent Content*/

.quad {
    display: grid;
    margin: 1rem;
    margin-bottom: 20rem;
    justify-content: center;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;

}

.quad div {
    margin: 1rem;
    background-color: var(--clr-surface-tonal-a40);
    border-color: var(--clr-surface-tonal-a50);
    border-style: solid;
    border-radius: 10px;
    padding-inline: 1rem;
}

.quad h2 {
    background-color: var(--clr-surface-tonal-a20);
    border-radius: 8px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.quad p {
    color: var(--clr-surface-a0);
    padding-inline: 1rem;
    font-size: 2rem;

}

.quad img {
    max-width: 750px;
    border-radius: 8px;
    margin: 1rem;
}