@import "navbar.css";
@import "home.css";

:root {
    /* --clr-text-body: rgb(0,255,43); */

    --clr-border: rgb(215,186,125) ;

    --clr-text-header : rgb(181,256,155);
    --clr-text-body: rgb(156, 220, 254);

    --clr-bg-1: rgb(24, 24, 24);
    --clr-bg-2: rgb(31, 31, 31);
    --clr-bg-3: rgb(40, 40, 40);
    --clr-bg-4: rgb(0, 0, 0);

    --font-m-header-1: 1.7rem;
    --font-m-body-1: 1.45rem;
    --font-m-body-2: 1.3rem;

    --font-l-header-1: 2.3rem;
    --font-l-body-1: 1.65rem;
    --font-l-body-2: 1.45rem;
}

body{
    font-family: consolas;
    background-color: var(--clr-bg-1);
    color: var(--clr-text-header);
    margin: 0;
    /* height: 100vh; */
    font-size: var(--font-m-body-1);
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */

    display: flex;
    justify-content: center;
    /* align-items: center; */
    
    /* background-image: url(img/background.png); */
}

*::-webkit-scrollbar { width: 10px }
*::-webkit-scrollbar-track { background: var(--clr-bg-2) } 
*::-webkit-scrollbar-thumb { background: var(--clr-bg-2) } 
*::-webkit-scrollbar-thumb:hover { background: var(--clr-bg-2) }

a {
    color: inherit
}

.container {
    width: 95vw;
    max-width: 1900px;
    /* height: 95vh; */
    /* max-height: 1200px; */
    border: 1px solid var(--clr-border) ;
    box-sizing: border-box;
    overflow: hidden;
    overflow-Y: scroll;

    margin: 10px 
}

.content {
    background-color: var(--clr-bg-3);
    padding:15px;
    border-left:10px solid var(--clr-bg-2);
    border-bottom:10px solid var(--clr-bg-2);
    /* min-height: calc(100% - (125px)); */
}

.text {
    margin-bottom:20px;
}

.text span {
    display: block
}

.text .body {
    margin-left:20px;
    color: var(--clr-text-body);
}

.star {
    position: relative;
}

.star::after {
    position: absolute;
    left: 300px;
    color: var(--clr-border);
}

.star-5::after {
    content: "☆☆☆☆☆";
}

.star-4::after {
    content: "☆☆☆☆";
}

.star-3::after {
    content: "☆☆☆";
}

@media only screen and (max-width:1100px) {
    :root {
        --font-m-header-1: var(--font-l-header-1);
        --font-m-body-1: var(--font-l-body-1);
        --font-m-body-2: var(--font-l-body-1);
    }
}