/* @import "https://unpkg.com/open-props"; */

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --primary: #2c7d6c;
    --accent: #007763;
    --background: #dff5d7;
    --accentA: #74da30;
    --backgroundA: #e9e9ed;
    --buttonHover: #d0d0d7;
    --buttonClick: #ffdd35;

    background: var(--background);
}

#topbar {
    --bottom-border-size: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    /* height: var(--size-10); */
    border-bottom: var(--bottom-border-size) solid var(--accent);
    /* padding: 0 var(--size-3); */

    div:first-child {
        display: flex;
        /* gap: var(--size-4); */
    }

    button {
        --border-color: var(--accentA);
        background-color: var(--backgroundA);
        /* min-width: var(--size-12); */
        /* height: var(--size-8); */
        padding: 5px;
        font-family: "Share Tech Mono", monospace;
        font-weight: 400;
        font-size: 32px;
        font-style: normal;
        border-top: 0;
        border-left: 0;
        border-bottom: 2px solid var(--border-color);
        border-right: 2px solid var(--border-color);
        cursor: pointer;
        &:hover {
            background-color: var(--buttonHover);
        }
        &:active:hover {
            background-color: var(--buttonClick);
            transform: translate(2px, 2px);
            border-top: 2px solid var(--border-color);
            border-left: 2px solid var(--border-color);
            border-bottom: 0;
            border-right: 0;
        }
    }

    #info_display {
        /* background-color: gray; */
        display: flex;
        align-items: center;
        
        #info_div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            padding: 1px;
            padding-right: 6px;
            padding-left: 6px;
            margin-right: 6px;
            /* min-width: var(--size-10); */
            border: 2px solid var(--accentA);
            background-color: var(--background);
            .info { 
                font-family: "Share Tech Mono", monospace;
                font-weight: 400;
                font-size: 18px;
                font-style: normal;                
            }
        }
        
        .info_button {
            font-size: 20px;
        }
    }
}

.contents {
    font-family: "Share Tech Mono", monospace;
    padding: 10px;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-style: normal;
}