/* version 0.01 */
/* Font family for MS and OS:
  OS: Futura, Verdana, Lucida Sans
  MS: Verdana, DejaVu Sans, Lucida Sans 
  font-family: 'Futura', 'Trebuchet', Verdana, sans-serif;
  font-family: 'Cambria', 'Futura', 'DejaVu Sans', Verdana, sans-serif;
  */
  * {
    font-family: 'Trebuchet', 'DejaVu Sans', Verdana, sans-serif;
    font-size: 16px;
}

body {
    min-width: 330px;
    max-width: 900px;
    background: #FEFFFE;
}

/* helper styles for debugging javascript */
.pass:before {
    content: 'PASS: ';
    color: blue;
    font-weight: bold;
}

.fail:before {
    content: 'FAIL: ';
    color: red;
    font-weight: bold;
}

/* helper styles for buttons
*/
.grid-container {
    width: 890px;
    font-size: 20px;
    display: grid;
    grid-template-columns: 80% auto 50px 40px;
    padding: 20px 10px 20px;
    box-sizing: border-box;
}

.grid-item1 {
    text-align: left;
}

.grid-item2 {
    text-align: right;
}

.grid-item3 {
    text-align: right;
}

.closeBut {
    font-size: 1.32rem;
    background: rgb(230, 230, 230);
    color: rgb(5, 5, 5);
    border-radius: 10px;
    border: 2px solid #BBBBBB;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.langBut {
    font-size: 1.338rem;
    background: rgb(230, 230, 230);
    color: rgb(5, 5, 5);
    border-radius: 10px;
    border: 2px solid #BBBBBB;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.myBut {
    font-size: 1.339rem;
    background: rgb(230, 230, 230);
    color: rgb(5, 5, 5);
    border-radius: 10px;
    border: 2px solid #BBBBBB;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.myBut:hover {
    background-color: #ff9980;
}

.closeBut:hover {
    background-color: #ff9980;
}

.langBut:hover {
    background-color: #ff9980;
}

#myBar {
    border-bottom: 3px solid;
    border-bottom-color: rgba(220, 220, 220, 1.0);
    margin-left: 20px;
}

#p_title {
    font-size: 1.4rem;
    text-align: left;
    padding: 40px 20px 20px;
}

#book_title {
    font-size: 1.8rem;
    text-align: left;
    margin-left: 20px;
}

#sitex {
    font-size: 1.5rem;
    text-align: justify;
    text-indent: 2.0rem;
    letter-spacing: 2px;
    padding: 0px 20px 0px 20px;
    box-sizing: border-box;
}

/*
*/

@media screen and (min-width: 900px) {   
    
    #suby {
        text-align: left;
        overflow: hidden;
    }

    #sitex {
        box-sizing: border-box;
        padding: 0px 20px 0px 20px;
    }

/*
*/
}

@media screen and (max-width: 650px) {
    
    .grid-item2 {
        margin-right: 0px;
    }
}