/*body{
    width: 800px;
    margin: auto;
}*/

.grid-container{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

#container{
    /*//max-width: 800px;*/
    margin: auto;
    background-color: bisque;
    padding: 5px;
}

#h-con{
    grid-column: 2/ 3;

}
#g1{
    grid-column: 1/2;
}
#g2{
    grid-column: 2/3;
    width: 100%;
    //border: 1px solid crimson;
}
#g3{
    grid-column: 3/4;
}
#g4{
    grid-column: 1/2;
}

#g7{
    grid-column: 1/2;
    grid-row: 2/3;
}
h1{
    margin: auto;
    text-align: center;
    color: navy;
    background-color: bisque;
}
#h-con>h1{
    margin-bottom: 10px;
}
#h-con{

    margin: 10px auto 10px auto;
    border: 1px solid crimson;
    background-color: darkgray;
    //width: 70%;
    padding: 5px;
    min-width: 320px;
}
#hex-con{
    //min-width: 376px;
}
#pad{
    margin: 10px auto 10px auto;
    padding: 5px;
    border: navy 1px solid;
    max-width: 376px;
}
.btn{
    color: crimson;
    background-color: darkslateblue;
    border: whitesmoke solid 1px;
    width: 23.8% ;
    height: 50px;
    font-size: 19px;
}
.btn:hover{
    color: floralwhite;
    cursor: pointer;
}
.btnH{
    background-color: darkseagreen;
    margin-top: 5px;
    border: navy 1px solid;
}
#text-pad{
    text-align: center;
    display: block;
    padding: 5px;
    margin: auto;
    width: 80%;
}
#first-part{
    background-color: darkgray;
    border: darkslateblue 1px solid;
    padding: 5px;
    grid-column: 2/3;
}
#cancel{
    margin: auto;
    font-size: 14px;
}