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

body {
    background-color: #161a1d;
    font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
    font-family: "Bebas Neue", sans-serif;
}

main {
    width: 100%;
    padding: 50px 0px;
}



/***********************************************************************************************************************

OTHER

************************************************************************************************************************/

.heading {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.heading h2 {
    color: #fff;
    font-size: 1.8rem;

}

.heading h2::after {
    content: "";
    background-color: #e75658;
    width: 60px;
    height: 5px;
    display: block;
}


.heading2 {
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
}

.heading2 h2 {
    color: #fff;
    font-size: 1.8rem;

}

.heading2 h2::after {
    content: "";
    background-color: #e75658;
    width: 60px;
    height: 5px;
    display: block;
}

#load-more-btn {
    width: 100%;
    background-color: #e75658;
    color: #fff;
    padding: 10px 0px;
    font-family: 'Inter', sans-serif;
    border: none;
    font-weight: 700;
    margin-top: 30px;
}

#load-more-btn:hover {
    background-color: #0b0d0e;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.flash-message {
    width: 100%;
    background-color: #e75658;
    color: #fff;
    padding: 10px;
    text-align: center;
}


/***********************************************************************************************************************

ADMIN

************************************************************************************************************************/

.admin-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 5fr;
}

/***********************************************************************************************************************

ADMIN LEFT

************************************************************************************************************************/

.admin-left {
    height: 100vh;
    position: sticky;
    background-color: #2e363b;
    padding: 50px 0px;
}

/***********************************************************************************************************************

ADMIN LEFT - WELCOME

************************************************************************************************************************/

.avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 10px;
}

.admin-left section {
    padding: 0px 30px;
}

.welcome {
    text-align: center;
}

.welcome h3 {
    font-size: 1.5rem;
    color: #fff;
}

.quote {
    color: #8495a0;
    font-size: 1.1rem;
}


/***********************************************************************************************************************

ADMIN LEFT - ADMIN ACTIONS/LINKS

************************************************************************************************************************/

.admin-links {
    margin: 50px 0px;
}

.admin-links ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-links a:link, .admin-links a:visited {
    background-color: #e75658;
    color: #fff;
    display: block;
    padding: 10px;
    text-decoration: none;
    font-weight: 700;
}

.admin-links a:hover {
    background-color: #000;
    transition: 0.3s ease-in-out;
}

.admin-links i {
    margin-right: 5px;
}

.admin-links h2 {
    color: #fff;
    margin-bottom: 10px;
}

/***********************************************************************************************************************

ADMIN MAIN

************************************************************************************************************************/

.admin-main {
    width: 70%;
    margin: 0 auto;
    padding: 50px 0px;
}



.admin-main h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.admin-main h2::after {
    content: "";
    background-color: #e75658;
    width: 60px;
    height: 5px;
    display: block;
}

/***********************************************************************************************************************

ADMIN - ANALYTICS

************************************************************************************************************************/

.analytic-container {
    width: 100%;
}

.analytic-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.analytic-content > div {
    background-color: #e75658;
}

.admin-generic-container {
    width: 100%;
}

.admin-generic-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.admin-generic-content > div {
    background-color: #2e363b;
    padding: 30px;
}

.admin-generic-content h3 {
    color: #fff;
}

.admin-generic-content p {
    color: #8e9ea8;
}

/***********************************************************************************************************************

ADMIN - ADD POSTS

************************************************************************************************************************/

.add-post-container {
    color: #aec0cc;
    padding: 0px;
}

.add-post-container input[type=text], .add-post-container select, .add-post-container textarea, .add-post-container input[type=file], .add-post-container input[type=date], .add-post-container input[type=number] {
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

#editor {
    background-color: #fff;
    color: #000;
    min-height: 500px;
}

.ql-toolbar{
    background-color: #fff;

}


/***********************************************************************************************************************

ADMIN - MANAGE POSTS

************************************************************************************************************************/

.manage-container {
    width: 100%;
    margin-bottom: 50px;
}

.manage-container img {
    width: 100%;
    height: auto;
    display: block;
}

.manage-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.manage-content > div {
    background-color: #2e363b;
}

.manage-content p {
    color: #aec0cc;
}

.manage-content h3 {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem
}

/***********************************************************************************************************************

ADMIN - CONTACT / INBOX

************************************************************************************************************************/

.inbox-container {
    width: 100%;
    margin-bottom: 50px;
}

.inbox-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.inbox-content > div {
    background-color: #2e363b;
    padding: 20px;
}

.inbox-content > div p {
    color: #aec0cc;
}

.from {
    font-size: 1.2rem;
}

/***********************************************************************************************************************

LOGIN

************************************************************************************************************************/

.login-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-container form {
    width: 90%;
    background-color: #2e363b;
    padding: 60px;
    margin-top: 50px;
}

.login-container h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.login-container h2::after {
    content: "";
    background-color: #e75658;
    width: 60px;
    height: 5px;
    display: block;
}

.login-container img {
    display: block;
}

.login-container input[type=text], .login-container input[type=password] {
    width: 100%;
    border: none;
    margin-bottom: 10px;
    padding: 6px 12px;
}

.login-container button {
    background-color: #e75658;
    color: #fff;
    border: none;
    padding: 6px 12px;
}

.login-container button:hover {
    background-color: #0b0d0e;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}


/***********************************************************************************************************************

REGISTER - COMING SOON

************************************************************************************************************************/


.login-container input[type=text], .login-container input[type=email], .login-container select, .login-container textarea, .login-container input[type=password] {
    width: 100%;
    background-color: #0b0d0e;
    border: 1px solid #2e363b;
    display: block;
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #8e9ea8;
}

.login-container input[type=text]:focus, 
.login-container input[type=email]:focus,
.login-container input[type=password]:focus, 
.login-container select:focus, 
.login-container textarea:focus {
    outline: 2px solid #e75658;
    border-color: #e75658;
}

/***********************************************************************************************************************

MOVIE, TV, GAME ETC PAGES

************************************************************************************************************************/

.page-container {
    width: 100%;
    margin-top: 50px;
}

.page-content-reviews {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}


.page-content-reviews > div {
    background-color: #2e363b;
}


.page-content-reviews img {
    width: 100%;
    height: auto;
    display: block;
}

.page-content-reviews a:link, .recent-reviews-content a:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem
}

.page-content-reviews a:hover {
    text-decoration: underline;
}

.page-content-reviews i {
    color: #8495a0;
}


.page-content-reviews-info {
    position: absolute;
    bottom: 5%;
    margin-left: 20px;
}

.page-content-latest {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0px;
}

.page-content-latest > div {
    background-color: #2e363b;
}

.page-content-latest img {
    width: 100%;
    height: auto;
    display: block;
}

.page-content-latest a:link, .page-content-latest a:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem
}

.page-content-latest a:hover {
    text-decoration: underline;
}

.page-content-latest i {
    color: #aec0cc;
}


.page-content-latest-info {
    position: absolute;
    bottom: 5%;
    margin-left: 20px;
}


/***********************************************************************************************************************

ABOUT PAGE

************************************************************************************************************************/

.about-container {
    width: 100%;
}

.about-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0px;
}

.about-content p {
    color: #8e9ea8;
}

.about-content > div {
    background-color: #2e363b;
    padding: 30px;
}

.about-content > div p {
    color: #8e9ea8;
}

.about-content ul {
    list-style-type: none;
    padding: 10px 0px;
}

.about-content li {
    color: #8e9ea8;
}

/***********************************************************************************************************************

CONTACT PAGE

************************************************************************************************************************/

.contact-container {
    width: 100%;
}

.contact-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0px;
}

.contact-content p {
    color: #8e9ea8;
    
}

.contact-content label {
    color: #8e9ea8;
}

.contact-content input[type=text], .contact-content input[type=email], .contact-content select, .contact-content textarea {
    width: 100%;
    background-color: #0b0d0e;
    border: 1px solid #2e363b;
    display: block;
    padding: 8px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #8e9ea8;
}

.contact-content input[type=text]:focus, 
.contact-content input[type=email]:focus, 
.contact-content select:focus, 
.contact-content textarea:focus {
    outline: 2px solid #e75658;
    border-color: #e75658;
}

.contact-content button {
    padding: 6px 15px;
    background-color: #e75658;
    color: #fff;
    border: none;
}

.contact-content button:hover {
    background-color: #0b0d0e;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}


/***********************************************************************************************************************

NAV

************************************************************************************************************************/

nav {
    width: 100%;
    background-color: #2e363b;
    padding: 20px 0px;
}

.nav-content {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nav-left a:link, nav a:visited {
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    text-decoration: none;
}

.nav-left a:hover {
    color: #e75658;
    transition: 0.3s ease-in-out;
}

.nav-left a.active {
    color: #e75658;
}

.undernav-container {
    width: 100%;
    background-color: #0b0d0e;
    padding: 20px 0px;
}

.login:link {
    text-decoration: none;
    background-color: #e75658;
    padding: 6px;
}

.login:visited {
    background-color: #e75658;
}

.login:hover {
    background-color: #000;
}

.register:link {
    text-decoration: none;
    background-color: #e75658;
    padding: 6px;
}

.nav-right input[type=text] {
    padding: 6px 15px;
    border: none;
    background-color: #161a1d;
    color: #8e9ea8;
    font-family: 'Inter', sans-serif;
}

.nav-right input[type=text]:focus {
    outline: 2px solid #e75658;
}

.nav-right button {
    padding: 6px 15px;
    background-color: #e75658;
    color: #fff;
    border: none;
}

.nav-right button:hover {
    background-color: #0b0d0e;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.hamburger {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    display: block;
    z-index: 1001;
    position: relative;
}

.nav-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #161a1d; 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    visibility: hidden;
    z-index: 1000;
}


.nav-left.active {
    opacity: 1;
    visibility: visible;
}


.nav-left ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.nav-left ul li a {
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-left ul li a:hover {
    color: #e75658;
}

.nav-content:has(.nav-left.active) .hamburger {
    display: none;
}

.close-menu {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 1001;
}

.close-menu:hover {
    color: #e75658;
    transition: 0.3s ease;
}

/***********************************************************************************************************************

HEADER

************************************************************************************************************************/

header {
    width: 100%;
    padding: 60px 0px;
    background-color: #161a1d;
}

.header-content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
} 


.header-content h1 {
    color: #fff;
    font-size: 3.7rem;
}


/***********************************************************************************************************************

CONTENT CONTAINER

************************************************************************************************************************/

.content-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}




/***********************************************************************************************************************

CONTENT MAIN - FEATURED CONTENT

************************************************************************************************************************/



.featured-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.featured-content img {
    width: 100%;
    height: auto;
    display: block;
}


.featured-content-left {
    position: relative;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url('/static/images/derry.jpg') center/cover no-repeat;
    min-height: 300px;
}

.featured-content-right {
    position: relative;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url('/static/images/resi.jpg') center/cover no-repeat;
    min-height: 300px;
}

.featured-info {
    position: absolute;
    bottom: 0;
    padding: 0px 20px 20px 20px;

}

.featured-info h3 {
    color: #fff;
    font-size: 1.7rem;
}

.featured-info p {
    color: #fff;
}

.featured-content i {
    color: #8495a0;
    font-size: 1.6rem;
    margin-top: 20px;
}

/***********************************************************************************************************************

MAIN CONTENT - COMING SOON

************************************************************************************************************************/

.soon-container {
    width: 100%;
    margin-top: 50px;
}

.soon-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0px;
}

.soon-content img {
    width: 100%;
    height: auto;
    display: block;
}

.soon-content img:hover, .recent-reviews-content img:hover, .page-content-reviews img:hover {
    opacity: 0.7;
    transition: 0.3s ease-in-out;
}

.soon-content > div {
    background-color: #2e363b;
    position: relative;
}

.soon-content p {
    color: #8495a0;
}

.soon-info {
    position: absolute;
    bottom: 5%;
    margin-left: 20px;
}

.soon-info p {
    background-color: #e75658;
    color: #fff;
    padding: 6px;
    display: inline-block;
}

.wrapper {
    padding: 20px;
}

.soon-content a:link, .soon-content a:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: "Bebas Neue", sans-serif;

}

.soon-content a:hover {
    text-decoration: underline;
}

/***********************************************************************************************************************

MAIN CONTENT - TRIVIA

************************************************************************************************************************/

.trivia {
    width: 100%;
    margin: 0 auto;
    background-color: #0b0d0e;
    margin-top: 50px;
}

/***********************************************************************************************************************

MAIN CONTENT - RECENT REVIEWS

************************************************************************************************************************/

.recent-reviews-container {
    width: 100%;
    margin-top: 50px;
}

.recent-reviews-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0px;
}

.recent-reviews-content > div {
    background-color: #2e363b;
}

.recent-reviews-content img {
    width: 100%;
    height: auto;
    display: block;
}

.recent-reviews-content a:link, .recent-reviews-content a:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem
}

.recent-reviews-content a:hover {
    text-decoration: underline;
}

.recent-reviews-content i {
    color: #8495a0;
}


.reviews-info {
    position: absolute;
    bottom: 5%;
    margin-left: 20px;
}

.reviews-info p {
    background-color: #e75658;
    color: #fff;
    padding: 6px;
    display: inline-block;
}

.img-con {
    position: relative;
}

/***********************************************************************************************************************

BANNER / AD / MISC

************************************************************************************************************************/

.advert {
    width: 100%;
    margin: 0 auto;
    background-image: url('/static/images/ad.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0b0d0e;
    padding: 50px 0px;
    margin-top: 50px;
    text-align: center;
    color: #fff;
}

/***********************************************************************************************************************

POSTS

************************************************************************************************************************/

.post-container {
    width: 100%;
    margin-top: 50px;
}

.posts {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 30px;
    row-gap: 30px;
}


.post {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    color: #8e9ea8;
    background-color: #2e363b;
}

.post > div {
    position: relative;
    
}

.post img {
    width: 100%;
    height: auto;
    display: block;
    
}

a.title:link, a.title:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1.5rem;
    
}

a.title:hover {
    text-decoration: underline;
}

.date {
    margin: 10px 0px;
}

.post-info {
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: absolute;
    bottom: 5%;
    margin-left: 20px;
}

.post-red{
    background-color: #e75658;
    padding: 6px 12px;
    color: #fff;
}

.post-black {
    background-color: #0b0d0e;
    padding: 6px 12px;
    color: #fff;
}


.img-container {
    overflow: hidden;
}

.img-container img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}

.post p {
    margin-top: 10px;
}

.post-more {
    width: 100%;
}

.more-container {
    width: 100%;
    padding-top: 50px;
}

.more-content {
    width: 100%;
}



/******************************************************************************************************************

POST PAGE

*******************************************************************************************************************/

.post-page-container {
    width: 100%;
}

.post-page-content {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

/******************************************************************************************************************

POST PAGE - LEFT

*******************************************************************************************************************/

.post-page-left img {
    width: 100%;
    height: auto;
    display: block;
}

.post-page-left p {
    color: #8e9ea8;
    line-height: 24px;
}

/******************************************************************************************************************

POST PAGE - RIGHT

*******************************************************************************************************************/

.post-page-right {

}

.post-page-right p {
    color: #8495a0;
}

.right-info-text {
    color: #64737e;
}


.post-page-right > div {
    background-color: #2e363b;
    padding: 30px;
    margin-bottom: 30px;
}

.post-page-right > div h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.post-page-right > div h2::after {
    content: "";
    background-color: #e75658;
    width: 60px;
    height: 5px;
    display: block;
}

/***********************************************************************************************************************

RIGHT MENU - TRENDING

************************************************************************************************************************/

.trending-entry {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
}

.trending-entry img {
    width: 40%;
    height: auto;
    display: block;
    flex: 0 0 auto;
    object-fit: cover;
}

.trending-entry a:link, .trending-entry a:visited {
    color: #e75658;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
}

.trending-entry a:hover {
    text-decoration: underline;
}

/***********************************************************************************************************************

RIGHT MENU - SOCIAL

************************************************************************************************************************/

.social-right a:link, .social-right a:visited {
    color: #e75658;
    font-size: 2rem;
}

.social-right a:hover {
    color: #fff;
    transition: 0.3s ease-in-out;
}

.social-right ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}


/******************************************************************************************************************

POST PAGE - POST BODY

*******************************************************************************************************************/

.post-meta {
    margin-top: 30px;
    background-color: #0b0d0e;
    color: #8e9ea8;
    padding: 20px;
    text-align: center;
}

.post-meta a:link, .post-meta a:visited {
    color: #e75658;
}

.post-body h1 {
    color: #fff;
}

.post-rating-details {
    margin-top: 20px;
    background-color: #2e363b;
    text-align: center;
    padding: 50px;
}

.post-rating-details p {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-style: italic;
    line-height: 26px;
}

.post-rating-details i {
    font-size: 2rem;
}

.post-body {
    margin-top: 50px;
}

.post-body h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 0px;
}

.post-body img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.trailer-container {
    margin-top: 30px;
}

.post-body a:link, .post-body a:visited {
    color: #e75658;
    text-decoration: none;
}

.post-body a:hover {
    text-decoration: underline;
}

.post-body h3 {
    color: #fff;
    font-size: 1.4rem;
}

.post-body ul {
    list-style-type: none;
    display: flex;
    color: #fff;
    gap: 20px;
    font-size: 1.2rem
}





/***********************************************************************************************************************

FOOTER

************************************************************************************************************************/

footer {
    width: 100%;
    background-color: #0b0d0e;
    padding: 50px 0px;
}

.footer-content {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

footer h1 {
    color: #fff;
}

footer p {
    color: #fff;
}

.footer-logo {
    width: 40%;
    margin: 0 auto;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.footer-social a:link, .footer-social a:visited {
    color: #e75658;
    font-size: 2rem;
}

.footer-social a:hover {
    color: #fff;
    transition: 0.3s ease-in-out;
}


.footer-social ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.copyright {
    text-align: center;
    margin-top: 30px;
}

.copyright p {
    color: #4d5a63;
}

/******************************************************************************************************************

DESKTOP - 768px

*******************************************************************************************************************/

@media (min-width: 768px) {


.header-content {
    width: 50%;
    }

.nav-content {
    width: 70%;
    flex-direction: row;
}

nav ul {
    flex-direction: row;
}

.content-container {
    width: 70%;
    grid-template-columns: 1fr;
    }

.featured-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30PX;
}

.soon-content {
    grid-template-columns: 1fr 1fr;
}

.recent-reviews-content, .page-content-reviews {
    width: 100%;
    grid-template-columns: 1fr 1fr;
}


.advert {
    width: 100%;
}

.posts {
    width: 100%;
    grid-template-columns: 1fr 1fr;
}

.post {
    grid-template-columns: 1fr;
}

.post-page-content {
    width: 100%;
    grid-template-columns: 1fr;
}

.post-body img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.footer-content {
    width: 70%;
}


.footer-logo {
    width: 20%;
    margin: 0 auto;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.page-content-latest {
    grid-template-columns: 1fr 1fr 1fr;
}

.about-content {
    width: 100%;
    grid-template-columns: 1fr 1fr;
}



}


/******************************************************************************************************************

DESKTOP - 1200px

*******************************************************************************************************************/

@media (min-width: 1200px) {


.header-content {
    width: 50%;
    }

.nav-content {
    width: 70%;
    flex-direction: row;
}

nav ul {
    flex-direction: row;
}

.content-container {
    width: 70%;
    grid-template-columns: 1fr;
    }

.featured-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30PX;
}

.soon-content {
    grid-template-columns: 1fr 1fr 1fr;
}

.recent-reviews-content, .page-content-reviews {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
}


.advert {
    width: 100%;
}

.posts {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
}

.post {
    grid-template-columns: 1fr;
}

.post-page-content {
    width: 100%;
    grid-template-columns: 1.5fr 1fr;
}

.post-body img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.footer-content {
    width: 70%;
}


.footer-logo {
    width: 20%;
    margin: 0 auto;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.page-content-latest {
    grid-template-columns: 1fr 1fr 1fr;
}

.about-content {
    width: 100%;
    grid-template-columns: 1fr 1fr;
}



}



/******************************************************************************************************************

DESKTOP - 1800px

*******************************************************************************************************************/
@media (min-width: 1800px) {

.login-container {
    width: 30%;
}

.header-content {
    width: 50%;
    }

.nav-content {
    width: 50%;
    flex-direction: row;
}

nav ul {
    flex-direction: row;
}

.content-container {
    width: 50%;
    grid-template-columns: 1fr;
    }

.featured-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.soon-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.recent-reviews-content, .page-content-reviews {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.advert {
    width: 100%;
}

.posts {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
}

.post {
    grid-template-columns: 1fr;
}

.post-page-content {
    width: 100%;
    grid-template-columns: 2.3fr 1fr;
}

.post-body img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.footer-content {
    width: 50%;
}


.footer-logo {
    width: 20%;
    margin: 0 auto;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.page-content-latest {
    grid-template-columns: 1fr 1fr 1fr;
}

.about-content {
    width: 100%;
    grid-template-columns: 1fr 1fr;
}

.hamburger {
    display: none;
}
    
.nav-left {
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 1; 
    visibility: visible; 
    display: block;
}
    
.nav-left ul {
    flex-direction: row;
    gap: 16px;
}
    
.nav-left ul li a {
    font-size: 1.6rem;
}
    
.nav-content {
    flex-direction: row;
    justify-content: space-between;
}


.close-menu {
    display: none;
}

}