:root {
    --bg-color: #222831;
    --button-background-color: #393E46;
    --button-highlight-color: #DFD0B8;
    --button-fill-color: white;
    --button-active-color: purple; 
}

.light {
    --bg-color: #cbcbcb ;
    --button-background-color:#ffffe3 ;
    --button-highlight-color: black;
    --button-fill-color: #4a4a4a;
    --button-active-color:#6d8196 ;
}
* {
    box-sizing: border-box;
}
body {
        background-color: var(--bg-color) ;
        padding: 0;
        margin: 0 0 0 0;
        overflow: hidden;
    }
button {
  background: none;
  border: 0;
  padding:0;
  border-radius: 8rem;
  margin:0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crosshair {
    cursor : crosshair;
}
.textcursor {
    cursor : text;
}
#top_buttons {
    background-color: var(--button-background-color);
    position: fixed;
    display: flex;
    align-items: stretch;
    gap: 1%;
    border:0;
    padding:0;
    width: clamp(12rem,50%,50rem);
    left: 25%;
    top: 0rem;
    right : 25%;
    height: 5%;
    border-radius: 8rem;
    border-style:none;   
}
.tools {
    flex-grow: 1;
    z-index: 1;
}
.selected {
    background-color: var(--button-active-color);
}

.tools:focus {
    outline: none;
    box-shadow: none;
}
.tools svg {
  width: 100%;
  height: 70%;
  stroke: var(--button-fill-color);
  fill: none;
  transition: stroke 0.3s ;
}

.tools:hover svg {
  stroke: var(--button-highlight-color); 
  stroke-width: 3;
}

.extra_functionality {
    position: fixed;
    top:0.6875rem;
    height: 6vh;
    aspect-ratio: 1/1;
    display: flex;
    border-radius: 50%;
    padding:0;
    margin:0;
    background-color: var(--button-background-color);
    z-index:1;
}
.extra_functionality:hover {
    outline:none;
    box-shadow: none;
}
.extra_functionality:hover svg {
    stroke: var(--button-highlight-color);
    stroke-width: 1.5;
}
.history {
    position: fixed;
    top:0.6875rem;
    left:1.25rem;
    height: 5vh;
    aspect-ratio: 2.5/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    padding:0;
    margin:0;
    background-color: var(--button-background-color);
    z-index:1;
}
.history button svg{
    height:60%;
    width:100%;
    fill:none;
    stroke: var(--button-fill-color);
}
.history button:hover {
    outline:none;
    box-shadow: none;
}
.history button:hover svg {
    stroke: var(--button-highlight-color);
    stroke-width: 1.5;
}
#toggle_theme {
    right:20px;
}


#toggle_theme svg:last-child {
    display: none;
}
.light #toggle_theme svg:last-child {
    display: block;
}
.light #toggle_theme svg:first-child {
    display: none;
}



#test {
    position: fixed;
    background-color: transparent;
    top:0;
    left:0;
}
#final {
    position: fixed;
    background-color: transparent;
    top:0;
    left:0;
}

#stroke_manipulation{
    border:0;
    margin:0;
    padding:1rem 1rem 1rem 1rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--button-background-color);
    border-radius: 1rem;
    position: fixed;
    top: 20%;
    height:auto;
    max-height: 70vh;
    gap: 0.7rem;
    left:0rem;
}
#stroke_manipulation pre{
    margin:0;
    font-size:1rem;
    color: var(--button-fill-color);
}
#stroke_manipulation input{
    padding: 0;
    margin:0;
    border : none;
}
#stroke_manipulation input:hover{
    cursor: pointer;
}
#stroke_manipulation div{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap:1rem;
}
#stroke_manipulation div button{
   width:3rem;
}
#stroke_manipulation div button:hover svg{
   stroke: var(--button-highlight-color);
   stroke-width: 2.70;
}
#stroke_manipulation div button svg{
   stroke: var(--button-fill-color);
   height: 80%;
   width:100%;
   fill:none;
}