@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    --baddmedicine-colour: #cbff00;
    --white-colour: #c8c8c8;
    --super-dark-colour: #0e0e0e;
    --dark-colour: #1a1a1a;
    --mid-dark-colour: #242424;
    --mild-dark-colour: #313131;
    --gray-colour: #575757;
    --mild-gray-colour: #646464;
    --mild-red-colour: #a53232;
    --light-green-colour: #509b50;
    font-family: "DM Sans", sans-serif;
    color: var( --white-colour );
}

#current-page {
    color: var( --baddmedicine-colour );
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var( --baddmedicine-colour );
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var( --baddmedicine-colour );
}

.error {
    color: var( --mild-red-colour );
    font-weight: bold;
}

.success {
    color: var( --light-green-colour );
    font-weight: bold;
}

.compression-info {
    color: var( --baddmedicine-colour );
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    background-color: var( --dark-colour );
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border-left: 4px solid var( --baddmedicine-colour );
    margin: 0.5rem auto;
    max-width: 500px;
}

.input-error {
    outline: 2px solid var( --mild-red-colour );
}

.flex-center-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

html {
    height: 100%;
    width: 100%;
}

body {
    min-height: 100%;
    background: var( --super-dark-colour );
}

/* Header */
header {
    flex: 0;
    width: 100%;
    margin-bottom: 2rem;
    top: 0;
}

#header-content {
    background: var( --dark-colour );
    width: 100%;
    height: 100px;
}

/* Header Parts 3 */
#logo-holder a {
    display: flex;
}

#logo-holder img {
    width: 128px;
}

/* Search Bar Header Part */
.header-part {
    width: 100%;
}

/* Search Bar */
#search-bar {
    background: var( --mild-dark-colour );
    width: 700px;
    padding: .5rem;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 3px 3px var( --super-dark-colour );
}

#search-query {
    margin-left: 1rem;
    width: 100%;
}

#search-bar img {
    width: 32px;
}

/* Social Navigation */
#social-navigation-list {
    list-style: none;
    gap: 1.5rem;
}

#social-navigation-list img {
    width: 32px;
}

#social-navigation-list #logout-button {
    background-color: #e50914;
    color: white;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
}

#social-navigation-list #logout-button:hover {
    background-color: #ff0f1f;
}

/* Main Navigation */
#main-navigation {
    width: 100%;
    background: var( --dark-colour );
    padding: .5rem 0 1rem;
}

#main-navigation-list {
    list-style: none;
    gap: 3rem;
}

#main-navigation-list a {
    text-decoration: none;
    font-size: 1.25rem;
    transition-property: color;
    transition-duration: 1s;
}
#main-navigation-list a:hover {
    color: var( --baddmedicine-colour );
    transition-property: color;
    transition-duration: 0.5s;
}

/* Main */
main {
    flex: 1;
    width: calc( 100% - 5rem );
}

/* Footer */
footer {
    flex: 0;
    width: 100%;
    margin-top: 5rem;
}
#footer-content {
    background: var( --dark-colour );
    width: 100%;
    height: 50px;
}

/* Buttons & Fields */
input, select {
    background-color: var( --mild-dark-colour );
    padding: 0.3rem 1rem;
    border-radius: 10px;
    border: none;
}

/* Logout Button */
#logout-button-holder button {
    background-color: #e50914;
    color: white;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

#logout-button-holder button:hover {
    background-color: #ff0f1f;
}

input:hover, select:hover {
    outline: 2px solid var( --baddmedicine-colour );
}

input:focus, select:focus {
    outline: 2px solid var( --baddmedicine-colour );
}

button:not( #search-bar-submit ):not( #hamburger-button ):not( #hamburger-close-button ):not( .emoji-option ):not( .recommendation-button ):not( .menu-button ):not( #floating-search-submit ) {
    background-color: var( --mild-dark-colour );
    color: var( --white-colour );
    border: none;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 -5px 2px var( --mid-dark-colour ) inset;
    transition-property: "transform, color";
    transition-duration: 0.5s;
}

button:not( #search-bar-submit ):not( #hamburger-button ):not( #hamburger-close-button ):not( .recommendation-button ):not( .menu-button ):not( #floating-search-submit ):hover {
    cursor: pointer;
    transform: scale( 95% );
    transition-property: "transform, color";
    transition-duration: 0.25s;
    color: var( --baddmedicine-colour );
}

#search-bar-submit {
    background: none;
    border: none;
}
#search-bar-submit:hover {
    cursor: pointer;
}

/* Reaction Block */
.reaction-blocks {
    border-top: 3px solid var( --baddmedicine-colour );
    gap: 2rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.reaction-data div {
    /*background-color: var( --dark-colour ); */
    padding: 0.25rem 1rem;
    border-radius: 10px;
}

.reaction-block {
    text-decoration: none;
    transition-property: "transform";
    transition-duration: 1s;
}

.reaction-block:hover {
    transform: scale( 105% );
    transition-property: "transform";
    transition-duration: 0.5s;
}

.reaction-block h3,
.reaction-block a h3 {
    width: 300px;
    text-wrap: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    transition-property: "color";
    transition-duration: 1s;
}
.reaction-block:hover h3,
.reaction-block:hover a h3 {
    color: var( --baddmedicine-colour );
    transition-property: "color";
    transition-duration: 0.5s;
}

.reaction-block img,
.reaction-block a img {
    width: 300px;
    margin: 1rem 0;
    border-radius: 10px;
}

/* Custom scrollbar for Chrome, Safari and Opera */
.reaction-blocks-container::-webkit-scrollbar {
    height: 8px;
}

.reaction-blocks-container::-webkit-scrollbar-track {
    background: var(--mild-dark-colour);
    border-radius: 4px;
}

.reaction-blocks-container::-webkit-scrollbar-thumb {
    background: var(--gray-colour);
    border-radius: 4px;
}

.reaction-blocks-container::-webkit-scrollbar-thumb:hover {
    background: var(--mild-gray-colour);
}

.reaction-data {
    gap: 1rem;
}

/* Page Controls */
#page-controls {
    gap: 1rem;
}

.current-page {
    color: var( --baddmedicine-colour );
    font-weight: bold;
    font-size: 1.5rem;
}

#page-controls a {
    margin-top: .3rem;
    text-decoration: none;
    padding: 0.5rem;
}

#page-controls a:hover {
    font-weight: bold;
}

/* Laravel Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    list-style: none;
    padding: 0;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--white-colour);
    margin-top: .3rem;
}

.pagination a:hover {
    font-weight: bold;
}

.pagination .active span {
    color: var(--baddmedicine-colour);
    font-weight: bold;
    font-size: 1.5rem;
}

/* Constrain SVG icons in pagination */
.pagination svg {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

/* Style pagination links that contain SVG */
.pagination a[rel="prev"],
.pagination a[rel="next"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.pagination a[rel="prev"] svg,
.pagination a[rel="next"] svg {
    width: 1rem;
    height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
}

/* Also style #page-controls pagination */
#page-controls .pagination {
    margin-top: 0;
}

#page-controls .pagination a {
    margin-top: .3rem;
}

/* Go to page dropdown styles */
.go-to-page {
    display: inline-flex;
    align-items: center;
    margin-left: 1rem;
}

.go-to-page select {
    background-color: var(--mild-dark-colour);
    color: var(--white-colour);
    border: 1px solid var(--baddmedicine-colour);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.go-to-page select:hover {
    background-color: var(--dark-colour);
}

.go-to-page select:focus {
    outline: none;
    border-color: var(--baddmedicine-colour);
    box-shadow: 0 0 0 2px rgba(212, 255, 0, 0.2);
}

/* Hamburger Icon */
#hamburger-holder, #hamburger-close-holder {
    display: none;
    margin-bottom: 1rem;
}

#hamburger-button, #hamburger-close-button {
    padding: 0;
    background: none;
    border: none;
}

#hamburger-button img, #hamburger-close-button img {
    width: 32px;
}

/* Tablet Section */
@media only screen and ( max-width: 1200px ) {
    #header-content {
        flex-direction: column;
        gap: 2rem;
        height: fit-content;
        padding-bottom: 1rem;
        padding-top: 2rem;
    }
}

/* Mobile Section */
@media only screen and ( max-width: 710px ) {
    #search-bar {
        width: 90%;
        min-width: 250px;
    }

    #hamburger-holder {
        display: block;
    }

    #main-navigation-list {
        transition-duration: 0.5;
        flex-direction: column;
        display: none;
    }

    h2 {
        text-align: center;
    }

    #floating-search-bar {
        width: 90%;
        min-width: 250px;
    }
    
    #floating-search-container {
        top: 65px !important;
        margin-top: 0;
    }

    #floating-search-container:not(.hidden) {
        transform: translateY(0) !important;
    }

    #floating-search-query {
        margin-left: 0.1rem;
    }
}

#floating-search-container {
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

#floating-search-container.hidden {
    transform: translateY(-300%);
}

#floating-search-container:not(.hidden) {
    transform: translateY(20px);
}

#floating-search-bar {
    background: var(--mild-dark-colour);
    width: 700px;
    padding: .5rem;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 3px 3px var(--super-dark-colour);
    margin: 0 auto;
}

#floating-search-query {
    margin-left: 1rem;
    width: 100%;
    background: var(--mild-dark-colour);
    border: none;
    color: var(--white-colour);
}

#floating-search-submit {
    background: none;
    border: none;
    padding: 0;
}

#floating-search-submit img {
    width: 32px;
}