@import url("https://fonts.googleapis.com/css?family=Josefin+Sans|Open+Sans|Pacifico|Source+Code+Pro");

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

body {
    font-family: 'Open Sans', sans-serif;
}

#allComments {
    width: 90%;
    margin: 1em 0 4em 1em;
    padding-left: 13.5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    border-radius: 3px;
}

#allComments h3 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
    padding: 0 0 1.5rem 0;
    margin-bottom: -10px;
    margin-left: -30px;
}

#pastComments {
    list-style-type: none;
    margin-left: -40px;
}

#pastComments {
    text-align: justify; 
    text-justify: inter-word;
}

#pastComments li:before {
    font-family: FontAwesome;
    content: "\f086";
    font-size: 24pt;
    color: gray;
    padding-right: 10px;
    position: relative;
}

#pastComments li {
    margin: 0 0 2em 0;
    padding: 10px;
}

#pastComments li span {
    font-size: 80%;
    color: gray;
    font-style: italic;
}

#newComment {
    margin-left: -30px;
}

#newComment textarea {
    height: 72px;
}

#newComment label {
    display: inline-block;
    margin: 1em 0 0 0;
}

#newComment textarea,
#newComment input[type="text"] {
    margin-top: 0;
    width: 50%;
}

#newComment input[type="text"]:focus {
    width: 56%;
}

#tbName{
    border-radius: 0.2rem;
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(48 48 48 / 30%), 0 1px 3px 1px rgb(48 48 48 / 15%);
    font-size: 1.1rem;
}

#txComment{
    border-radius: 0.2rem;
    border-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(48 48 48 / 30%), 0 1px 3px 1px rgb(48 48 48 / 15%);
    font-size: 1.2rem;
    border: 1px solid black;
}

#btnSubmitComment{
    padding: 9px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #000;
    text-decoration: none;
    text-transform: capitalize;
    box-shadow: 0 1px 2px 0 rgb(48 48 48 / 30%), 0 1px 3px 1px rgb(48 48 48 / 15%);
    margin-top: 15px;
    background: white;
    cursor: pointer;
    border: 1px solid black;
    font-size: .9rem;
}

#btnSubmitComment:hover {
    border: 1px solid black;
    font-size: 1rem;
    -webkit-transition: font-size 0.15s ease-in-out;
    transition: font-size 0.15s ease-in-out;
}