body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: hsl(259, 16%, 60%);
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.grid-item {
    background-color: hsl(259, 16%, 80%);
    border: 3px solid hsl(259, 16%, 70%);
    overflow: auto;
}

.graph {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 50vw;
    height: 50vh;
}

.matrix {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.output {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    font-size: 50px;
    font-family: 'Comic Sans MS', sans-serif;
    text-shadow: 
    1px 1px 0px rgba(0, 0, 0, 0.2),  
    -1px -1px 0px rgba(0, 0, 0, 0.2),
    1px -1px 0px rgba(0, 0, 0, 0.2),   
    -1px 1px 0px rgba(0, 0, 0, 0.2),  
    0px 1px 0px rgba(0, 0, 0, 0.2),    
    0px -1px 0px rgba(0, 0, 0, 0.2),   
    1px 0px 0px rgba(0, 0, 0, 0.2),    
    -1px 0px 0px rgba(0, 0, 0, 0.2);   
}
  
.node {
    fill: #736372;
    stroke: #384D48;
    stroke-width: 1.5px;
}

.link {
    stroke: #384D48;
    stroke-width: 1.5px;
    opacity: 0.6;
}

.label {
    font-size: 20px;
    fill: #FFFFFF;
    user-select: none;
    pointer-events: none;
}

table {
    border-collapse: collapse;
    margin: auto auto;
    aspect-ratio: 1/1;
}
td {
    padding: 5px;
}
input {
    width: 40px;             
    height: 30px;           
    text-align: center;
    background-color: transparent;
    border: 1px solid #ccc; 
    padding: 0;
    font-size: 24px; 
}
input:focus {
    outline: none;
}