:root {
    /* Color */
    --yellow: #F5C518;
    --dark-gray: #121212;
    --gray: #1F1F1F;
    --dark-color: #120E00;
    --light-gray: #D8DFE7;
    --text-color: #7a7a7a;
    --btn-color: #242424;
    --brand-yellow: #FFD700;
    --blue: #216FC3;
    --brown: #59564C;
    --black: black;
    --white: white;
    --search-color: #A09F99;

    /* Sizes */
    --1px: 0.063rem;
    --5px: 0.313rem;
    --8px: 0.5rem;
    --10px: 0.625rem;
    --12px: 0.75rem;
    --14px: 0.875rem;
    --16px: 1rem;
    --18px: 1.125rem;
    --20px: 1.25rem;
    --22px: 1.375rem;
    --24px: 1.5rem;
    --26px: 1.625rem;
    --28px: 1.75rem;
    --32px: 2rem;
    --40px: 2.5rem;
    --48px: 3rem;
    --50px: 3.125rem;
    --64px: 4rem;
    --72px: 4.5rem;
    --80px: 5rem;
    --100px: 6.25rem;
    --125px: 7.813rem;
    --150px: 9.375rem;
    --200px: 12.5rem;
    --300px: 18.75rem;
    --400px: 25rem;
    --450px: 28.125rem;
    --500px: 31.25rem;
    --640px: 40rem;
    --800px: 50rem;
    --960px: 60rem;

     /* Font Weights */
    --thin: 100;
    --extra-light: 200;
    --light: 300;
    --normal: 400;
    --regular: 500;
    --medium: 600;
    --semi-bold: 700;
    --bold: 800;
    --extra-bold: 900;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-color);
    color: var(--white);
}

.container {
    margin: 0 auto;
    padding: 0 5%;
}

/* 
========================================================================================== 
    Navigation
========================================================================================== 
*/

.navbar__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5em;
}

.navbar__icon--wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbar__item {
    color: var(--white);
    text-decoration: none;
}

.logo {
    width: 100%;
    height: var(--32px);
}

.searchbar__wrapper {
    display: flex;
    align-items: center;
    background-color: var(--dark-color);
    border-radius: var(--8px);
    padding: 0 var(--8px);
    width: var(--500px);
    border: 1px solid var(--brown);
    transition: box-shadow 0.2s ease-in-out;
}

.searchbar__icon {
    font-size: var(--24px);
    color: var(--white);
    margin-right: var(--8px);
    opacity: 75%;

}

.searchbar__field {
    padding: var(--12px) var(--8px);
    background: transparent;
    color: var(--white);
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: var(--16px);
}

/* Placeholder styling */
.searchbar__field::placeholder {
    color: var(--white);
    opacity: 75%;
}

/* Focus state for the input field */
.searchbar__field:focus {
    color: var(--white);
}

/* Smooth transitions for hover and focus effects */
.searchbar__wrapper:focus-within {
    box-shadow: 0 0 var(--10px) var(--brand-yellow);
}

/* 
========================================================================================== 
    Navigation
========================================================================================== 
*/

.hero__section {
    padding: var(--125px) 0;
}

.hero__title {
    font-size: var(--48px);
    font-weight: 500;
}

.databar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--16px) 0;
    margin-bottom: var(--64px);
    border-bottom: 1px solid var(--brown);
}

.databar__wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--22px);
}

.databar__button {
    padding: var(--12px);
    width: var(--48px);
    height: var(--48px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.databar__button:hover {
    background-color: var(--btn-color);
    transform-origin: center center;
    border-radius: 50%;
    transition: transform .2s cubic-bezier(.175,.885,.32,1),opacity .2s cubic-bezier(.175,.885,.32,1);
}

.databar__icon {
    color: var(--light-gray);
}

.databar__icon:hover {
    color: var(--brand-yellow);
}

.databar__icon:active {
    color: var(--brand-yellow);
}

.showcase__tile--image {
    width: 100%;
    height: var(--500px);
    object-fit: cover;
    margin-bottom: var(--18px);
    border-radius: var(--8px);
}


.showcase__tile--image:hover {
    transform: translateY(-0.6rem);
    transition: .3s all linear;
}

.showcase__title {
    font-size: var(--16px);
}

.showcase__date {
    color: var(--text-color);
    font-size: var(--16px);
}

.btn {
    background-color: var(--btn-color);
    border: none;
    color: var(--white);
    padding: var(--12px);
    width: 100%;
    border-radius: var(--8px);
    margin: var(--18px) 0;
    transition: border-color .3s,transform .3s,background-color .3s,color .3s;
}

.btn:hover {
    cursor: pointer;
    background-color: var(--brand-yellow);
    transform: scale3d(.95,.95,1.001);
    color: var(--dark-color);
}

.btn small {
    font-size: var(--14px);
}


.favorite__icon {
    color: var(--brand-yellow);
    margin-right: 0.5em;
    height: var(--24px);
    width: var(--24px);
    transition: color .3s;
}

.btn:hover .favorite__icon {
    color: var(--dark-color); 
}

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



/* 
========================================================================================== 
    Grid View
========================================================================================== 
*/

.showcase__tiles--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--32px);
}

/* 
========================================================================================== 
    Grid View
========================================================================================== 
*/

/* 
========================================================================================== 
    List View
========================================================================================== 
*/


.showcase__tiles--list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--32px);
}

.showcase__list--wrapper {
    display: flex;
    flex-direction: row;
}

.showcase__list--image {
    width: var(--300px);
    object-fit: cover;
    border-radius: var(--8px);
}

.showcase__list--image:hover {
    transform: translateY(-0.6rem);
    transition: .3s all linear;
}

.showcase__list--content {
    margin: 0 var(--32px);
}

.showcase__list--title {
    font-size: var(--32px);
}

.showcase__list--date {
    color: var(--text-color);
    font-size: var(--16px);
    margin: 0.5em 0;
}

.showcase__list--description {
    font-size: var(--18px);
    margin: 0.5em 0;
}

.showcase__list--btn {
    display: block;
    width: var(--300px);
    background-color: var(--btn-color);
    border: none;
    color: var(--white);
    padding: var(--12px);
    border-radius: var(--8px);
    margin-top: var(--64px);
    transition: border-color .3s,transform .3s,background-color .3s,color .3s;
}

.showcase__list--btn small {
    font-size: var(--14px);
}  

.showcase__list--btn:hover { 
    cursor: pointer;
    background-color: var(--brand-yellow);
    transform: scale3d(.95,.95,1.001);
    color: var(--dark-color);
}

.showcase__list--btn:hover .favorite__icon {
    color: var(--dark-color); 
}

.showcase__list--divider {
    margin: var(--24px) 0;
    border-bottom: 1px solid var(--brown);
}

.delete__button {
    color: red;
    opacity: 0.7;
    margin-right: 0.5em;
    height: var(--24px);
    width: var(--24px);
}

.delete__button:hover {
    cursor: pointer;
    transition: transform .2s cubic-bezier(.175,.885,.32,1),opacity .2s cubic-bezier(.175,.885,.32,1);
}


/* 
========================================================================================== 
    List View
========================================================================================== 
*/

/* 
========================================================================================== 
    Footer
========================================================================================== 
*/

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--32px);
    margin-top: var(--64px);
}

.divider {
    margin-top: var(--125px);
    border-top: 1px solid var(--brown);
}

.footer__col {
    display: flex;
}

.footer__col li {
    list-style: none;
    margin-bottom: 1.5em;
    font-size: var(--16px);
}

.footer__app--wrapper {
    display: flex;
    gap: var(--22px);
}

.footer__app--logo {
    border-radius: var(--8px);
    height: var(--125px);
}

.footer__app--badge__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--22px);
}

.footer__app--badge {
    height: var(--40px);
}

.footer__bottom--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--64px) 0;
}

.footer__logo--wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--22px);
}

.footer__logo {
    display: block;
    height: var(--32px);
}

.footer__copyright {
    display: block;
    font-size: var(--14px);
    opacity: 0.7;
    white-space: nowrap;
}

.footer__social--icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--22px);
}

.footer__social--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--22px);
    padding: var(--12px);
}

.footer__social--icon:hover {
    background-color: var(--btn-color);
    transform-origin: center center;
    border-radius: 50%;
    color: var(--brand-yellow);
    transition: transform .2s cubic-bezier(.175,.885,.32,1),opacity .2s cubic-bezier(.175,.885,.32,1);
}


/* 
========================================================================================== 
    Footer
========================================================================================== 
*/

/*
===============================================================================================
        RWD Device Styles
===============================================================================================
*/

@media only screen 
and (width > 2560px)
{

    .container {
        margin: 0 auto;
        padding: 0 var(--960px);
    }


    .showcase__title {
        font-size: var(--22px);
    }
    
    .showcase__date {
        color: var(--text-color);
        font-size: var(--18px);
    } 

}

/* Tablet in portrait */

@media only screen 
and (width > 768px) 
and (width < 1025px) 
and (orientation : portrait) 
{
    .showcase__tiles--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--32px);
    }

    .showcase__list--image {
        width: var(--200px);
    }

    .footer__bottom--wrapper {
        flex-direction: column-reverse;
        row-gap: var(--32px);
        margin: var(--64px) 0;
    }
}

/* Smartphone in portrait */

@media only screen 
and (width > 320px) 
and (width < 768px) 
and (orientation: portrait ) 
{
    .navbar__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1em;
        gap: var(--16px);
        padding: var(--8px);
    }

    .searchbar__wrapper {
        width: 100%;
    }

    .showcase__tiles--grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--32px);
    }

    /*
    ====================================================================================================
    Mobile List View
    ====================================================================================================
    */

    .showcase__tiles--list {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: var(--32px);
    }
    
    .showcase__list--wrapper {
        display: flex;
        flex-direction: column;
    }
    .showcase__list--content {
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    
    .showcase__list--image {
        width: 100%;
        height: var(--350px);
    }
    
    .showcase__list--title {
        font-size: var(--22px);
        margin-top: 0.5em;
    }
    
    .showcase__list--date {
        color: var(--text-color);
        font-size: var(--16px);
        margin: 0.1em 0;
    }
    
    .showcase__list--description {
        display: flex;
        flex-wrap: wrap;
        font-size: var(--14px);
        margin: 0.3em 0;
    }

    .showcase__list--btn {
        width: 100%;
    }

    .showcase__list--divider {
        display: none;
    }

    /*
    ====================================================================================================
    Mobile List View
    ====================================================================================================
    */

    .footer__grid {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--32px);
    }

    .footer__col {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .footer__col li {
        list-style: none;
        margin-bottom: 1.5em;
        font-size: var(--16px);
        text-align: center;
    }

    .footer__bottom--wrapper {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        row-gap: var(--32px);
        margin: var(--64px) 0;
    }

    .footer__social--icons {
        gap: var(--16px);
    }
}