/*styling*/
:root{
    --border: #c85500;
    --background: #fbf236;
    --achievement: #c85500;
    --text: #000000;
    --progress: #c85500;
    --button: #fbf236;
    --dark-border: #C85500;
    --dark-background: #000000;
    --dark-achievement: #c85500;
    --dark-text: #fbf236;
    --dark-progress: #c85500;
    --dark-button: #000000;
}

*{
    background-color: var(--background);
    color: var(--text);
    font-family: sans-serif;
}
progress::-moz-progress-bar { background: var(--progress); }
progress::-webkit-progress-value { background: var(--progress); }
progress { color: var(--progress); border: 2px solid var(--border);}
.achy{
    background-color: var(--achievement);
    border: 2px solid var(--background);
}
.achy > *{
    background-color: var(--achievement);
}
#top, #left, #center, #right{
background: var(--background);
border: 2px solid var(--border);
}
img{
    background: var(--background) !important; 
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

button{
    font-size:1rem;
}

button{
    margin: 1px;
    padding: 3px;
    border: 2px solid var(--border);
    background-color: var(--button);
}
@media (prefers-color-scheme: dark) {
    .achy{
        background-color: var(--dark-achievement);
        border: 2px solid var(--dark-background);
    }
    .achy > *{
        background-color: var(--dark-achievement);
    }
    #top, #left, #center, #right{
        background: var(--dark-background);
        border: 2px solid var(--dark-border);
        }
    *{
        background-color: var(--dark-background);
        color: var(--dark-text);
    }
    button{
        border: 2px solid var(--dark-border);
        background-color: var(--dark-button);
    }
    progress::-moz-progress-bar { background: var(--dark-progress); }
    progress::-webkit-progress-value { background: var(--dark-progress); }
    progress { color: var(--dark-progress); border: 2px solid var(--dark-border) }
    img{
        background: var(--dark-background) !important; 
    }
}

/*layout

main
    top
        leftt
        rightt
        gapr
    content
        left
        center
        right
*/
body{
    position:relative;
}
*{
    box-sizing: border-box;
}
progress{
    width: 100%;       
}
.item .item2{
    text-align: center;
}
#main{
height:95vh;
height:95svh;
width:100vw;
width:100svw;
position:relative;
}
#top{
    text-align:center;
}
html,body{
    border: 3px;
    margin:0;
    padding:0;
}
#content{
    display:flex;
    height:90%;
    width:100%;
    position:fixed;
}
#left{
position: relative;
text-align: center;
width:33.33%;
float:left;
overflow: auto;
height:100%;
}
#center{
position: relative;
width:33.34%;
text-align: center;
overflow: auto;
height:100%;
}
#right{
position: relative;
width:33.33%;
overflow: auto;
height:100%;
}