*{
    box-sizing : border-box;
    margin : 0; 
    padding : 0;
}

.body-wrapper{
    margin : auto;
}

.title{
    padding : 1rem;
    font-family: 'Courier New', Courier, monospace;
}

.headWrapper{
    margin : auto;
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;
    background : rgb(14, 77, 146);
    padding: 5rem;
    color : rgb(255,255,255);
    font-family: 'Courier New', Courier, monospace;
}

.headWrapper div {
    margin: 0.2rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap : wrap;
    justify-content: center;
    background: #2b2b3a;
}

.headWrapper div label{
    margin : 0.5rem;
    padding-left : 1rem;
}

.headWrapper div input{
    margin : 0.5rem;
    height: 2rem;
    background-Color : rgb(244,251,183);
    font-size : 16px;
}

.headWrapper .bg-div p{
    text-align : center;
    font-weight : 700;
    padding-top : 1rem;
    padding-bottom : 1rem;
}

.headWrapper .bg-div div{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    background : green;
}

.headWrapper .border-font-color div{
    background : #00a86b;
    display: flex;
    flex-wrap : wrap;
    align-items: center;
}

.selectsFont select{
    height: 2rem;
    font-size : 16px;
}

.btn-wrapper{
    display : flex;
    justify-content: center;
}

.generateBtn{
    height : 3rem;
    margin: 2rem auto;
    padding : 1rem;
    font-size : 1rem;
    font-family : 'Courier New', Courier, monospace;
    font-weight : 700;
    background : rgba(204,102,102, 0.5);
    color : #3d3d3d;
    border-radius: 10px;
    outline : none;
    border : 2px solid #ff3232;
}


.generateBtn:focus{
    background :rgb(204,102,102);
    color: white; 
}

.table-wrapper{
    width : 90%;
    margin : 2rem auto;
}

table{
    width : 80%;
    margin : auto;
    border-collapse: collapse;
}

thead{
    height : 2rem;
}

th{
    height : 2rem;
}

td{
    width : 3rem;
    height : 2rem;
}