* {
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

html {
    font-size: 16px;
    font-family: "Arial", sans-serif !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.w-full, .post-content > img {
    margin: auto;
    width: 100%;
    justify-content: center;
}

@media (min-width: 480px) {
    .w-full,
    .post-content > img {
        max-width: 4800px; /* Adjust this value according to your desired phone width */
    }
}

.post-content > p {
    margin-left: 40px;
    margin-right: 40px;
    line-height: 1.2em;
    height: 3.6em;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 2.5rem;
}

.w-100 {
    width: 100%;
}

.title {
    font-size: 3rem;
}

.post-info {
    font-size: 2rem;
    align-itrems: center;
}

.flair {
    background-color: #F2F3F7;
    border-radius: 8px;
    border: none;
    width: fit-content;
    padding: 2px 7px;
    font-size: 2rem;
    color: #858585
}

.flair:active{

}

.title-div  {
    padding-top: 25px;
    padding-bottom: 30px;
    padding-left: 40px;
}

.bottom-row {
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 30px;
}

button {
    width: 20px;
}

.right-btn {
    background-color: transparent;
    border: none;
    border-radius: 15px;
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 20px;
    box-sizing: content-box;
}

.h-100 {
    height: 100%;
}

.action-btns {
    padding-top: 20px;
    align-itrems: center;
    justify-content: space-between;
}

.action-btns > button {
    margin-left: 30px;
}

.left-bottom {
    justify-content: center;
}

.bold {
    font-weight: bolder;
}

.subreddit-name-icon {
    font-size: 2.2rem;
    margin-bottom: 15px;
    padding-top: 30px;
}

.small-icon {
    height: 24px;
    margin-right: 0px;
}

.post-main {
    border-bottom: 20px solid #F3F3F7;
    user-select: none;
}

.view-post-btn {
    background-color: transparent;
    border: none;
    width: 100%;
    height: inherit;
    display: block;
    position: absolute;
    inset: 0;
}

.acc {
    align-content: center;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: rgb(242,243,247, 0.95);
    padding: 20px;
    font-size: 3rem;
    height: 100px;
    justify-content: space-between;
}

.navbar-btn {
    border: none;
    background-color: transparent;
    width: 70px;
    align-content: center;
    justify-content: center;
}

.nav-icon {
    width: 60px;
    max-height: 100%;
}

.right-top-icons {
    align-content: center;
}

.search-div {
    width: 100%;
    padding: 10px 20px;
    background-color: rgb(242,243,247, 0.95);
}

#backarrow {
    width: 25px;
}

#searchbar {
    padding-left: 70px;
    width: 100%;
    z-index: 1;
    height: 80px;
    font-size: 3rem;
    border-radius: 10px;
    border: none;
    background-color: rgb(238,238,239);
}

#searchlabel {
    position: relative;
}

/*
For the search icon 􀊫
used this handy tool: https://yoksel.github.io/url-encoder/ + this stackoverflow: https://stackoverflow.com/questions/40808493/how-to-add-a-svg-icon-within-an-input
*/
#searchlabel:before {
    content: "";
    z-index: 2;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 30px;
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!--Generator: Apple Native CoreSVG 232.5--%3E%3C!DOCTYPE svg%0APUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='19.082' height='19.2676'%3E%3Cg%3E%3Crect height='19.2676' opacity='0' width='19.082' x='0' y='0'/%3E%3Cpath d='M0 7.79297C0 12.0898 3.49609 15.5859 7.79297 15.5859C9.49219 15.5859 11.0449 15.0391 12.3242 14.1211L17.1289 18.9355C17.3535 19.1602 17.6465 19.2676 17.959 19.2676C18.623 19.2676 19.082 18.7695 19.082 18.1152C19.082 17.8027 18.9648 17.5195 18.7598 17.3145L13.9844 12.5098C14.9902 11.2012 15.5859 9.57031 15.5859 7.79297C15.5859 3.49609 12.0898 0 7.79297 0C3.49609 0 0 3.49609 0 7.79297ZM1.66992 7.79297C1.66992 4.41406 4.41406 1.66992 7.79297 1.66992C11.1719 1.66992 13.916 4.41406 13.916 7.79297C13.916 11.1719 11.1719 13.916 7.79297 13.916C4.41406 13.916 1.66992 11.1719 1.66992 7.79297Z' fill='%235E5E5E' fill-opacity='0.85'/%3E%3C/g%3E%3C/svg%3E%0A") center / contain no-repeat;
}

#arrow-down {
    margin-top: 20px;
    width: 400px;

}

.slip-swiping-container {
    overflow-x: hidden;
}

.setup-auth {
    margin: 40px;
    padding: 20px;
    font-size: 3.5rem;
    border: 5px solid #3578F7;
    border-radius: 5px;
}