:root {
    --blue-color: #8BCBC8;
    --icing-color: #DAE9E4;
    --orange-color: #FDAE84;
    --sakura-color: #ECC7C0;
    --cranberry-color: #3C2E3D;
    --main-color: var(--cranberry-color);
    --accent-color: var(--orange-color);
    --opacity: 1.0;
    --dark-main-color: #2C1E2D;
    --curr_comment:2;
}
body{
    top: 0px;
    left: 0px;
    border:0px;
    height:92vh !important;
    display: grid;
    grid-template-columns: 15% 15% 40% 15% 15%;
    grid-template-rows: 10% 10% 5% 15% 15% 15% 20%;
    width:92vw;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
[id="top-border"]{
    grid-column:1/12;
    grid-row: 1;
}

#profile_button, #search_button, #care,
#question_button, #knowledge, #training  {

}
#question_button{
    margin-top: 5vh;
}
[id="profile_button"]{
    grid-column:1;
    grid-row:4;
}
[id="search_button"]{
    grid-column:1;
    grid-row:5;
}
[id="question_button"]{
    grid-column:5;
    grid-row:7;
    background-color: white;
}

[id="knowledge"]{
    grid-column:5;
    grid-row:4;
    background-color: white;
}
[id="training"]{
    grid-column:5;
    grid-row:5;
    background-color: white;
}
[id="care"]{
    grid-column:5;
    grid-row:6;
    background-color: white;
}

.img{
    max-width: 70%;
    max-height: 70%;
}
.labels{
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
    font-size: 1.25vh;
    font-family: 'Lemon', cursive;
}
.main_buttons{
    height: 14vh;
    width: 14vh;
    margin-bottom: 10vh;

    align-self: center;
    justify-self: center;
    border-radius:50%;
    border: 0.5vh solid #8BCBC8  !important;
    border-width: 1px;
    margin-left: 4vw;

} .main_buttons:hover {
    height: 15vh;
    width: 15vh;
    border: 1vh solid var(--sakura-color)  !important;
    transition: all 200ms ease-in;
}
.main_buttons:focus {
    outline: 0;
}

[id="forum_container"]{
    grid-column: 1/5;
    grid-row: 2/8;
    margin-top: 2vh;
    margin-left: 2vw;
    height:100%;
    width: 100%;
    background-color: var(--cranberry-color); 
    border-radius: 10px;
    border: 5px solid var(--cranberry-color);
    display: grid;
    grid-template-rows: 5% repeat(var(--num_rows));
    grid-template-columns: 100%;
    grid-row-gap: 5px;
    overflow-y: auto;
}

[id="comment_input"]{
    
    grid-row:var(--curr_comment);
    grid-column: 1;
    z-index: 5;
    background-color: transparent;
    display:none;
    grid-template-rows: 30% 20% 10% 40% ;
    grid-template-columns: 10% 40% 40% 10%;
    height:100%;
}
[id="new_question"]{
    grid-row:2/3;
    grid-column: 1;
    z-index: 5;
    background-color: var(--cranberry-color);
    display:none;
    grid-template-rows: 20% 40% 40% ;
    grid-template-columns: 10% 60% 30%;
}

.pregunta_2{
    grid-row:1/2;
    grid-column:2;
    font-size: 3vh;
    line-height: 6vh;
    font-family: 'Lemon', cursive;
    text-align:center;
    color:white;
    
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
}
.your_question{
    grid-row:2/5;
    grid-column: 2/5;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8vw;
    vertical-align: top;
}
.post{
    grid-row: 2;
    grid-column: 1;
    background-color: var(--sakura-color);
    border-width: 1px;
    width:100%;
    height: 100%;
    font-family: 'Lemon', cursive;
    text-align: center;
    font-size: 2vh;

}
.cancel{
    grid-row: 3;
    grid-column: 1;
    background-color: var(--blue-color);
    border-width: 1px;
    
    width:100%;
    height: 100%;
    font-family: 'Lemon', cursive;
    text-align: center;
    font-size: 2vh;
}
[id="selection"]{
    font-size: 2vh;
    font-family: 'Lemon', cursive;
    text-align: center;
    grid-row:1/2;
    grid-column:3/5;
    background-color: var(--icing-color);
    
}

.entry{
    background-color: var(--cranberry-color);
    display:grid;
    grid-template-rows: 0% 100% 0%;
    grid-template-columns: 10% 90% 0% 0% ;
    opacity: var(--opacity);
    grid-column:1;
}

[id="entry_1"]{
    grid-row: 2;
    grid-column: 1;
}


.voting {
    display: grid;
    grid-row: 2;
    grid-column: 1;
    height: 100%;
    background-color: var(--blue-color);
    grid-template-rows: 25% 30% 25% 20%;
    grid-template-columns: 100%;
}

.options {
    display: grid;
    grid-row: 4;
    grid-column: 1;
    height: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
}

.main_text{
    height:30vh;
    grid-row: 2;
    grid-column: 2/4;
    background-color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 2vw;
    align-items: center;
    

    display:grid;
    grid-template-rows: 30% 50% ; 
    overflow-y: auto;
}

.comments{
    grid-row:2;
    text-indent: 10%;
    font-size:1.5vw;
    font-weight:lighter;
    border: .6vh solid var(--cranberry-color);
    border-left: 0;
    border-right: 0;
    padding: 0 ;
    margin: 0;
    margin-top: auto;
}
.popularity{
    grid-row: 2;
    grid-column: 1;
    background-color: var(--blue-color); 
    font-family: 'Helvetica';
    color: white;
    text-align: center;
    font-weight:bold;
    /* padding-bottom:2px; */
    font-size: 2.5vw;
    /* height: 100%; */
    line-height: 5vw;   
    margin: auto;
}
.up{
    grid-row: 1;
    grid-column: 1;
    height:100%;
    width: 100%;
    background-color: var(--cranberry-color);
    position: inline;
    border-width: 1px;
    outline: 0;
} .up:hover {
    background-color: var(--dark-main-color);
}
.down{
    grid-row: 3;
    grid-column: 1;
    height:100%;
    width: 100%;
    background-color: var(--cranberry-color);
    position: relative; 
    border-width: 1px;
    outline: 0;
} .down:hover {
    background-color: var(--dark-main-color);
}
.favorite{
    grid-row: 1;
    grid-column: 1;
    height: 100%;
    background-color: rgb(139, 203, 200);
    border-width: 1px;
    outline: 0;
} 
.comment{
    grid-row:1;
    grid-column:2;
    height: 100%;
    background-color: var(--accent-color);
    border-width: 1px;
    outline: 0;
} .comment:hover {
    background-color: #FDAE74;
}

.popularity_num{
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
    padding-left: 8px;
    margin: auto;
}
.indv_comments{
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
    padding-bottom: 1vh;
    border-top: .6vh solid whitesmoke;
}

.add_comments{
    -webkit-margin-before:0em;
    -webkit-margin-after:0em;
    padding: 0;
    padding-bottom: 1vh;
    min-width: 85%;
    width: 90%;
    max-width: 90%;
    text-indent: 1%;
    color: var(--accent-color);
    background-color: whitesmoke;
    border: 0;
    border-top: .6vh solid whitesmoke;
    font-size: 2vh;
}

.postCommentBox:hover 
.add_comments {
    color: white;
    background-color: var(--cranberry-color);
    border: 0;
    border-top: .6vh solid var(--cranberry-color);
    transition: 100ms ease-in all;
}
::placeholder {
    color: var(--accent-color);
}
.postComment {
    width: 9%;
    font-size: 2vh;
    padding: 1vh;
    padding-top: 0;
    background-color: whitesmoke;
    color: whitesmoke;
    border: 0;
    border-top: .6vh solid whitesmoke;
}

.postCommentBox:hover 
.postComment {
    background-color: var(--accent-color);
    color: white;
    border: 0;
    border-top: .6vh solid var(--accent-color);
    transition: 100ms ease-in all;
}
.favoritestar {
    height: 40%;
    margin: auto;
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
.favoritestar:hover{
    /* margin-top: 0;  */
    height: 50%;
    margin-top: 0%;
    transition: all 100ms ease-out;
    cursor: pointer;
}