/* Base */
* {
    scroll-margin-top: 5dvh; /*Centers it when getting there from another url via # */
}

/* Header */
header {
    position: static;
}
#dropdown_transition_item {
    position: absolute;
    top: 0;
    right: 0.5rem;
}
#dropdown_button_container {
    position: absolute;
    top: 4rem;
    right: 0.6rem;
}

/* Main */
main {
}

/* Search */
#search_bar {
    background-color: var(--dark-bg-color);
    border: var(--darkest-bg-color) solid 2px;
    box-shadow: var(--secondary-color) 0 0 6rem;
    width: 80%;
    height: 2rem;
    font-size: 1.2rem;
    margin: 2rem calc(50% - 40%) 4rem calc(50% - 40%);
    padding: 0.2rem 0.4rem;
    font-family: 'Times New Roman', Times, serif;
    transition: background-color 0.3s, border 0.3s;
    position: sticky;
    top: 1rem;
    z-index: 3;
}
#search_bar:hover {
    border: var(--primary-color) solid 2px;
}
#search_bar:focus {
    border: var(--primary-color) solid 2px;
}

/* The feed */
#feed {
    width: 100%;
    height: fit-content;
}

/* Content in main */
.article:not(:has(~ .article)) { /* Gör så bara sista .article har margin-bottom = 0 */
    margin-bottom: 2.5rem;
}
.type_text {
    width: fit-content;
    background-color: var(--highlight-color);
    font-size: 1.6rem;
    padding: 0.2rem;
    margin-left: 0.4rem;
    margin-right: 0.6rem;
    position: absolute;
    top: 1.6rem;
    right: 1rem;
}
.no_img .type_text { /* In the case that there is no image */
    position: static;
    float: right;
}
@media (width < 30rem) {
    .type_text {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        position: static;
        top: 0;
        right: 0;
        padding: 0;
    }
}
.no_img img {
    display: none;
}
.author_text {
    width: 100%;
    color: var(--text-color);
    margin-top: 0.4rem;
    text-align: end;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.author_text a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}
.author_text a:hover {
    color: var(--primary-color);
}

#feed .article.hear_me_out {
    text-align: center;
}
#feed .article.hear_me_out p {
    font-size: 1rem;
}
.smash_pass_area {
    width: 100%;
    height: 4rem;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
}
.HMO_button {
    background-color: white;
    width: 90%;
    height: 4rem;
    border: var(--darkest-bg-color) solid 2px;
    margin: auto;
    transition: 0.2s;
}

#feed .article.notis {
    width: calc(60%);
    margin-left: calc(50% - 30%);
}

.text_when_empty {
    width: 100%;
    font-size: 2rem;
    text-align: center;

    display: none;
}