@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    font-family: 'inter', Arial, sans-serif;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}


.app_container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    margin: 0 1rem;
    max-width: 1240px;
}

.sim_container {
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 1rem;
}

.btn {
    border-radius: 0px;
    border: none;
    padding: .5rem 1rem;
    background-color: rgb(120, 196, 158);
    font-weight: 300;
    cursor: pointer;
}

.canvas {
    border: 1px solid black;
}

.color-btns {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}

.color-btns .btn {
    min-width: 10rem;
}

.world_settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
}

.speed-title {
    font-weight: bold;
    margin-bottom: .5rem;
}

.timeScale {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn.active {
    background-color: white;
    color: black;
    border: 1px solid black;

}

.btn:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
}


/* Customizations */


.customizations, .timeScale {
    border: 1px solid black;
    padding: 2rem;
    text-align: center;
    min-width: 400px;
    font-size: smaller;
}

.customizations h3 {
    margin-bottom: 2rem;
}

.inputs {
    display: flex;
    flex-direction: column;
}

.inputs h4 {
    margin-bottom: 10px;
}


input {
    width: 5rem;
    margin: 0 1rem;
    float: right;
    font-size: smaller;
}

details {
    cursor: pointer;
    margin: 1rem 0 2rem 0;
    
}

summary {
    margin-bottom: 1rem;
    font-weight: 700;
}

label
{
    display: block;
}

label span
{
    display: inline-block;
    text-align: right;
    width: 200px;
    text-align: left;
}

.btn {
    font-size: small;
}


/* graphs */

.graphs-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    height: 100vh;
}

.graphs {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 3rem;
}

.graph {
    height: 400px;
    width: 400px;
    border: 1px solid black;
    padding: .5rem;
}