html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
}

.header {
    margin-bottom: 0px;
}

.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center !important;
}

.bold {
    font-weight: 700;
}

.image-title {
    padding-bottom: 4px;
}

.hr-width {
    width: 350px;
    margin: auto;
}

.div-center {
    margin: auto;
    padding: 2px;
}

.board-main-size {
    width: 350px;
/*    height: 350px;
*/    padding-top: 7px;
}

.board-vowels-size {
    width: 350px;
    height: 55px;
}

.board-share-size {
    width: 350px;
    height: 35px;
}

.text-center-vert {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50);
    font-size: 2rem;
    font-weight: 700;
}

.wrapper-main {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 69px);
    grid-template-rows: repeat(5, 69px);
    grid-gap: 1px;
    grid-auto-flow: column;
}

.wrapper-vowels {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 55px);
    grid-template-rows: repeat(1, 55px);
    grid-gap: 1px;
    grid-auto-flow: column;
    padding: 7px 0 0 7px;
}

.wrapper-vowels {
    width: 100%;
    padding: 7px 0 0 7px;
}

.box-main {
    background-color: #B8B8B8;
    color: #000000;
    border-radius: 3px;
    padding: 1%;
    font-size: 150%;
    border: 2px solid #B8B8B8;
}

.box-reset {
    border: 2px solid #B8B8B8;
}

.shareButton {
    width: 30%;
    height: 38px;
    font-size: large;
    color: #000000;
    background-color: #B8B8B8;
    border-radius: 5px;
    border: #fff;
}

.hidden {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -10%);
    width: 270px;
    height: auto;
    overflow: auto;
}

.modal-title {
    font-weight: bolder;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 15px;
    border: 2px solid #888;
    border-radius: 3px;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
body
{
}