@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');

:root {
    --primary-color: #4F8BF9; /* Lighter Blue */
    --button-color: #4F8BF9; /* Lighter Blue */
    --button-hover-color: #3772CC; /* Medium Blue */
    --secondary-color: #C17DFF; /* Lighter Purple */
    --background-color: white; /* Nearly Black */
    --text-color: black; /* Light Grey */
    --hover-color: #333333; /* Darker Grey */
    --hover-link-color: #333333; /* Lighter Dark Purple */
    --active-color: #E1BEE7; /* Lighter Purple */
    --font-family: 'Prata',Georgia,"Times New Roman",serif;
    --font-size: 16px; /* Increased Font Size for Readability */
    --header-color: #4F8BF9; /* Lighter Blue */
    --selected-link-color: #4F8BF9; /* Lighter Blue */
    --warning-color: #FF6659; /* Lighter Warning Red */
    --disabled-color: #424242; /* Darker Grey */

    --article-background-color-1: #dddddd;
    --article-background-color-2: #eeeeee;
    
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
}


* {
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--font-size);
    scrollbar-width: thin;
    scrollbar-color: #333333 transparent;
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #333333;
        border-radius: 20px;
        border: none;
    }

html {
    background: var(--background-color);
}

body {
    margin: 0;
    background: var(--background-color);
    color: var(--text-color);
}

a {
    color: var( --selected-link-color);
    text-decoration: none;
}

    a:hover {
        color: var(--hover-link-color);
    }

footer a {
    color: var(--text-color);
    text-decoration: none;
}

h1, h2, h3, h4, h5 {    
    color: white;
}

#front-page-head h1, #front-page-head h2
{
    color: var(--front-page-sub-header-color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 56px;
    font-weight: 500;
}

h3 {
    font-size: 1.75rem;
}

article-details {
    display: flex;
    align-items: center;
    flex-direction: column;
}

    article-details h2 {
        color: black;
    }

    article-details > header {        
        background-image: linear-gradient(180deg, var(--article-background-color-1) 0%, var(--article-background-color-2) 100%);
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        height: 500px;
        width: 100%;
        position: absolute;
    }


    article-details > article-content {
        z-index: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    
article-details>article-content image-container
{
    position: relative;
}
article-details>article-content image-container::before
{
    content: 'Advert';
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 100;
     color: white;
     background-color: black;
     padding: 10px;
     opacity: 0.3;
     text-transform: uppercase;
}

    article-details div {
        width: 1080px;
        text-align: left;
    }

#front-page-head {
    background-image: var(--front-page-head-image) !important;
    background-size: cover;
    text-align: center;
}

    #front-page-head::after {
        content: '';
        height: 100px;
        display: block;
        background-color: var(--background-color);
        margin-top: -100px;
    }

    #front-page-head > img {
        margin-top: 60px;
    }

    #front-page-head > h1 {
        padding-top: 100px;
        padding-bottom: 100px;
        color: var(--front-page-header-color);
        font-weight: 500;
        font-size: 150px;
        margin: 0px;
        margin-bottom: 60px;
    }

#main {
    display: grid;
}

#home-screen {
    flex-direction: column;
}

#menu-public {
    width: 1080px;
    display: flex;
    align-items: center;
    justify-content: end;
}

    #menu-public li {
        padding: 5px;
    }


    #menu-public li:nth-child(2) {
        flex-grow: 1;
    }

#footer-menu-public {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

    #footer-menu-public li {
        list-style: none;
        margin: 10px;
    }

nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

#category-container ul {
    margin: 0px;
    padding: 0px;
    color: white;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    /* width: 750px; */
}

#category-container li {
    list-style: none;
    width: 380px;
    height: 380px;
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    flex-direction: column;
}

#category-container ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

#category-container li i {
    font-size: 2em;
}

#category-container {
    display: flex;
    justify-content: center;
}

    #category-container li .frame
    {
        border: 1px solid black;    
    }

    #category-container li  .image
    {
        background-size: cover;
        margin: 20px;
        
        width: 270px;
        height: 270px;
        transition-duration: 0.5s;
    }

    #category-container li  .image:hover {
        margin: 40px;
        
        width: 230px;
        height: 230px;
    }

    #category-container li p {
        color: var(--front-page-categories-color);
    }

    
    #category-container img {
        height: 500px;
    }

#main-menu a {    
    font-weight: 600;
    font-size: 18px;
    font-weight: 600;
    color: rgba(0,0,0,0.6);
    transition: all 0.4s ease-in-out;
}

    #main-menu a:hover {
        opacity: 0.7;
    }

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    footer > div {
        padding: 10px;
    }

#articles-container {
    display: flex;
    justify-content: center;
}

    #articles-container #articles {
        position: relative;
        overflow: hidden;
        width: 1080px;
    }

    #articles-container ul {
        width: 1080px;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: scroll;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overflow-y: hidden;
        align-items: center;
    }

        #articles-container ul li {
            display: flex;
            width: 1080px;
            flex-direction: column;
            justify-items: stretch;
            color: white;
            height: 600px;
            flex: 1 0 100%;
            scroll-snap-align: start;
            position: relative;
            background-color: black;
        }


    #articles-container > #articles {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    #articles-container ul li img {
        object-fit: cover;
        z-index: 0;
        opacity: 0.4;
    }

    #articles-container ul li div {
        position: absolute;
        padding: 40px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 150px;
    }

    #articles-container ul li h2,
    #articles-container ul li .content {
        margin: 10px;
        z-index: 1;
        width: 80%;
    }



    #articles-container .content {
        height: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;        
    }

#category-articles-container {
    background-image: var(--category-articles-container-image);
    background-size: cover;
    display: flex;
    justify-content: center;
}

    #category-articles-container #articles {
        position: relative;
        overflow: hidden;
        width: 1080px;
    }

    #category-articles-container ul {
        width: 1080px;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        flex-direction: column;
    }

        #category-articles-container ul li a {
            display: flex;
            width: 1080px;
            flex-direction: column;
            justify-items: stretch;
            color: white;
            scroll-snap-align: start;
            position: relative;
            background-color: black;
            margin: 50px;
        }


    #category-articles-container > #articles {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    #category-articles-container ul li img {
        object-fit: cover;
        z-index: 0;
        opacity: 0.4;
    }

    #category-articles-container ul li div {
        position: absolute;
        padding: 40px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 150px;
    }

    #category-articles-container ul li h2,
    #category-articles-container ul li .content {
        margin: 10px;
        z-index: 1;
        width: 80%;
    }



    #category-articles-container .content {
        height: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        padding-top: 250px;
    }



loading-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    color: white;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

#loader-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid grey;
}

    #loader-inner > .content {
        padding: 20px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #loader-inner .close-button {
        padding: 10px;
        align-self: end;
    }

.close-button {
    font-size: 20px;
    color: #3498db;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 10px;
    caret-color: transparent;
    z-index: 100;
}


menu-link {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    caret-color: transparent;
}

    menu-link i {
        font-size: 40px;
    }

#close-button {
    display: none;
}


nav ul {
    list-style-type: none;
    padding: 0;
}

.hidden {
    display: none;
}

#main-logo {
    height: var(--main-logo-height);
}

cookie {
    color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
}

cookie wrapper{
    max-width: 600px;
}

cookie h1,
cookie h2
{
    color: black;
}

.newest-articles{
    color: black;
    text-align: center;
}

@media only screen and (max-width: 1080px) {
article-details div {
    width: 100%;
}
#category-container ul {
    margin: 0px;
    padding: 0px;
    color: white;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100vw;
}

}

/* Paging */
.pagination-container {
  display: flex;
  align-items: center;
  bottom: 0;
  justify-content: center;
}
.pagination-number,
.pagination-button{
  font-size: 1.1rem;
  background-color: transparent;
  border: none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .2rem;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
}
.pagination-number.active {
  color: #fff;
  background: #0085b6;
}

/* Paging */


@media only screen and (max-width: 600px) {
    #category-container ul {
    grid-template-columns: 1fr;
}

   #front-page-head > h1
   {
       font-size: 1em;
   }
 
  #small-articles-container ul li img {
    width:100vw;
  }
article-details>article-content img 
{
    height: unset;

}
    category articles article
    {
        outline: 0px;
    }

    #main-menu
    {
        display: none;
    }
}

  body,
   #front-page-head,
   #main{
      width: 100vw;
  }