@import url("https://fonts.googleapis.com/css2?family=Macondo&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat");

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html {
    background-color: #202124;
    color: #e8eaed;
    box-sizing: border-box;
    min-width: 250px;
}

h3{
    margin-bottom: 20px;
}

#logo {
    width: 3rem;
}

.postGiphy{
    max-width:400px;
}

.newPostBtn {
    width: 5vw;
    min-width: 70px;
    float: bottom;
    position: fixed;
    top: 80vh;
    right: 10vw;
    cursor: pointer;
    content: url('https://i.imgur.com/U5O34Lk.png');
}

.newPostBtn:hover {
    content: url('https://i.imgur.com/RaG4q4e.png');
}

.newPostBtnDisabled {
    content: url('https://i.imgur.com/y7QStEj.png');
    cursor: default;
}

.newPostBtnDisabled:hover {
    content: url('https://i.imgur.com/y7QStEj.png');
}

.roflCount,
.thumbsUpCount,
.hankeyCount {
    padding: 15px;
}

.roflCount:hover,
.thumbsUpCount:hover,
.hankeyCount:hover {
    padding: 15px;
    cursor: pointer;
    background-color: #202124;
    border-radius: 5px;
}


header {
    float: top;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 7vh;
    left: 0;
    background-color: #202124;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    margin-top: 7vh;
    padding-top: 3vh;
    display: flex;
    justify-content: center;
}

.wrapper {
    width: 60vw;
    min-width: 250px;
}


#newPostBtn {
    width: 5vw;
    min-width: 70px;
    float: bottom;
    position: fixed;
    top: 80vh;
    left: 80vw;
}
/* ------------------------ Post Stuff ------------------------ */
.post {
    position: relative;
    border-radius: 10px;
    background-color: #303134;
    margin-bottom: 3vh;
}

.postWrapper {
    padding: 5px 25px 20px 25px;
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "postTitle"
        "dateTime"
        "preview"
        "reactions"
        "comments";

}


.delete-edit-btns {

    position: absolute;
  
    cursor: pointer;
  }
  
  .delete-btn {
    top: 20px;
    right: 20px;
  }
  
  .edit-btn {
    top: 20px;
    right: 50px;
  }


.postTitle {
    grid-area: postTitle;
    padding: 15px 0 5px 0;
}

.dateTime {
    grid-area: dateTime;
    color: #a9aaab
}

.preview {
    grid-area: preview;
    margin: 10px 0 10px 0;
}

.previewText{
    height: fit-content;
    word-wrap: break-word;
    padding-bottom: 10px;
}

.comments {
    grid-area: comments;
    cursor: pointer;
}

.commentsText{
    padding:10px 15px 10px 15px;
    width: max-content;
}

.commentsText:hover {
    border-radius: 5px;
    background-color: #202124;
}

.commentsBody {
    padding: 15px 20px 15px 20px;
}


.reactions {
    grid-area: reactions;
    display: inline-flex;
}

.commentDiv {
    margin-bottom: 10px;
}

.commentSubmitBtn {
    margin-bottom: 20px;
}

.commentDates {
    color: #a9aaab
}

.reactions>.reaction:hover {
    cursor: pointer
}

#postForm {
    border-radius: 10px;
    background-color: #303134;
    opacity: 1;
    padding: 30px 50px 30px 50px;
}

#createPost {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    float: left;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#formBg {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    float: left;
    height: 100%;
    width: 100%;
    background-color: #202124;
    opacity: 0.9;
}

input,
textarea,
#formTitle {
    margin-bottom: 10px;
}


.commentsBodyHidden {
    display: none;
}

.commentInput {
    width: 100%;
}

.commentsBody {
    display: block;
    padding: 15px 20px 15px 20px;
}

#postForm {
    border-radius: 10px;
    background-color: #303134;
    opacity: 1;
    padding: 30px 50px 30px 50px;
}

#createPost {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    float: left;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#formBg {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    float: left;
    height: 100%;
    width: 100%;
    background-color: #202124;
    opacity: 0.9;
}



input,
textarea,
#formTitle {
    margin-bottom: 10px;
}

@media (max-width:750px){
    .postGiphy{
        width:100%;
    }

    .newPostBtn {
        content: url('https://i.imgur.com/RaG4q4e.png');
    }

    .wrapper {
        min-width: 90vw;
      }
}

@media screen and (min-width:750px) {
    .postWrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "postTitle reactions"
            "preview preview"
            "comments dateTime";

    }
}

@media screen and (min-width:1100px) {
    .postWrapper {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "postTitle reactions"
            "preview preview"
            "comments dateTime";

    }

    .previewText{
        max-width: 56vw;
    }
}

@media screen and  (min-width:1400px) {
    .postWrapper {
        grid-template-columns: 3fr 1fr;
        grid-template-areas:
            "postTitle reactions"
            "preview preview"
            "comments dateTime";
    }

    .previewText{
        max-width: 59vw;
    }
}