/* ------------------
    Basic Grid
    -----------------
*/

.content-grid {
    --padding-inline: 1rem;
    --content-max-width: 110ch;
    --breakout-max-width: 150ch;

    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    grid-template-columns: 
     [full-width-start] minmax(var(--padding-inline), 1fr)
     [breakout-start] minmax(0, var(--breakout-size))
     [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
     minmax(0, var(--breakout-size)) [breakout-end] 
     minmax(var(--padding-inline), 1fr) [full-width-end] ;
}

.content-grid > * {
    grid-column: content;
}

.content-grid > .breakout {
    grid-column: breakout;
}

.content-grid > .full {
    grid-column: full-width;
}


iframe {
    border-radius: 15px;
}


img {
    max-width: 100%;
    vertical-align: center;
    font-style: italic;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ------------------
    Basic 
    -----------------
*/

:root {


    color-scheme: dark;
    color-scheme: dark;
    scrollbar-color: var(--panel-light-blue) var(--modal-dark-blue);


/* Colours */
    --szinkron-gold: #eabe7b;
    --shiny-gold: #f6cd90;
    --faded-gold: #eabe7b9d;
    --deep-blue: #15232d;
    --high-blue: #1c303f;
    --king-blue: #1b3347;
    --dark-blue: #050b0f;
    --panel-dark-blue: #1d2d3a;
    --panel-light-blue: #283c4b;
    --panel-mid-blue: #203545;
    --panel-blue: #1C303F;
    --modal-blue: #1d2d3a;
    --modal-dark-blue: #1a2833;
    --faded-white: #FEF8EC;
    --more-faded-white: #fef8ecdf;
    --download-green: #17795E;
    --highlight-blue: #0c75ad;
    --article-link-blue: #1192d8;
    --article-link-blue-hover: #51b3e8;

/* Bubbles */
    --bubble-blue: linear-gradient(to top, #2e6086, #3e7eaf);
    --bubble-green: linear-gradient(to top, #2f947e, #48b69e);
    --bubble-purple: linear-gradient(to top, #6894f5, #88abf7);
    --bubble-orange: linear-gradient(to top, #F96854, #f38071);
    

    --night-sky: linear-gradient(to top, #183950, #112e43);
    --night-sky-high: linear-gradient(to top, #1d435e, #11354e);



    /* Download btn */ 
    .download-button.gold {
        --download-color: var(--szinkron-gold);
    }

    .download-button.red {
        --download-color: #da4444;
    }

    .download-button.purple {
        --download-color: #594ab7;
    }

    .download-button.blue {
        --download-color: #0a27ab;
    }

    .download-button.teal {
        --download-color: #0a7dab;
    }
    

}



html {
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: white;
    background-color: var(--deep-blue);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}


.content {
    flex: 1; 
    display: flex;
    flex-direction: column;
}


.bcg {
    background-color: var(--deep-blue);
    background-image: radial-gradient(circle, #1b3955, #163046, #122637, #122637, #122635);   
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}


.bcg::after,
.modal::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
    opacity: 0.2; /* Noise level */
    pointer-events: none;
    z-index: -2;
}   



img {
    font-style: italic;
    max-width: 100%;
    display: block;
}


.logo-link:hover,
.logo-link:focus {
    background: none;
}


.separator-line,
.news-content-container hr {
    border: 1px solid var(--faded-white);
    width: 100%;
    opacity: 8%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.solid-line,
.news-content-container hr {
    -webkit-mask-image: none;
    mask-image: none; 
    opacity: 4%;
}

.news-card-separator {
    margin: 0;
    border-color: #b1b1b1;
}



/* Desktop */
@media (min-width: 960px) {
    
    .bcg {   
    background-image: radial-gradient(circle, #1b3955, #163046, #122637, #0f1d28, #0a141b);
    }
}



/* ------------------
    Animation
    -----------------
*/

.content {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.content.loaded {
    opacity: 1; /* Betöltéskor látható */
}

.content.unloading {
    opacity: 0; /* Kilépéskor eltűnik */
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 960px) {

    .fade-in-up {
        opacity: 0;
        animation: fadeInUp 0.4s ease-out forwards;
    }
}


/* Card Animation */
 @keyframes zoomIn {
     0% {
     transform: scale(0.8);
     opacity: 0;
     }
     100% {
     transform: scale(1);
     opacity: 1;
     }
 }


/* ------------------
    Effects
    -----------------
*/


/* shadow */
.shadow {
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.279));
}


/* backdrop */
.backdrop {
    filter: drop-shadow(10px 10px 0px var(--panel-dark-blue));
}



/* Tool-tip */


.tooltiptext,
.tool-tip {
    display: none;
}

@media (min-width: 960px) {


.tool-tip {
    position: relative;
    display: inline-block;
  }

.tool-tip .tooltiptext {
    font-family: "JetBrains Mono", monospace;
    visibility: hidden;
    width: 120px;
    min-height: 30px;
    background: var(--night-sky-high);
    color: #fff;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    transform: translateX(-100%);
    transform: translatey(-120%);
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 

  .tool-tip:hover .tooltiptext {
    visibility: visible;
  }

 

}

/* ------------------
    Typography
    -----------------
*/

body {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
}

p {
    text-wrap: pretty;
  }

a {
    text-decoration: none;
    color: inherit;
}

h2 {
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--more-faded-white);
}

.main-nav,
.small-nav a {
    color: var(--faded-white);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .1rem;
}

.small-nav a:focus,
.small-nav a:hover {
    background: var(--night-sky);
}

.small-nav .logo-link:focus,
.small-nav .logo-link:hover {
    background: none;
}


.small-nav .logo-link,
.small-nav .logo-link {
    margin: 0;
    padding: 0;
}

.title {
    font-size: 1.8rem;
    text-align: center;
    color: #fff;
}

.projects-title {
    margin: 80px auto 50px;
}


.donators-title {
    margin: 10px auto 10px;
}


.slider-title {
    margin: 0 0 10px;
    color: var(--faded-white); 
}

.slider-content {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1.8rem;
    font-weight: 400;
    text-align: left;
}


.small-nav a {
    font-size: 1.3rem;
}

.desc {
    font-size: .8rem;
    text-align: center;
    color: #ffffff79;
}

.donators-desc {
    margin: 0;
    width: 100%;
}

.footer-text {
    font-size: 1rem;
    font-weight: 500;
    margin: 5px;
    letter-spacing: .1rem;
}

.footer-sub-text {
    font-size: .8rem;
    font-weight: 400;
    margin: 5px 5px 10px;
    letter-spacing: .1rem;
}


.page-title {
    margin: 80px 0 0;
}

.page-desc {
    margin: 5px 0 10px;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.500);
}

.sub-title {
    font-size: 1.3rem;
}



/* for editor */

.news-content-container p,
.news-content-container li {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    font-weight: 400;
    padding: 0 5px;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1.8rem;
    text-align: left;

}

.news-content-container h1,
.news-content-container h2,
.news-content-container h3,
.news-content-container h4,
.news-content-container h5 {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    letter-spacing: .2rem;
    margin: .3em .1em;
    color: white;
}


.news-content-container h1 {
    font-size: 3rem;
}  

.news-content-container h2 {
    font-size: 2.5rem;
}  

.news-content-container h3 {
    font-size: 2rem;
}  

.news-content-container h4 {
    font-size: 1.8rem;
}  

.news-content-container h5 {
    font-size: 1.4rem;
}  

.news-content-container a {
    color: var(--article-link-blue);
}

.news-content-container a:hover,
.news-content-container a:focus {
    color: var(--article-link-blue-hover);
    text-decoration: underline;
}




/* Progress bar */

.progress-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 5px 0 0 2px;
}


.project-box .main-title {
    font-size: 1.5rem;
    margin-top: 5px;
    font-weight: 600;
}


.main-project-card h3,
.second-project-card h3 {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 15px;
}



/* Desktop */
@media (min-width: 960px) {
 
    .slider-title {
        font-size: 2rem;
        text-align: left;
    }

    .slider-content {
        text-align: justify;
    }

    .main-project-card h3,
    .second-project-card h3 {
        margin-top: 20px;
        font-size: 1.5rem;
    }  

    .small-nav a {
        font-size: 1rem;
    }

    .projects-title {
        margin: 0 auto 50px;
    }    

    .footer-sub-text {
        margin: 5px;
    }

    .footer-sub-text-break {
        display: none;
    }
}    

/* -----------------------------------------------------------------*/


/* ------------------
    Butttons
    -----------------
*/

.btn {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600; 
    letter-spacing: .1rem;
    text-decoration: none;
    border-radius: 10px;
    color: white;
    font-size: .8rem;
    padding: 8px 30px;
    display: block;
    min-width: 60px;
    text-align: center;
    background: var(--night-sky);
}


.btn-main {
    border: 1px solid var(--szinkron-gold);
    
}

.btn-main:focus,
.btn-main:hover {
    background: var(--night-sky-high);
    border-color: var(--more-faded-white);
}

.btn-founding {
    background: var(--panel-light-blue);
    border: 1px solid var(--panel-mid-blue);
    transition: background-color 0.2s ease-in-out, border 0.6s ease-in-out;
}

.btn-founding:focus,
.btn-founding:hover {
    background-color: var(--panel-dark-blue);
    color: var(--szinkron-gold);
    border-color: var(--szinkron-gold);
    transition: background-color 0.2s ease-in-out, border 0.6s ease-in-out;
}


/* Dodnload button */

.download-button {
    position: relative;
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid var(--panel-light-blue);
    background-color: var(--panel-light-blue);
    overflow: hidden;
    border-radius: 10px;
  }
  
  .download-button, .download-button-icon, .download-button-text {
    transition: all 0.3s;
  }
  
  .download-button .download-button-text {
    transform: translateX(27px);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: .8rem;
  }
  
  .download-button .download-button-icon {
    position: absolute;
    transform: translateX(100px);
    height: 100%;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  
  .download-button .svg {
    width: 20px;
    fill: #fff;
    margin-right: 5px;
  }
  
  .download-button .download-button-icon,
  .download-button:hover {
    background: var(--download-btn-color);
  }
  
  .download-button:hover .download-button-text {
    color: transparent;
  }
  
  .download-button:hover .download-button-icon {
    width: 148px;
    transform: translateX(0);
  }
  
  .download-button:active .download-button-icon {
    background: var(--download-color, var(--download-green));
  }
  
  .download-button:active {
    border: 1px solid var(--download-color, var(--download-green));
  }


/* Desktop */
@media (min-width: 960px) {
    
    .btn {
    font-size: 1rem;
    padding: 8px 40px;
    min-width: 80px;
    }
}



/* -----------------------------------------------------------------*/

/* ------------------
    Header 
    -----------------
*/


/* Main Header */

.main-nav {
    top: 0;
}

.main-logo {
    display: flex;
    justify-content: center;
    }

.main-header-line {
    border: 1px solid var(--szinkron-gold);
    margin-top: 15px;
    max-width: 1500px;
    }

.main-logo-img {
    width: 350px;
    margin-top: 25px;
    }

/* Navigation */

.main-nav-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    margin-top: 10px;
    }


.main-nav-container a {
    margin-right: 60px;
    text-decoration: none;
    color: var(--faded-white);
    }

.main-nav-container a:last-child {
    margin-right: 0;
}

.main-nav-container a:focus,
.main-nav-container a:hover {
  /*  text-decoration: underline 2px solid var(--szinkron-gold); */
      color: var(--szinkron-gold);
    }

.main-nav-container .nav-active {
    display: flex;
    align-items: center;
    position: relative;
    }

.main-nav-container .nav-active::before {
    position: relative;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    background: var(--szinkron-gold);
    }

.nav-active a:focus,
.nav-active a:hover {
    color: inherit;
    }

.links-container .nav-active {
    color: var(--szinkron-gold);
}  



/* Small Header */


.small-nav {
    height: 80px;
    background: var(--deep-blue);
    display: flex;
    align-items: center;
    top: -100px;
    position: fixed;
    left: 0; 
    width: 100%;
    transition: top 0.3s ease, transform 0.3s ease; /* Animáció a 'top' és 'transform' tulajdonságokra */
    z-index: 1000;
}


.small-logo {
    margin-left: 30px;
}

.small-logo-img {
    width: 200px;
    }

.small-nav a {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.small-nav a:last-child {
    margin-right: 50px;
}


/* Navigation */

.links-container {
    height: 100%;
    width: 100%;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    z-index: 900;
}

.small-nav svg {
    fill: var(--faded-white);
}

.small-nav svg:hover {
    fill: var(--szinkron-gold);
}



#sidebar-active {
    display: none;
}

.open-sidebar-button,
.close-sidebar-button {
    display: none;
}



/* Mobile */
@media(max-width: 960px) {


/* Mobile Menu */

    header {
        margin-bottom: 40px;
    }

    .main-nav {
        position: fixed;
        top: -300px;
    }
    .small-nav {
        top: 0;
    }
    
    .links-container {   
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 900;
        width: 300px;

        background: var(--deep-blue);
        margin: auto 0 0 0;
        transition: .5s ease-out;
    }

    .small-nav a {
        box-sizing: border-box;
        height: auto;
        width: 100%;
        padding: 20px 30px;
        
    }

    .nav-active::before {
        margin-left: -20px;
        position: absolute;
    }


    .small-nav a:last-child {
    margin-right: 0;
    }

    .open-sidebar-button,
    .close-sidebar-button {
        display: block;
        margin-left: auto;
        padding: 20px;
    }

    #sidebar-active:checked ~ .links-container {
        right: 0;
    }

    #sidebar-active:checked ~ #overlay {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }

}

/* Extra small */

@media (max-width: 500px) {
    
    .small-logo {
        margin-left: auto;      
    }
}



/* ------------------
    Pagination
    -----------------
*/


.pagination-container {
    display: flex;
    margin: 0 auto 50px;
    gap: 10px;
    flex-wrap: wrap;
    /* align-items: center; */
    /* justify-content: center; */
    background: var(--panel-light-blue);
    padding: 20px 30px;
    width: fit-content; 
    max-width: 500px;
    border-radius: 10px;
}



.pagination-item {
    font-size: 1.1rem;
    background-color: var(--modal-blue);
    font-weight: 600;
    border-radius: 5px;
    padding: 8px 15px;
}



.pagination-item:hover {
    background-color: var(--king-blue);
    color: var(--szinkron-gold);
}

.pagination-container .page-active {
    background-color: var(--modal-dark-blue);
    color: var(--szinkron-gold);
}

.pagination-pages {
    align-self: flex-end;
    position: relative;
    display: flex;
    gap: 10px;
    white-space:nowrap;
    max-width: 300px;
    overflow-x: auto;
    padding-bottom: 8px; 
    scrollbar-width: thin; 
    scrollbar-color: var(--panel-dark-blue);
}

.pagination-control {
    margin-bottom: 8px;
    align-self: flex-start;
}



.pagination-pages::-webkit-scrollbar {
    height: 8px; /
}


.pagination-pages::-webkit-scrollbar-track {
    background: transparent;
}

.pagination-pages::-webkit-scrollbar-thumb {
    background-color: var(--panel-dark-blue); 
    border-radius: 10px;
}




/* Mobile */
@media (max-width: 960px) {
    
    .pagination-pages {
        max-width: 190px;
    }

      
}



 

/* -----------------------------------------------------------------*/


/* ------------------
    Slider
    -----------------
*/

.slider-section {
    margin-top: 100px;
}

.slider-image {
    border: 1px solid var(--szinkron-gold);
    object-fit: cover;
    aspect-ratio: 2 / 1;
    object-position: top;
    pointer-events: none;
}

.slider {
    display: flex;
    flex-direction: column;
}


.article-content {
    padding: 0 5px;
}

.slider-buttons {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.slider-btn1 + .slider-btn2 {
    margin-left: 30px;
}

.slider-section .slider-section-separator {
    margin-top: 50px;
}



/* Function */


.slider-container {
    position: relative;
    width: 100%;
    overflow-x: clip;
}

.slider-wrapper {
    display: flex; 
    transition: transform 0.8s ease-in-out;
    margin: 0 10px;
}

.slider {
    flex: 0 0 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
}


.slider.active {
    opacity: 1;
    visibility: visible;
    transition: none;
}



.slider-nav,
.donators-slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

.slider-nav .dot,
.donators-slider-nav .dot {
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border: 1px solid var(--szinkron-gold);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}



.slider-nav .dot:focus,
.donators-slider-nav .dot:focus, 
.slider-nav .dot:hover,
.donators-slider-nav .dot:hover {
    border-color: var(--faded-white);
}



.slider-nav .dot.active,
.donators-slider-nav .dot.active {
    background-color: var(--szinkron-gold);
}



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

    .slider-section {
        margin: 100px 60px;
    }

    .slider-image {
        aspect-ratio: 3 / 1.1;
    }

    .slider-line {
        display: none;
    }
}

/* Mobile */
@media (max-width: 960px) {

    .slider-content-bcg {
    /* padding: 10px; */
    border-radius: 20px;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.064));
    
    }

    .slider-image {
        border: none;
        border-radius: 10px;
        order: 1;
    }

    .slider-title {
        order: 2;
        margin-top: 20px;
        text-align: left;
    }
    
    .slider-line {
        order: 3;
        margin: 0;
    }

    .slider-content {
        order: 4;
    }

    .slider-buttons {
        order: 5;
    }


}

/* -----------------------------------------------------------------*/


/* ------------------
    Projects
    -----------------
*/


.project-box .title {
    display: block;
}

.projects .title-line {
    margin-bottom: 50px;
}

/* Progress bar */

.project-box .project-bar {
    width: 100%;
    height: 13px;
    margin-top: 40px;
    border: 1px solid var(--szinkron-gold);
    background: var(--night-sky);
}

.project-box .project-bar:hover {
    background: var(--night-sky-high);
    border-color: var(--more-faded-white);
}    

.main-project-box .project-bar {
    height: 20px;
}

.second-project-card .main-project-box .project-bar {
    margin: 0;
}




.project-bar .project-per {
    position: relative;
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #BA9862, #FCD69C);
    animation: progress 1s ease-in-out forwards;
    opacity: 0;
}


@keyframes progress {
    0%{
        width: 0;
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

/* Tooltip */

.project-per .tooltip {
    position: absolute;
    right: -14px;
    top: -35px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 600;
    background: none; 
    z-index: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    background: linear-gradient(to top, #BA9862, #FCD69C); 
    z-index: -1; 
}

.tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    background: #BA9862;    
    transform: translateX(-50%) rotate(45deg);
    z-index: -2; 
}



/* Card Animation */

.main-project-card,
.second-project-card {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Lassabb és finomabb animáció */
    position: relative;
    z-index: 1; 
}


.card-move-out {
    transform: scale(0.9) translateY(30px); 
    opacity: 0; 
}

.card-move-in {
    transform: scale(1) translateY(0); 
    opacity: 1; 
}


.second-project-card.card-move-in {
    transition-delay: 0.2s;
}



/* Projects-container */

.projects-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.main-project-card {
    order: 1;
    border: 1px solid rgba(255, 255, 255, 0.088);
    padding: 30px;
    border-radius: 20px;
    
}

.second-project-card {
    order: 3;
    border: 1px solid rgba(255, 255, 255, 0.088);
    padding: 30px;
    border-radius: 20px;
}

.project-line {
    display: none;
}


.main-project-card {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 1fr;
    grid-template-areas: "title title"
                         "percent image"
                         "main main";                   
}

.second-project-card {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 1fr;
    grid-template-rows: 1fr 70px 1fr;
    grid-template-areas: "title image"
                         "main image"
                         "btn image";
    margin: 60px auto 0;                       
}


.progress-project-name{grid-area: title;}
.founding-project-name{grid-area: title;}
.project-founding-text{grid-area: founding;}
.project-percentages{grid-area: percent;}
.percent-project-image{grid-area: image;}
.main-project-box {grid-area: main;}
.donate-btn{grid-area: donate;}
.percent-btn{grid-area: btn;}
.project-details-btn {grid-area: details-btn;}



.percent-project-image {
    border-radius: 20px;
    justify-self: center;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
}

.percent-project-image:hover {
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143));
    transform: scale(1.01); 
    transition: transform 0.2s ease-in-out; 
}


.main-project-card .percent-project-image {
    width: 280px;
    margin: 45px 45px 0 auto;
}


.second-project-card .percent-project-image {
    width: 250px;
    margin-left: 50px;
}


.project-percentages {
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    transition: opacity 0.4s ease;
}



.main-project-box {
    text-align: center;
}

.percent-btn {
    margin: 0 auto auto auto;
}

.main-project-card .percent-btn {
    display: none;
}



.other-projects {
    margin: 40px auto 20px;
    align-self: center;
    padding: 40px;
}

.other-projects-container {
    display: flex;
    gap: 20px;
    justify-content: center;
}



.other-projects-title {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 50px;
}


.other-project-card {
    border: 1px solid rgba(255, 255, 255, 0.088);
    padding: 20px;
    border-radius: 20px;
}

.other-project-image-container {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.other-project-image {
    width: 150px;
    border-radius: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    filter: brightness(1);
}

.other-project-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.other-project-image-container:hover .other-project-image {
    transform: scale(0.9);
    filter: brightness(0.5);
}

.other-project-image-container:hover .other-project-data {
    opacity: 1;
}

.other-projects-btn {
    display: none;
}


/* Project: only-desktop */


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

    .second-project-card .project-percentages {
        display: none;
    }


    .main-project-card .project-percentages {
    margin-left: 20px;
    }

    .project-details-btn {
        display: none;
    }



}



/* Founding active */


.founding-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    grid-area: flex-bubbles;
}

/* other way */
/* .founding-item:first-child:nth-last-child(odd)  */

.founding-item:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
  }

.founding-item:nth-last-child(1):nth-child(odd) .fouindig-item-title {
    text-align: left;
}


.founding-info-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    grid-area: founding-info;
}



.founding-item {
    display: flex;
    background-color: var(--panel-mid-blue);
    border: 1px solid rgba(255, 255, 255, 0.088);
    padding: 10px;
    border-radius: 20px;
    align-items: center;
    gap: 20px;
}



.foundig-item-info {
    flex-direction: column;
    gap: 20px;
}



.founding-btn { 
    grid-area: founding-btn;
    justify-self: center;
}


.founding-text {
    font-size: 1.2rem;
}

.donation-founding-bar {
    grid-area: founding-bar;
    width: 80%;
    justify-self: center;
    margin-top: 20px;
}



.founding-item-image {
    width: 150px;
    height: auto;
    border-radius: 20px;
}

.fouindig-item-title {
    text-align: center;
    font-size: 1rem;
    text-wrap: pretty;
    padding: 20px;
    border-radius: 20px;
    background: var(--panel-light-blue);
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
}

.founding-info-text {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    letter-spacing: .1rem;
    font-weight: 500;
    font-size: 1rem;
    text-align: justify;
}

.founding-progress-text {
    font-weight: 600;
    letter-spacing: .1rem;
    font-size: 1.2rem;
    text-align: center;
}





/* End of Founding active */



/* Mobile */ 
@media (max-width: 960px) {


    .main-project-card,
    .second-project-card {
        grid-template-areas: "image image"
                             "title title"                 
                             "main main"
                             "percent percent"
                             "details-btn details-btn";
    }

    .main-project-card {
        margin-bottom: 0;
    }

    .project-line {
        order: 2;
        margin-top: 30px;
        display: block;
    }

    .second-project-card {
        grid-template-rows: auto;
        margin: 50px 0 0 ;
    }
    
    .main-project-card,
    .second-project-card {
        grid-template-columns: 50% 50%;
        padding: 0;
        border: none;
    }

   .project-percentages {
        display: flex;
        width: 70%;
        justify-self: center;
        z-index: -1;
        max-height: 0;
        opacity: 0;
        
        transition: max-height 0.4s ease, opacity 0.2s ease;
    } 
    
    .project-percentages.show {
        max-height: 500px;
        margin-top: 30px;
        opacity: 1;
        overflow: show;
    }

    .second-project-card .separator-line {
        margin: 0 auto;
    }


    .main-project-box {
        width: 60%;
        min-width: 250px;
        justify-self: center;
    }

    .main-project-card .percent-project-image,
    .second-project-card .percent-project-image {
        margin: 0;
        width: 100%;
        height: auto;
        max-width: 240px;
        min-width: 150px;
        object-fit: cover;
    }

    .main-project-box .project-bar {
        margin: 0;
    }

    .second-project-card .percent-btn {
        display: none;
    }

    .second-project-card .progress-project-name {
        margin: 15px 0 15px;
    }

    .projects .separator-line {
        margin: 50px auto 0;
    }

    .projects-container:has(.second-project-card.visible) .separator-line {
        display: block;
        margin-top: 80px;
    }

    .project-details-btn {
        width: auto;
        justify-self: center;
        margin-top: 30px;
    }


    .other-projects {
        padding: 0;
    }

    .other-projects-btn {
        display: block;
        grid-area: other-proj-btn;
        width: 50%;
        justify-self: center;
    }

    .other-projects-title,
    .other-project-card {
        display: none;
    }


    /* Founding active */



    .founding-active-section-index .donation-founding-container {
        margin-top: 50px;
    }
    

    .founding-item {
        flex-direction: column;
        width: auto;
        gap: 20px;
        padding: 20px 10px;
    }

    
    .fouindig-item-title {
        margin: 0;
        width: auto;
    }
    
    .founding-info-text {
        text-align: left;
    }

    

}


/* ------------------
    Donators
    -----------------
*/


.donators {
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
}

.donate-img {
    width: 100px;
    margin: 100px auto 0;
    order: 1;
}

.donators-title {
    order: 2;
}

.donators-sub-title {
    order: 3;
    text-align: center;
}

.donate-line {
    order: 4;
}


.donators-desc,
.donators-slider-container {
    order: 6;
    margin-top: 20px;
}


.donators-container {
    position: relative;
    width: 100%;
    padding: 5px;
    overflow-x: clip;
    order: 4;
    margin: 50px 0 80px;
}

.donators-wrapper {
    display: flex; 
    transition: transform 0.8s ease-in-out;
}

.donators-slide {
    flex: 0 0 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
}


.donators-slide.active {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.donator-names {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 30px; 
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.donator-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: white;
    font-weight: 600 ;
    border: 1.5px dashed rgba(255, 255, 255, 0.217);
    border-radius: 10px;
    padding: 15px;
    min-width: 50px;
    max-width: 500px;
    height: auto;
    margin: 0;
}


.partner-logo {
    width: 300px;
    height: auto;
    margin: 40px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.088);
    border-radius: 15px;
    padding: 20px;
}

@media (min-width: 960px) {
    .donator-item:hover{
        border-color: var(--faded-gold);
    }
}



.donators-slider-nav {
    order: 5;
    margin-top: 30px;
}

.donate-btn {
    order: 7;
    margin: 20px auto 0;
}





/* Mobile */
@media (max-width: 960px) {


    .donator-names {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }

    .partner-logo {
        width: 200px;
    }

}

/* Middle */
@media (max-width: 800px) {

    .donator-names {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }

    .donate-img {
        width: 70px;
    }

}
/* Extra small */
@media (max-width: 500px) {
    
    .donator-names {
        grid-template-columns: repeat(2, minmax(50px, 1fr));
    }
}





/* ------------------------------------------------------------ 
///////////////////////////Projects///////////////////////////
/////////////////////////////and/////////////////////////////
////////////////////////////News////////////////////////////
------------------------------------------------------------ */



/* Section */


.cards-container {
    display: flex;
    flex-direction: column;
}



/* ------------------
    project-card
    -----------------
*/


.project-card {
    display: flex;
    flex-direction: column;
    background-color: var(--panel-dark-blue);
    text-decoration: none;
    max-width: 250px;
    color: white;
    border-radius: 20px;
    margin: 30px auto;
    word-wrap: break-word;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; 
}


.project-card:active,
.project-card:hover {
    color: var(--szinkron-gold);
    background: var(--night-sky);
    filter: drop-shadow(5px 5px 10px rgba(0, 1, 20, 0.16)) brightness(1.1);
}


.project-card-name {
    text-align: center;
    font-size: .9rem;
    padding: 0 10px;
}


.project-card-img {
    border-radius: 20px 20px 0 0;
}


/* ------------------
    news-card
    -----------------
*/

.news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: white;
    background-color: var(--panel-light-blue);
    border-radius: 14px;
    max-width: 500px;
    margin: 30px auto;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; 
    min-height: 300px;
    position: relative;
}

.news-card-inactive {
    filter: grayscale(.5);
}


.news-card-inactive .new-card-read-text {
    opacity: 0;
}

.news-card-inactive::before {
    content: "Inaktív";
    position: absolute;
    text-align: center;
    font-size: 1rem;
    width: 100%;
    bottom: 10px;
    color: #f58b8b
}


.new-card-read-text:active,
.new-card-read-text:hover {
    color: var(--szinkron-gold);
}


.news-card-img {
    border-radius: 14px 14px 0 0;
    object-fit: cover;
    aspect-ratio: 2 / 1;
    pointer-events: none;
}


.news-card-name {
    margin: 15px 10px 5px;
    font-size: 1.3rem;
    grid-area: card-name;
    min-height: 50px;
}

.news-card-meta {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}



.news-card-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-card-content {
    padding: 10px;
}

.news-card-date,
.news-card-author {
    margin: 0;
    display: inline-block;
    color: rgba(255, 255, 255, 0.747);
    font-size: .8rem;
}

.news-card-desc {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    /* text-align: justify; */
    font-size: 1rem;
    line-height: 1.67rem;
    font-weight: 400;
    margin-bottom: 10px;
}


.news-card-read-btn {
    background-color: var(--panel-dark-blue);
    padding: 15px;
    border-radius: 0 0 14px 14px;
    display: flex;
    margin-top: auto;
    align-items: center;
    justify-content: center;
}    


.new-card-read-text {
    text-decoration: none;
    color: white;
    display: inline-block;
    margin: 0 auto;
    font-weight: 600;
    font-size: .8rem;
}


.new-card-read-text:active,
.new-card-read-text:hover {
    color: var(--szinkron-gold);
}


/* Desktop */
@media (min-width: 960px) {
 
    .project-card-line {
        display: none;
    }
    
    .cards-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(300px, 1fr));
        max-width: 100%;
        margin: 50px 50px 50px;
    }



    .news-cards .cards-container {
        gap: 10px 40px;
    }

    .project-card,
    .news-card {
        margin: 20px auto;
    }


    .news-card:active,
    .news-card:hover {
        background: var(--night-sky);
        filter: drop-shadow(5px 5px 10px rgba(0, 1, 20, 0.16)) brightness(1.1);
    }


    .project-card:active,
    .project-card:hover,
    .news-card:active,
    .news-card:hover {
        transform: scale(1.01); 
    }


    .project-card {
        max-width: 270px;
    }
    

    .news-card:active .news-card-name,
    .news-card:hover .news-card-name {
    color: var(--szinkron-gold);
    }


   

    /* Animation   */

    .news-card,
    .project-card {
        opacity: 0;
        animation: zoomIn 0.6s ease forwards;
    }
    
    /* Dellay */
    .news-card:nth-child(1),
    .project-card:nth-child(1) {
        animation-delay: 0s;
    }
    
    .news-card:nth-child(2),
    .project-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .news-card:nth-child(3),
    .project-card:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    .news-card:nth-child(4),
    .project-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    .news-card:nth-child(5),
    .project-card:nth-child(5) {
        animation-delay: 0.5s;
    }

    .news-card:nth-child(6),
    .project-card:nth-child(6) {
        animation-delay: 0.6s;
    }


}  

/* Middle */
@media (max-width: 1280px) {

    .cards-container {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        margin: 50px 50px 80px;
    }


}

/* Mobile */
@media (max-width: 960px) {
 
    .cards-container > *:first-child {
        margin-top: 60px;
    }
    
    .cards-container > *:last-child {
        margin-bottom: 60px;
    }

    .cards-container {
        margin: 0 10px 20px;
        width: 90%;
        margin: 0 auto;
    }

    .news-card {
        filter: drop-shadow(5px 5px 10px rgba(0, 1, 20, 0.16));
    }

    .news-card-inactive {
        filter: grayscale(.5);
    }


}  


/* ------------------------------------------------------------ 
///////////////////////////Projects Page///////////////////////
------------------------------------------------------------ */


/* Project-info-section */

.project-info-container {
    width: 100%;
    height: 330px;
    display: grid;
    grid-template-columns: 0px 90px 90px 300px 90px 90px 0px;
    grid-template-rows: 40px 250px 40px;
    grid-template-areas: ". . . image . . ."
                         ". time sound image date update ."
                         ". . . image . . .";
    justify-content: center;
    align-items: center;
    gap: 0 40px;
    margin-bottom: 60px;
}

.time {grid-area: time;}
.sound {grid-area: sound;}
.date {grid-area: date;}
.update {grid-area: update;}



.project-info-container::before {
    content: "";
    width: 100%;
    height: 200px;
    margin: auto;
    border-radius: 20px;
    background-color: var(--panel-light-blue);
    z-index: -1; 
    grid-column: 1 / 8;
    grid-row: 2 / 3;
} 



 .project-image {
    width: 250px;
    border-radius: 20px;
    margin: auto;
    grid-area: image;
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143));
    transition: filter 0.2s ease-in-out;
 }   

 .project-image:hover {
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143)) brightness(1.1);
 }


 .info-item {
    width: 90px;
    height: 90px;
    background-color: var(--panel-dark-blue);
    border-radius: 20px;
    align-self: center;
    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out, background  0.2s ease-in-out;
 }

 .info-item:hover {
    background: var(--night-sky);
    color: var(--szinkron-gold);
 }
    

.info-item-pic {
    color: white;
    display: block;
    width: 30px;
    height: 30px;
    margin: 10px auto 0;
    stroke: white;
}

.info-item:hover  .info-item-pic {
    color: var(--szinkron-gold);
    stroke: var(--szinkron-gold);
}

.info-item-text,
.info-item-content,
.credit-item-text,
.credit-item-content{
    text-align: center;
    font-weight: 600;
    
}


.info-item-text {
    margin: 5px 0 0;
}


.info-item-content {
    margin: 0;
}


/* Project-Downloads-section */ 


.project-downloads {
    display: flex;
    flex-direction: column;
}


.project-downloads-container {
    margin: 80px 0 80px;
    display: grid;
    grid-template-columns: 30px 200px 30px 1fr 80px 200px 30px;
    grid-template-rows: 70px 20px 1fr 20px 80px 20px;
    grid-template-areas: "title title title title . . ."
                         ". . . . . . ."
                         ". textbox textbox textbox textbox textbox ."
                         ". . . . . . ."
                         ". button items items items plarforms ."
                         ". . . . . . .";
}


.project-downloads-container::before {
    content: "";
    background-color: var(--panel-dark-blue);
    border-radius: 15px;
    grid-column: 1 / 8;
    grid-row: 2 / 8;
}


.download-item-title { grid-area: title;}
.download-card-textbox { grid-area: textbox;}
.download-btn { grid-area: button;}
.download-items { grid-area: items;}
.platform-items { grid-area: plarforms;}
.download-card-more-btn { grid-area: morebtn;}


.download-item-title {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    font-size: 1.1rem;
    margin: auto 0;
    padding: 15px;
    background: var(--panel-dark-blue);
    border-radius: 15px;
}

.download-card-list-item {
    line-height: 2em;
    transition: margin 0.5s ease-in-out;
}

.download-card-textbox {
    font-family: "JetBrains Mono", monospace;
    padding: 10px 30px 10px 0;
    letter-spacing: .1rem;
    background-color: var(--panel-light-blue);
    border-radius: 15px;
    height: calc(4 * 2em); /* Az "em" értéke a sor magasságától függ */
    overflow-y: clip;
    transition: height 0.5s ease, opacity 0.5s ease;
}

.download-card-textbox.open {
    padding-bottom: 0;
    height: auto;
}



.download-card-more-btn {
    height: 30px;
    width: 100px;
    margin: auto 5px 5px 0;
    background: #21323e;
    border-radius: 10px;
    justify-self: end;
    display: flex;
    cursor: pointer;
    color: white;
}

@media (min-width: 960px) {

    .download-card-more-btn {
        grid-column: 6 / 7;
        grid-row: 3 / 4;
    }

}

.download-card-more-btn:hover,
.download-card-more-btn:focus {
    background: var(--king-blue);
}

.more-btn-text {
    font-family: "JetBrains Mono", monospace;
    text-align: center;
    margin: auto;
}

.download-card-list-item:nth-child(n + 4) {
    opacity: 0;
}

.project-downloads-container:has(.open) .download-card-list-item:nth-child(n + 4){
    opacity: 100%;
}

.download-card-list-item:nth-child(n + 4){
    transition: opacity 0.5s ease-in-out;
}

.dowload-card-list {
    font-size: .9rem;
    line-height: 1.6rem;

}

.dowload-card-list p {
    margin: 0 0 0 20px;
}


.download-card-list-item {
    margin-right: 10px;
    max-width: 700px;
}

.download-card-list-item p:nth-child(3) {
    margin-bottom: 10px;
}

.download-card-list-item::before {
    content: "‣ ";
    font-size: 1.2rem;
}

.download-btn {
    margin: auto 0;
}

.download-items,
.platform-items {
    display: flex;
    margin-left: auto;
}

.download-items {
    gap: 10px;
    margin: 0 auto;
}

.download-item,
.platform-item {
    width: 70px;
    height: 70px;
    background-color: var(--panel-light-blue);
    border-radius: 20px;
    align-self: center;
    margin: 10px;
    display: flex;
    flex-direction: column;
    fill: white;
    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out, background  0.2s ease-in-out;
 }

 .download-item-info {
    cursor: pointer;
 }

 .platform-item {
    width: 50px;
    height: 50px;
    border-radius: 15px;
 }

 
 .download-item-pic,
 .platform-item-pic {
     color: white;
     display: block;
     width: 35px;
     height: 35px;
     margin: 0 auto;
     padding: 5px;
     stroke-linecap:round;
     stroke-linejoin:round;
     stroke-width:66.7px;
    }
    
    .platform-item-pic {
        width: 30px;
        height: 30px;
        margin: auto;
    }


.download-item:hover,
.platform-item:hover {
    background: var(--king-blue);
    color: var(--szinkron-gold);
    fill: var(--szinkron-gold);
}


    
.download-item-text {
    text-align: center;
    font-size: .6rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: .05rem;
}




/* Project-credits-section */


.project-page-credits {
    /* display: none; */
    display: flex;
    flex-direction: column;
}

.projects-credits-container {
    margin: 80px 0 80px;
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 40px;
}


.credit-item {
    background: var(--panel-dark-blue);
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    width: 80%;
    height: auto;
    justify-self: center;
    padding: 10px;
    border: 3px dashed rgba(108, 108, 108, 0);
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.279));
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.credit-item:hover,
.credit-item:active {
   filter: drop-shadow(5px 5px 30px rgba(126, 124, 234, 0.109));
   transform: scale(1.03);
}



.credit-item-pic {
    width: 40px;
    height: 40px;
    color: white;
    display: block;
    margin: 20px auto 0;
}

.credit-item-text,
.credit-item-content {
    font-size: 1rem;
    margin: 0;
}

.credit-item-text {
    margin-top: 10px;
}

.credit-item-content {
    margin: 5px 0 20px;

}

/* project-cast-Section */



.project-video {
    display: flex;
    flex-direction: column;
    margin: 50px auto 80px;
}




/* Middle */
@media (max-width: 1280px) {

    
/* Project-info-section */

    .project-info-container {
        margin: 40px 0 60px;
        grid-template-columns: 250px 90px 90px 0px;
        grid-template-rows: 0px 80px 80px 0px;
        grid-template-areas: "image . . ."
                             "image time sound ."
                             "image date update ."
                             "image . . .";
        gap: 40px;
    }

    .project-info-container::before {
        grid-column: 1 / 5;
        grid-row: 1 / 5;
        height: 250px;
    } 

    .info-item {
        margin: 40px 0;
    }



    /* Project-Downloads-section */ 
 
    .project-downloads-container {
        margin: 80px auto 80px;
        display: grid;
        grid-template-columns: 30px 100px minmax(80px, 1fr) 200px minmax(80px, 1fr) 200px 30px;
        grid-template-rows: 70px 20px 1fr 20px 80px 20px;
        grid-template-areas: "title title title title title . ."
                             ". . . . . . ."
                             ". textbox textbox textbox textbox textbox ."
                             ". . . . . . ."
                             ". button . items . plarforms ."
                             ". . . . . . .";
    }

    .project-downloads-container::before {
        grid-column: 1 / 8;
        grid-row: 2 / 8;
    } 

    .download-card-list-item {
        max-width: 500px;
    }
  
    
    .download-items,
    .platform-items {
        gap: 0px;
}
    


    /* Project-credits-section */   

    .projects-credits-container { 
        gap: 40px 100px;
    }


    .projects-credits-container > *:nth-child(odd) {
        justify-self: end;
    }
      
    .projects-credits-container > *:nth-child(even) {
        justify-self: start;
    }

    .credit-item {
        width: 70%;
    }


}


/* Mobile */
@media (max-width: 960px) {



    /* Project-info-section */

    .project-info-container {
        margin: 40px 0 200px;
        grid-template-columns: 110px 110px;
        grid-template-rows: 215px 100px 115px;
        grid-template-areas: "image image"
                             "time sound"
                             "date update";
        gap: 20px;
    }


    .project-info-container::before {
        height: 470px;
        width: 100%;
        grid-row: 1 / 3;
        grid-column: 1 /3;
    }

    .project-image {
        width: 200px;
        justify-self: center;
        margin-top: 15px;
    }

    .sound,
    .update {
        justify-self: start;
    }


    .time,
    .date {
        justify-self: end;
    }

    .project-image,
    .project-info-container::before {
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.279));
    }



    /* Project-Downloads-section */ 

    
    .project-downloads-container {
        margin: 80px auto 80px;
        display: grid;
        grid-template-columns: 20px minmax(300px, 1fr) 20px;
        grid-template-rows: 20px minmax(70px, 90px) 20px 1fr 60px 20px 70px 10px 70px 20px 50px 20px;
        grid-template-areas: ". . ."
                             ". title ."
                             ". . . "
                             ". textbox ."
                             ". morebtn ."
                             ". . ."
                             ". items ."
                             ". . ."
                             ". plarforms ."
                             ". . ."
                             ". button ."
                             ". . .";
    }



    .project-downloads-container::before {
        grid-column: 1 / 4;
        grid-row: 1 / 13;
    } 

    .download-items,
    .platform-items {
        display: flex;
        margin: 0 auto;
        gap: 10px;
    }

    .download-btn,
    .download-card-more-btn {
        justify-self: center;
    }


    .download-card-more-btn {
        background: var(--panel-light-blue);
        margin: 20px auto;
        height: 35px;
        width: 120px;
    }



    .download-item-title {
        background: var(--panel-light-blue);
        font-size: .9rem;
        text-align: center;
        font-weight: 800;
        transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    .dowload-card-list {
        font-size: .8rem;
    }
    
    .download-card-list-item:nth-child(3) {
        margin-bottom: 10px;
    }




    /* Project-credits-section */

    .credit-item {
        height: auto;
        /* filter: none; */
        filter: drop-shadow(5px 5px 30px rgba(126, 124, 234, 0.109));
        transform: none;
    }

    .projects-credits-container { 
        gap: 40px
    }

    .credit-item:hover,
    .credit-item:active {
       transform: none;
       filter: none;
    }


}



/* Extra small */

@media (max-width: 575px) {


/* Project-credits-section */


    .projects-credits-container {
        grid-template-columns: repeat(1, minmax(100px, 1fr));
    }


    .credit-item {
        width: 100%;
        min-height: 100px;
        justify-self: center !important;
    }

    .download-card-textbox {
        height: 150px;
     }

     .download-card-list-item {
        hyphens: auto;
        overflow-wrap: break-word;
        word-break: break-word;
        letter-spacing: 0;
     }
     
 
}


/* ------------------------------------------------------------ 
///////////////////////////Active-Project Page///////////////////////
------------------------------------------------------------ */



.active-projects {
    margin: 80px 0;
}

.active-project-card {
    margin-bottom: 80px;
}



/* ------------------------------------------------------------ 
///////////////////////////News article Page///////////////////////
------------------------------------------------------------ */


.news-section {
    margin: 100px auto 120px;
    width: 90%;
}

.news-content-container {
    padding: 10px 0;
    border-radius: 10px;
    margin-top: 20px;
    user-select: none;
}

.article-image {
    object-fit: cover;
    object-position: top;
    width: 100%;
    aspect-ratio: 3 / 1.1;
    border-radius: 10px;
    pointer-events: none;
}

.article-title {
    text-align: center;
    margin: 40px 0 20px;
}

.news-prop-container,
.news-nav-container {
    margin: 20px auto 30px;
    display: flex;
    justify-content: space-between;
}


 

.news-bubble {
    display: flex;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}


.news-meta {
    padding: 0;
}

.news-inactive-text {
    background: #e75d5d43;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    display: block;
}

.news-status-select {
    border: none;
    background: var(--panel-mid-blue);
    -webkit-appearance: none;
    -webkit-text-fill-color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-align-last: center;
}

.news-status-select:hover,
.news-status-select:active,
.news-status-select:focus {
    background: var(--panel-light-blue);
    outline: none;
}

.news-next-btn:active,
.news-prev-btn:active {
transform: scale(0.90);
}

.news-next-btn:hover,
.news-prev-btn:hover,
.news-admin-btn:hover {
    background: var(--panel-light-blue);
    border-radius: 20px;
    }

.news-prev-btn {
    gap: 0;
    padding: 10px 20px 10px 10px;
}

.news-next-btn {
    gap: 0;
    padding: 10px 10px 10px 20px;
}

.news-author-icon {
    height: 25px;
}

.news-author-text {
    align-self: center;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}


.news-admin-container {
    background: var(--panel-blue);
    padding: 10px;
    border-radius: 20px;
}

.news-admin-control {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.news-admin-btn {
    background-color: var(--panel-mid-blue);
}

.news-bubble-bcg {
    background: var(--panel-mid-blue);
    box-shadow: var(--shadow-elevation-medium);
}


/* youtube-video */
.news-content-container iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
}


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

}


/* Mobile */
@media (max-width: 960px) {


    .news-section {
        width: 100%;
        margin: 50px auto 20px;
    }

    .news-content-container {
        background: none;
        padding: 0;
    }

    .news-nav-container {
        margin-top: 80px;
    }

    .article-image {
        aspect-ratio: 2 / 1;
    }

    .article-title {
        text-align: left;
    }

    .news-author-text {
        font-size: .8rem;

    }

    .news-admin-control {
        flex-direction: column;
    }

    .news-admin-control button {
        width: 100%;
        justify-content: center;
    }

    .news-section-end-line {
        display: none;
    }
}




/* ------------------------------------------------------------ 
///////////////////////////Donation Page///////////////////////
------------------------------------------------------------ */



/* Donation info section */

.donation-sections {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-bottom: 80px;
}


.donation-info-panel {
    background: var(--panel-light-blue);
    width: 90%;
    margin: 0 auto 10px;
    border-radius: 20px;
}

.donation-info-text-container {
    padding: 5px 20px;
}


.donation-info-text-container p {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .1rem;
    margin: 20px 0;
}

.donation-info-text-container h1,
.donation-info-text-container h2,
.donation-info-text-container h3,
.donation-info-text-container h4 {
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    margin: 20px 0;
}

.donation-info-text-container h2 {
    font-size: 1.5rem;
}

.donation-info-text-container h3 {
    font-size: 1.4rem;
}

.donation-info-text-container h4 {
    font-size: 1.3rem;
}



.donation-info-text-container strong {
    font-weight: 800;
}

.donation-info-text a {
    text-decoration: none;
}

.donation-info-text a strong:hover,
.donation-info-text a strong:focus {
    color: #63ef8f;
    text-decoration: underline;
}




/* Donation paypal section */


.donation-container {
    display: grid;
    width: 70%;
    margin: 0 auto;
    grid-template-columns: minmax(20px, 100px) 1fr minmax(20px, 100px);
    grid-template-rows: 30px 30px 50px 70px 30px 1fr 30px;
    grid-template-areas: ". logo ."
                         ". . ."
                         ". . ."
                         ". text ."
                         ". . ."
                         ". bubbles ."
                         ". . .";
}



.donation-container::before {
    content: "";
    background: #1e3242;
    grid-column:  1 / 8;
    grid-row: 2 / 8;
    border-radius: 20px;
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143));
    z-index: -1;
}

.donation-logo-pic {
    display: inline-block;
    justify-self: center;
    background: #d9d9d9;
    border-radius: 10px;
    padding: 10;
    grid-area: logo;
    width: 200px;
    height: 60px;
}

.donation-text {
    background: var(--panel-light-blue);
    border-radius: 20px;
    padding: 10px 15px;
    font-family: "JetBrains Mono", monospace;
    text-align: center;
    align-self: center;
    font-size: 1.1rem;
    grid-area: text;
}

.donation-bubble {
    color: white;
    font-size: 1rem;
    border-radius: 10px;
    padding: 10px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}


.donation-bubble:hover,
.donation-bubble:focus {
    filter: brightness(1.3);
}

.donation-bubble:active {
    transform: scale(0.90);
}


/* Bubbles */

.paypal-bubbles {
    grid-area: bubbles;
    display: grid;
    align-items: center;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(8, 70px);
    grid-template-areas: ". bubble-1000 bubble-1000 bubble-3000 bubble-3000 bubble-6000 bubble-6000 ."
                         "bubble-8000 bubble-8000 bubble-10000 bubble-10000 bubble-20000 bubble-20000 bubble-30000 bubble-30000"
                         ". . bubble-50000 bubble-50000 bubble-etc bubble-etc . .";
    gap: 20px;
} 


.bubble-1000 { 
    grid-area: bubble-1000;
    background: var(--bubble-blue);
}
.bubble-3000 { 
    grid-area: bubble-3000;
    background: var(--bubble-blue);
}
.bubble-6000 {
     grid-area: bubble-6000;
     background: var(--bubble-blue);
}
.bubble-8000 {
     grid-area: bubble-8000;
     background: var(--bubble-green);
}
.bubble-10000 {
     grid-area: bubble-10000;
     background: var(--bubble-green);
}
.bubble-20000 {
     grid-area: bubble-20000;
     background: var(--bubble-green);
}
.bubble-30000 {
     grid-area: bubble-30000;
     background: var(--bubble-green);
}
.bubble-50000 {
     grid-area: bubble-50000;
     background: var(--bubble-purple);
}
.bubble-etc {
     grid-area: bubble-etc;
     background: var(--bubble-purple);
}


/* Donation patreon section */

.bubble-patreon {
    grid-area: bubble-etc;
    background: var(--bubble-orange);
    grid-area: bubble;
    width: 200px;
    justify-self: center;
}


.donation-patreon-container {
    grid-template-rows: 30px 30px 30px 1fr 20px 40px 30px;
    grid-template-columns: minmax(20px, 40px) 1fr minmax(20px, 40px);
    grid-template-areas: ". logo ."
                         ". logo ."
                         ". . ."
                         ". flex-bubbles ."
                         ". . ."
                         ". bubble ."
                         ". . .";
}


/* Donation benefits section */

.donation-benefits-container {
    grid-template-rows: 30px 30px 30px 1fr 40px;
    grid-template-columns: minmax(20px, 40px) 1fr minmax(20px, 40px);
    grid-template-areas: ". logo ."
                         ". logo ."
                         ". . ."
                         ". flex-bubbles ."
                         ". . .";
}



.donation-flex-bubbles {
    grid-area: flex-bubbles;
    display: flex;
    flex-direction: column;
    text-wrap: ballance;
}

.tear-1 {
     border: 1px solid #2e6086;
    }
.tear-2 {
    border: 1px solid #2f947e;
    }
.tear-3 {
    border: 1px solid #6894f5;
    }


.donation-benefits-container::before {
    grid-row: 2 / 12;
}


/* Donation founding section */


.donation-founding-container {
    width: 100%;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: 30px 30px 30px auto 30px auto 30px;
    grid-template-areas: ". logo ."
                         ". logo ."
                         ". . ."
                         ". flex-bubbles ."
                         ". . ."
                         ". founding-info ."
                         ". . .";
}



.founding-active-section .donation-founding-container {
    width: 70%;
}



/* Index-page layout */
.project-bar.founding-bar {
    margin: 0;
}



/* Donators */

.year-container {
    margin-top: 20px;
}

.year-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    order: 5;
    margin-top: 30px;
}

.year-selector button {
    min-width: 100px;
    max-width: 500px;
    border: 1.5px dashed rgba(255, 255, 255, 0.217);
    border-radius: 10px;
    color: white;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

.year-selector button:hover {
    background-color: var(--king-blue);
    border-color: var(--faded-gold);
}


.year-selector button:focus,
.year-selector button.active,
.year-selector button.year-active {
    font-weight: bold;
    border-color: var(--szinkron-gold);
}



/* Middle */
@media (max-width: 1280px) {


    .paypal-bubbles {
        grid-template-rows: repeat(5, 50px);
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "bubble-1000  bubble-3000"
                             "bubble-6000 bubble-8000"
                             "bubble-10000 bubble-20000"
                             "bubble-30000 bubble-50000"
                             "bubble-etc bubble-etc";
    }

    .bubble-8000 {
         background: var(--bubble-blue);
    }
    .bubble-50000 {
         background: var(--bubble-green);
    }

}


/* Mobile */
@media (max-width: 960px) {


    .donation-paypal-container {
        width: 80%;
        grid-template-columns: 30px 1fr 30px;
    }


    .donation-benefits-bubbles,
    .donation-founding-container {
        width: 80%;
    }

    .projects:has(.donation-container) .donation-container,
    .founding-active-section .donation-founding-container {
        width: 100%;
    }



}


/* Extra small */

@media (max-width: 500px) {


    .donation-paypal-container,
    .donation-patreon-container {
        width: 100%;
        grid-template-columns: 20px 1fr 20px;
    } 
    
    .donation-benefits-container,
    .donation-founding-container {
        width: 100%;
    }


}


/* ------------------
    About
    -----------------
*/


/* Info section */
.about-sections {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 160px auto 80px;
}


.about-info-panel {
    width: 90%;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 20px;
    padding: 10px;
    position: relative;

}


.about-info-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: var(--panel-light-blue);
    filter: drop-shadow(10px 10px 0px var(--panel-dark-blue));
    z-index: -1;
}


.about-title {
    position: Absolute;
    background: var(--panel-dark-blue);
    display: inline-block;
    padding: 15px 30px;
    border-radius: 10px;
    top: -40px;
    left: -40px;
    font-size: 1.5rem;
    margin: 0;
    color: #fff;
    
}


.about-info-panel .separator-line {
    display: none;
}

.about-content-container {
    padding: 5px 20px;
}


.about-info-panel p {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .1rem;
    line-height: 2rem;
    margin: 20px 0;
    padding: 5px;
    /* text-align: justify; */
}


/* Member section */

.about-members-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.about-member-item {
    display: grid;
    grid-template-columns: .75fr 20px 1fr 1fr 20px 20px;
    grid-template-rows: 20px 20px 50px 20px 1fr 20px;
    grid-template-areas: 
    "member-pic . . . . ."
    "member-pic . . . . ."
    "member-pic . member-name . . ."
    "member-pic . . . . ."
    "member-pic . member-desc member-desc . ."
    "member-pic . . . . .";
}


.about-member-item::before {
    content: "";
    background: var(--panel-light-blue);
    border-radius: 20px;
    filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143));
    grid-column: 1 / 6;
    grid-row: 2 / 6;
    z-index: -1;
}


.about-members-container > *:nth-child(even) {
    grid-template-columns: 20px 20px 1fr 1fr 20px .75fr;
    grid-template-areas: 
    ". . . . . member-pic"
    ". . . . . member-pic"
    ". . member-name . . member-pic"
    ". . . . . member-pic"
    ". . member-desc member-desc . member-pic"
    ". . . . . member-pic";
    
}

.about-members-container > .about-member-item:nth-child(even)::before {
    grid-row: 2 / 6;
    grid-column: 2 / 7;
}
  


.about-member-pic {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    grid-area: member-pic;
}

.about-member-name-container {
    grid-area: member-name;
    display: flex;
    border-radius: 10px;
    background: var(--panel-dark-blue);


}

.about-member-name {
    align-self: center;
    margin-left: 10px;
    font-size: 1.5rem;
    color: #fff;
}

.about-member-desc {
    font-family: Wotfard, Wotfard-fallback, sans-serif;
    grid-area: member-desc;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .1rem;
    line-height: 2rem;
    margin: 0 0 20px;
}

.about-members-container .separator-line {
    display: none;
}




/* Middle */
@media (max-width: 1280px) {



    .about-members-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        gap: 80px;
    }

    .about-member-item {
        display: flex;
        flex-direction: column;
        background: var(--panel-light-blue);
        border-radius: 10px;
        max-width: 350px;
        min-height: 800px;
        filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.143));
        align-self: center;

        align-self: center;
        padding: 30px;
        margin: 0 auto;
    }

    .about-member-pic {
        width: auto;
        height: auto;

    }

    .about-member-name {
        margin: auto;
        padding: 10px;
    }

    .about-member-name-container {
        position: relative;
        top: -10px;
        border-radius: 0 0 10px 10px;
    }
    
    
      

}


/* Mobile */
@media (max-width: 960px) {
    
    .about-members-container {
        grid-template-columns: 1fr;
    }
}


/* Extra small */
@media (max-width: 700px) {

/* Info section */

    .about-info-panel {
        width: 100%;
        padding: 0;
    }


    .about-info-panel::before {
        display: none;
    }


    .about-info-panel .separator-line {
        display: inline-block;
        margin-top: 10px;
        
    }
  
    
    .about-title {
        background: none;
        display: block;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5rem;
        padding: 0;
        text-align: center;
    }

    .about-us-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .about-content-text {
        line-height: 1.5rem;
       
    }

    .about-sections {
        margin: 100px auto 80px;
    }


    .about-info-panel p {
        letter-spacing: .1rem;
        line-height: 1.8rem;
        font-weight: 400;
        text-align: left;
    }
  
    

 /* Member section */

    .about-members-container {
        display: flex;

        width: 100%;
    }
    
    .about-member-item {
        min-height: auto;
    }

    .about-member-name-container {
        background: none;
    }
    
    .about-member-name {
        margin: 40px 0 0;
        padding: 0;
    }

    .about-member-desc {
        font-size: 1.2rem;
        font-weight: 400;
    }

    .about-member-pic {
        max-width: 250px;
        margin: 0 auto;
    }

    .about-members-container .separator-line {
        display: block;
        margin-top: 50px;
    }


    .about-member-item {
        display: flex;
        flex-direction: column;
        background: none;
        border-radius: 10px;
        min-height: auto;
        filter: none;
        padding: 0;
        max-width: 100%;
        margin: 0;
    }


}


/* ------------------
    Footer
    -----------------
*/




footer {
    height: 150px;
    background: #141e25;
    overflow-x: clip;
    opacity: 0;
    transform: translateY(100%);
    animation: slideUp 0.5s ease-out forwards; /* Alapértelmezett betöltési animáció */
}

footer.loaded {
    animation: slideUp 0.5s ease-out forwards; /* Betöltési animáció */
}

footer.unloading {
    animation: slideDown 0.5s ease-out forwards; /* Kilépési animáció */
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}


.footer-container {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 110ch minmax(100px, 1fr);
    grid-template-areas: 
    "left middle right";  
}

.footer-left {grid-area: left;}
.footer-middle{grid-area: middle;}
.footer-right{grid-area: right;}

.footer-left,
.footer-right {
    display: flex;
    padding: 40px;
    margin-left: 20px;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.footer-right {
    justify-content: right;
    margin-right: 20px;
}


.social-item {
    border: 2px dashed rgba(255, 255, 255, 0.145);
    padding: 8px 8px 6px 8px;
    border-radius: 12px;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 40px;
    height: 40px;
}



.social-img {
    width: 40px;
    height: 40px;
}

.social-item:hover,
.social-item:focus {
    color: var(--szinkron-gold);
    border-color: var(--faded-gold);
}


.footer-middle {
    text-align: center;
    margin: auto;
}

.footer-logo {
    height: 29px;
    width: 100%;
    margin: 20px auto 0;
}

.idk {
    display: none;
}

.patrner-link:hover,
.patner-link:focus {
    color: var(--highlight-blue);
}



/* Middle */
@media (max-width: 1280px) {
    
    footer {
        height: 200px;
    }


    .footer-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "middle middle"
        "left right";
        justify-content: center;                 
    }



    .footer-left,
    .footer-right { 
        padding: 10px;
    }

    .footer-left {
        justify-content: right;
    }

    .footer-right {
        justify-content: left;
        margin-left: 0;
    }
    

    .social-img {
        width: 35px;
        height: 35px;
    }

    .social-item {
        width: 35px;
        height: 35px;
    }

    .idk {
        display: block;
    }



}


/* Mobile */
@media (max-width: 960px) {

    footer {
        height: 300px;
    }


    .footer-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
                            "middle"
                            "left"
                            "right";
        justify-content: center;     
              
    }

    .footer-left,
    .footer-right {
        margin: 0 auto;
        padding: 10px;
    }

    .footer-right {
        margin-bottom: 30px;
    }



    .footer-logo {
        height: 23px;
    }

    .idk {
        display: none;
    }

}

.no {
    display: none;
}


.rolunk {
    margin-top: 50px;
}