:root {
  --radius: 4px;
}


body {
    font-family: system-ui;
}

.flex_parent {
    display: flex;
}

.flex_parent_untouched { 
    display: flex;
}

.flex_child {
    flex: 1;
    padding: auto;
}

.flex_child_big {
    flex: 2;
    padding: auto;
}

/* wings */

.bigTitle {
    text-align: center;
}

.smolBox {
    background-color: rgba(164, 117, 35, 1);
    padding: 3%;
    margin: 2%;
    border-radius: var(--radius);
    height: 75%;
}

button {
    width: 15%;
    border: 0px; 
    background-color: rgba(219, 191, 84,0);
    border-radius: var(--radius);   
}

button:hover, select:hover{
    background-color: rgba(219, 191, 84,0.9);
    transition: background-color 0.1s ease-in-out;
}

.selectedLevel{
    background-color: rgba(219, 191, 84,0.7);
    transition: background-color 0.1s ease-in-out;
}
select {
  text-align: center;
  border-radius: var(--radius);
  background-color: transparent;
  border: none;
  cursor: inherit;
  padding: 0.15rem;
}

.levelChanger{
    padding: 0.3% 0 1% 0;
    background-color: rgba(219, 191, 84, 0.25);
    border-radius: var(--radius);   
}

.levelChangerContainer {
    text-align: center;    
}


/* canvas */

svg {
    border-radius: var(--radius);
}

.threed {
    stroke: #7a6d62;
    stroke-opacity: 0.7;
}

/* Media Queries */

@media (max-width: 640px) { 
    .flex_parent {
        flex-direction: column;
    }
}


/* gradients */

#rect1 {
    fill: url("#Gradient1");
}
.stop1 {
    stop-color: #85735e;
}
.stop2 {
    stop-color: #594d3f;
}
.stopa {
    stop-color: #008351;
}
.stopb {
    stop-color: #005f3b;
}

/* game / editor mode */

.gameMode {
}

.gameModeD {
}

h1::selection {
  background: #cc000000;
  color: #000000;
}
h1::-moz-selection {
  background: #cc000000;
  color: #000000;
}
h1::-webkit-selection {
  background: #cc000000;
  color: #000000;
}