/* You CSS goes in here */

html, body {
    margin:0;
    padding:0;
    font-weight: 400;
}

.flex{
    display: flex;
}

ul{
    list-style-type: none;
}

ol{
    list-style-type: none;
}

button{
    cursor: pointer;
}

/* Nav */


.main-nav{
    border-bottom: 8px solid #ff6600;
    padding: 0px;
}

.main-nav li:hover {
    background-color: rgb(101, 229, 47);
    color: rgb(57, 111, 247);
    border-radius: 30px;
  }

a:link{
    text-decoration: none;
}

.menu-item{
    margin-right: 45px;
    font-size: 1em;
    padding: 20px;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    
}

.navbar-toggler{
    padding: .25rem .75rem;
    font-size: 1.25rem;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: .25rem;
    vertical-align: middle;
}

.navbar-toggler:focus,.navbar-toggler:hover {
    border: 2px solid rgb(18, 16, 16);
}

.main-menu{
    padding-right: 30px;
    width: fit-content;
    height: 500px;
    position: absolute;
    border-right: 1px solid #eaecef;
    display: block;
    transition: all .5s;
}


.main-menu-item{
    font-size: 1.5em;
    font-family: "sans-serif";
    margin-bottom: 20px;
    margin-left: -2px;
    color: #3e6389;
    font-weight:bold;
}

.main-menu-item a:hover{
    text-decoration: underline;
    color: #ff6600;
}



/********************* simulation table ********************/

.sim{
    background-color: #f7eee0; 
    margin: 100px;
    margin-top: 2px;
    /* width: 100%; */
    height: auto;
    border-left: 30px solid ;
    border-right: 30px solid ;
    border-bottom: 30px solid ;
    border-color: #634380;
}

.sim_table{
    width: auto;
    display: grid;
    gap: 10px;
    margin: 20px;
    column-gap: 10px;
    margin-bottom: 5px;

    grid-template-areas: 
    "instruction-area instruction-area instruction-area instruction-area area2 area2"
    "area1 area1 area1 area1 area3 area3"
    "area1 area1 area1 area1 area4 area5"
    "area1 area1 area1 area1 area6 area7"
    "area1 area1 area1 area1 area8 area9"
    "area1 area1 area1 area1 area10 area10"
    "area1 area1 area1 area1 area11 area11"
    "area1 area1 area1 area1 area11 area11"
    "area1 area1 area1 area1 area12 area12"
    "area1 area1 area1 area1 area12 area12"
    "area13 area13 area14 area14 area14 area14";

}

.instruction{
    background-color: #ff6600;
    grid-area: instruction-area;
    border: solid #080808 3px;
    border-radius: 5px;
    text-align: center;
    font-weight: bolder;
    font-size:20px;

}

.item1{
    grid-area: area1;
}
.item2{
    grid-area: area2;
}
.item3{
    grid-area: area3;
}
.item4{
    grid-area: area4;
}
.item5{
    grid-area: area5;
}
.item6{
    grid-area: area6;
}
.item7{
    grid-area: area7;
}
.item8{
    grid-area: area8;
}
.item9{
    grid-area: area9;
}
.item10{
    grid-area: area10;
}
.item11{
    background: rgb(57, 111, 247);
    text-align: center;
    border-radius: 5px;
    grid-area: area11;
}
.item12{
    background: rgb(57, 111, 247);
    text-align: center;
    border-radius: 5px;
    grid-area: area12;
    padding: 20px;
}
.item13{
    grid-area: area13;
    background-color: #ff6600;
    margin-top: 5px;
    border: solid #080808 3px;
    border-radius: 5px;
    height: 50px;
    font-size: 30px;
    font-weight: bolder;
    padding: 10px 10px 0 10px;
}

.item14{
    grid-area: area14;
    background-color: #ff6600;
    margin-top: 5px;
    border: solid #080808 3px;
    border-radius: 5px;
    height: 50px;
    font-size: 30px;
    font-weight: bolder;
    padding: 10px 10px 0 10px;
    text-align: center;
}

#mycanvas{
    border: 4px solid teal ;
    border-radius: 15px;
    background-size: 100px 100px;
}

#enable{
    background-color: #ca2222;
    padding: 10px;
    width: 100%;
    border: 0px;
    border-radius: 5px;
    color: #eaecef;
    font-weight: bolder;
}

.instrument{
    background-color: rgb(57, 111, 247);
    padding: 10px;
    border: 0px;
    border-radius: 5px;
    color: #eaecef;
    font-weight: bolder;
    width: 100%;
}

#current_direction{
    background-color: rgb(57, 111, 247);
    padding: 10px 5px;
    border: 0px;
    border-radius: 5px;
    color: #eaecef;
    font-weight: bolder;
    width: 100%;
}

.tables{
    margin: 50px 100px;
}

#table-heading{
    background: #6a1b9a;
    color: white;
    padding: 7px;
}

.calculate-button{
    padding: 7px 20px 7px 20px;
    font-weight: bold;
    font-size: 15px;
    margin: 10px 0 0 0 ;
    background-color: rgb(57, 111, 247);
    color: white;
    border: 0px;
    border-radius: 5px;
}
.container {
    width: 100%;
    text-align: center;
    margin-top: 50px;
  }

  .picture-section {
    display: inline-block;
    width: 450px;
    height: 400px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }

  .picture-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #f4f4f4;
    border: solid black;
  }
  label, select, button {
    margin: 10px 5px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
  .toggle {
    display: inline-block;
    padding: 5px 10px;
    background: #007BFF;
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
  .graph-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  canvas {
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .tableContainer{
    background-color: #f7eee0; 
    margin: 100px;
    margin-top: 2px;
    /* width: 100%; */
    height: auto;
    border-left: 30px solid ;
    border-right: 30px solid ;
    border-bottom: 30px solid ;
    border-color: #634380;
}

.tableButton{
display: inline-block;
outline: 0;
border: 0;
cursor: pointer;
will-change: box-shadow,transform;
background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% );
box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%);
padding: 0 25px;
border-radius: 6px;
color: #fff;
height: 35px;
width: 150px;

text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
transition: box-shadow 0.15s ease,transform 0.15s ease;}

.tableButton:hover {
    box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #3c4fe0;
    transform: translateY(-2px);
}
.tableButton:active{
    box-shadow: inset 0px 3px 7px #3c4fe0;
    transform: translateY(2px);
}