html {
    background-image: url(asset/speculative%20website%20background.png);

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*hovertext*/

.p1 {
    font-family: 'Klee One', cursive;
    color: hsla(52, 21%, 100%, 1);
    font-size: 1.3rem;
}

.p1-a .eng {
    display: none;
}

.p1-a:hover .ai {
    display: none;
}

.p1-a:hover .eng {
    font-family: 'Courier New', monospace;
    display: inline;
}

.p2 {
    font-family: 'Klee One', cursive;
    color: hsla(52, 21%, 100%, 1);
    font-size: 1 rem;
}

.p3 {
    font-family: 'Klee One', cursive;
    color: hsla(52, 21%, 100%, 1);
    font-size: 0.8 rem;
}

.p4 {
    font-family: 'Klee One', cursive;
    color: hsla(55, 86%, 69%, 1);
    font-size: 0.8 rem;
}

/*header */
.divHeaderFlex {
    margin: auto;
    margin-bottom: 20px;
    //max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    //top: 0rem;
    align-items: center;
    justify-content: center;
}

.menuLeft {
    align-items: flex-start;
}

.menuRight {}

.title {
    align-items: center;
    justify-content: center;
}

.titlePic {
    min-width: 100px;
    max-width: 100%;
}

.eye {
    min-width: 100px;
    max-width: 100%;
}

.content {
    padding-top: 100px;
}

.divWithDisplayFlex {
    /* centers the element */
    margin: auto;

    /* just to add a nicer spacing between the two flexboxes */
    margin-bottom: 50px;

    /* sets the maximum width of the flexbox so it doesn't grow too large on wider screens */
    max-width: 1300px;

    /* 'display: flex' on a container makes its children into flex items */
    display: flex;

    flex-direction: row;

    /* sets the gap between the rows + columns, can set individually with column-gap an row-gap */
    gap: 20px;

    /* wraps the children making them fit within the flex box */
    flex-wrap: wrap;
}


.mainpostBorder {
    border: 2px solid;
    border-color: hsla(55, 86%, 69%, 1);
    max-width: 1000px;
    padding: 10px;
    margin-top: 10px;
}

.mainpostBorderImg {}

.img header {
    padding-bottom: 20px;

}

.mainpost {
    margin: 8px;
    padding: 15px;
    padding-left: 26px;
    background-color: hsla(55, 86%, 60%, 0.44);
}
.mainpost:hover{
        background-color: hsla(55, 86%, 20%, 1);

}

.commentRightBorder {
    margin: auto;
    margin-right: 0px;
}

.commentBorderCenter {
    margin: auto;
    width: 1100px;
}

.comment {
    padding: 20px;
    padding-left: 26px;
    max-width: 700px;
    background-color: hsla(55, 86%, 60%, 0.44);
    border-radius: 25px;
}

.comment:hover{
        background-color: hsla(55, 86%, 20%, 1);

}

.shortComment {
    margin: auto;
    padding: 15px;
    padding-left: 17px;
    max-width: 450px;
    background-color: hsla(55, 86%, 60%, 0.44);
    border-radius: 25px;
}

.shortComment:hover{
        background-color: hsla(55, 86%, 20%, 1);

}

.shortCommentBorderLeftCenter {
    margin: auto;
    margin-left: 200px;
}

.shortCommentBorderRightCenter {
    margin: auto;
    margin-right: 200px;
}

p1 {
    font-family: 'Courier New', monospace;
    color: hsla(52, 21%, 100%, 1);
    font-size: 1.3rem;
}

p2 {
    font-family: 'Courier New', monospace;
    color: hsla(52, 21%, 100%, 1);
    font-size: 1 rem;
}

p3 {
    font-family: 'Courier New', monospace;
    color: hsla(52, 21%, 100%, 1);
    font-size: 0.8 rem;
}

.avatorCenter {
    margin: auto;

}

.avatorDown {
    margin: auto;
    margin-left: 60px;
    margin-bottom: 0px;
}

.avatorRight {
    margin: auto;
    margin-right: 0px;
    width: 260px;

}

.avatorDownRight {
    margin: auto;
    margin-right: 0px;
    margin-bottom: 0px;
}

.parent {
    position: relative;
    top: 0;
    left: 0;
}

.avatorTopBig {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 250px;
}

.avatorBig {
    position: relative;
    top: 0;
    left: 0;
    max-width: 250px;
}

.avatorTopSmall1 {
    position: absolute;
    top: 0px;
    left: 10px;
    max-width: 50px;
}
.avatorTopSmall2 {
    position: absolute;
    top: 0px;
    left: 80px;
    max-width: 50px;
}
.avatorTopSmall3 {
    position: absolute;
    top: 0px;
    left: 150px;
    max-width: 50px;
}

.avatorSmall {
    position: relative;
    top: 0;
    left: 0;
    max-width: 50px;
    padding-right: 10px;
    padding-left: 10px;
}
.avatorTop {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 175px;
}

.avator {
    position: relative;
    top: 0px;
    left: 0px;
    max-width: 175px;
    //margin-left: 30px;
    //margin-right: 30px;
}


.text {
    padding: 20px;
    background-color: beige;
}




@media screen and (min-width: 550px) {
    .divWithDisplayFlex {
        /* lays the children out in rows, could also be 'column', 'row-reverse', or 'column-reverse' */
        flex-direction: row;
    }

    .one {
        /* sets grow factor of item size, so this will grow up to twice as much */
        flex-grow: 3;
        /* sets how much item will shrink within flex box, 1 is same as others, 0 is won't shrink. More than one is proportional. */
        flex-shrink: 0;
        /* sets the initial size it'll grow and shrink from; */
        flex-basis: 300px;
    }

    .two {
        flex: 0 1 100px;
    }

    .three {
        flex: 0 1 100px;
    }

}