/* Import Google Fonts: Inter & Bebas Neue */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html {
    scroll-behavior: smooth;
}

/* Define body properties: */
body{
    background-color: #121417;
    margin: 0;
    padding: 0;
}

/* Define header and link properties: */
h1, h2, h3, h4, h5, h6{
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
    font-weight: 1000;
    letter-spacing: 0.1rem;
    color: #FFFFFF;
}   

/* Define paragraph properties: */

p, ul, ul li, li, text, label{
    font-family: 'Inter';
    font-size: 1.35rem;
    font-weight: 100;
    letter-spacing: 0.1rem;
    color: #E8EAED;
    padding: 0;
}

/* Define anchor and 'Button' properties: */
a{
    font-family: 'Inter';
    font-size: 1.35rem;
    color: #FF5C34;
    text-decoration: underline;
    transition: 0.2s;
    font-weight: 800;
}

a:hover{
    color: #E8EAED;
    text-decoration-color: #FF5C34;
    transition: 0.2s;
}




/* Define desktop and mobile nav properties: */
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 0 5% 0;
    padding: 0.1% 1%;

    background-color: #232629;
    border-bottom: 0.1rem solid #3C4043;
}

nav ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

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

nav a{
    color: #FF5C34;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

nav a:hover{
    transition: 0.2s;
    color: #E8EAED;
    text-decoration: underline;
}

.font-awesome-nav-icons{
    margin-right: 5px;
}





/* Define UX features: Scroll to the Top Properties Button:*/
#scrollToTheTopButton {
    position: fixed;
    bottom: 3%;
    right: 1.5%;

    background-color: #FF5C34;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
    text-align: center;
    font-weight: 100;
    color: #FFFFFF;
    padding: 0.3% 0.7%;
    border: none;
    border-radius: 10%;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.1s ease; /* Adds fade effect */
  }
  

  #scrollToTheTopButton:hover {
    background-color: #FF8A65;
    transition: opacity 0.1s ease; /* Adds fade effect */
  }

















.text-underline{
    text-decoration: underline;
}

.nav_mobile{
    display: flex;
    width: 100%;
    justify-content: right;
}

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

.nav_mobile_direction_alignment a{
    color: black;
}

















.latest_release{
    padding: 100px;
}

.latest_release div{
    display: flex;
    align-items: center;

}

.latest_release div h1{
    padding-left: 5px;
}

.song_box{
    display: flex;
    justify-content: space-between;
}



table { 
    border-collapse: collapse; 
}


table{
    width: 100%;
    text-align: left;
    border-spacing: 150px 50px;
}



table a{
    font-family: 'Monokoni';
    font-size: 16px;
    text-decoration: none;
    color: black;
}

tr {
    border-bottom: 1px solid black;
  }

  th{
    padding: 15px;
  }

  td{
    padding: 15px;
  }






.center-card{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 0%;
}


.put-a-bit-margin{
    margin-top: 100px;
    margin-bottom: 100px;
}

.card{
    padding: 1%;
    width: 100%;
    border-bottom: 1px dashed #5e6678;
    margin-bottom: 8%;
}

.video_itself{
    position: relative;
}

.card_features{
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
}

.card_features-complete_music_packs{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 2%;
}

.card_download{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #232629;
    border: 2px solid #232629;
    border-radius: 2.5;
    margin-top: 5%;
}

.card_download a{
    text-align: center;
    width: 100%;
    padding: 2%;
    padding-top: 4%;
    background-color: #232629;
    transition: 0.2s;
}

.card_download button:hover{
    background-color: #3C4043;
    transition: 0.2s;
}
















.card_features_ipv{
    margin-top: 5%;
}




#filters{
    margin-top: 10%;
    margin-bottom: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.for-border-bottom{
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
 width:50%;
 border-bottom: 1px solid #3C4043;

}

.for_border_bottom_boxes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.for_border_bottom_boxes label{
font-family: "Josefin Sans", sans-serif;
margin-bottom: 7.5px;
}



.bandcamp-single-song-example{

    border: 0;
    width: 350px;
    height: 300px;
    max-width: 100%;
}

.bandcamp-album-example{

    border: 0;
    width: 100%;
    height: 472px;
    max-width: 100%;
}






.faq-question-answer-container{
    border-bottom: 2px solid #223030;
    margin-bottom: 8%;
}




/*
Album Content Lists, For Example Song Titles:

A New Day Begins (General Background Music)
A New Farm On The Outskirts (General Background Music)
Undiscovered Parts Of The Town (Discovery Theme)
and so on:
*/

.album_content{
margin: 10% 0%;
}

.album_content ul{
list-style: numbered;
}

.album_content ul li{
    margin-top: 0.25%;
}

#filters select{

    padding-right: 20%;
}

div label{
    font-family: 'Monokoni';
}

#wish{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
}

#wish h1{
        font-size: 1.25rem;
}

#wish a{
    color: #FF5C34;
}



@media only screen and (max-width: 1591px){
    .for-border-bottom{
     width:80%;
    }
}

@media only screen and (max-width: 1280px){
    .center-card{
        margin-left: 10%;
        margin-right: 10%;
    }

    .hamburger_on_off_switcher{
        display: inline-block !important;
        cursor: pointer;
    }

    .nav_desktop{
        display: none;
    }

}







@media only screen and (max-width: 990px) {

    .center-card{
        padding: 0;
        margin: 1%;
    }


    .for-border-bottom{
    flex-direction: column;
     width:90%;
    }

    .for_border_bottom_boxes{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 1%;
    }

    .card_download{
        margin-top: 8%;
    justify-content: center;
}






    



/*     nav div{
        display: none;
    }

    nav{
        display: flex;
        justify-content: center;
    } */


    .card{

        width: 90%;

    }

    #filters{
        margin: 0;
        background-color: #dbd3d6;
    }

  }


@media only screen and (max-width: 500px){
    
    .video_itself{
        margin-top: 5%;
    }
    
    .card_features{
        display: none;
    }



    .card_features-complete_music_packs{
        justify-content: center;
        align-items: center;
        text-align: center;
    }



    .album_content{
        margin-top: 25%;
    }


    .center-card{
        margin-left: 0%;
        margin-right: 0%;
    }


    .center-card p{
        margin-bottom: 1%;
    }


}






#suitable-for{
    color: #efefe9;
    background-color: #232629;
    border-color: #223030;
    padding: 0.50%;
}   



/* REMOVE FROM HTML FILES AS WELL */
.additional_subtitles{
    font-size: 1.1rem !important;

}



.lists{
    margin-top: 3%;
    margin-bottom: 5%;
}

.lists ul li{
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}


.post_section_seperator{
    border-top: 5px dashed  #3C4043;
    margin-top: 8%;
    margin-bottom: 4%;
    width: 100%;
    background-color: #3C4043;
    border-radius: 5px;
}


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



.center-card_for_kare_image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 15%;
    margin-right: 15%;
}



.popup-img {
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.5s ease-in-out;
    opacity: 0; /* Start hidden */
}

.popup-img.loaded {
    opacity: 1;
}








.enlarged {
    transform: scale(2);
  }


.image_description{
    text-align: center;
    font-size: 0.85rem;
}




/* ------ Tutorials Main Page Only------ */

.post_category_header{
    text-align: center;
    border-bottom: 1px dotted #5e6678;
}


.top_page_hint{
    font-family: 'Inter', sans-serif;
    margin-bottom: 5%;
}

#blender_tutorials:hover{
    background-color: #ea75008e;
    cursor: pointer;
    transition-duration: 0.3s;
}

#unreal_engine_tutorials:hover{
    background-color: #2c4d597c;
    cursor: pointer;
    transition-duration: 0.3s;
}

#photoshop_tutorials:hover{
    background-color: #31a9ffd7;
    cursor: pointer;
    transition-duration: 0.3s;
}

#substance_designer_tutorials:hover{
        background-color: #587494a4;
    cursor: pointer;
    transition-duration: 0.3s;
}

#other_gamedev_related_matters:hover{
        background-color: #d4ae65;
    cursor: pointer;
    transition-duration: 0.3s;
}

#gaming_related_posts_and_misc:hover{
    background-color: #a62a2a88;
    cursor: pointer;
    transition-duration: 0.3s;
}








.blender_sub_categories{
    display: none;
}

.unreal_engine_categories {
    display: none;
}

.photoshop_sub_categories{
        display: none;
}

.substance_designer_tutorials{
    display: none;
}

.other_gamedev_related_matters{
    display: none;
}

.gaming_related_posts_and_misc{
    display: none
}





/* 16.01.2026 */

.bandcamp-preview-container-with-text{

    width: 100%;
    margin-bottom: 5%;
}

.bandcamp-preview-container-with-text div{
    width: 100%;
    padding: 0 2.5% 2.5% 2.5%;
}




.four-album-container{
    display: flex;
    margin-bottom: 125px;
         flex-direction: row;
/*     background-color: red;   */  
}

.invidiual-albums{
    width: 100%;
    margin: 1.5%;
}

#filters-for-complete-music-packs{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}







@media only screen and (max-width: 1280px){
    .four-album-container{
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 5%;
    }

    .invidiual-albums{
        margin-bottom: 15%;
    }


}










/* Ensure the link doesn't have default blue/underlined styling */
.texture_link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.texture_title {
    margin: 10px 0 5px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.texture_description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}




.stylized-texture-description-area{
    margin: 5% 0 0 0;
}



.texture-description-area-image-on-the-left-side{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 4%;
}

.texture-description-area-image-on-the-left-side img{
    width: 40%;
    border-radius: 3%;
}

.texture-description-area-image-on-the-left-side-description-box{
    width: 20%;
    margin-top: 1%;
    margin-left: 2%;
}



.texture-description-area-image-on-the-right-side{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 4%;
    margin-top: 10%;
}

.texture-description-area-image-on-the-right-side img{
    width: 30%;
    border-radius: 3%;
}

.texture-description-area-image-on-the-right-side-description-box{
    width: 20%;
    margin-top: 1%;
    margin-right: 2%;
}

.textures-contact-link{
    text-decoration: underline;
    color: #649b92;
    font-weight: 1000;
}



.similar-texture-pack-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5%;
    
    
}

.similar-texture-pack-card-content{
    display: flex;
}

.similar-texture-pack-card-content img{
    width: 25%;
    border-radius: 5%;
        transition: 0.3s;
}

.similar-texture-pack-card-content p{
    width: 25%;
    margin-left: 5%;
    font-size: 1.2rem;

}


.similar-texture-pack-card h5{
    font-size: 1.6rem;
}

/* 1. Target the image specifically when the parent content is hovered */
.similar-texture-pack-card-content:hover img {
    border-radius: 0%;
}

/* 2. Update the image styles to include a transition for smoothness */
.similar-texture-pack-card-content img {
    width: 25%;
    border-radius: 5%;
    /* Add this so the change isn't instant */
    transition: border-radius 0.3s ease; 
}

/* 3. Existing container hover (optional) */
.similar-texture-pack-card-content:hover {
        transition: 0.5s;
    background-color: #c5ccc3;

}






























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

.center{
    display: flex;
    justify-content: center;
    margin: 7.5% 0 7.5% 0%;
}

.license_card{
    padding: 1%;
    width: 40%;
    border-radius: 1px;
}


.license_card p{
    color: #E8EAED;
    transition: 0.2s;
    margin: 2% 0 2% 0;
}

.license_card ul{
    padding: 1% 0 1% 4%;
}

.license_card ul li{
    font-size: 1.1rem;
    margin: 1% 0 1% 0;
}

.contact-information-card{
    display: flex;
    justify-content: flex-end;
    padding: 1% 0 5% 0;
    margin-bottom: 12%;
}


#license-rights li{
    margin-top: 3%;
}


/* Footer  */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232629;
    border-top: 2px solid #3C4043;
    padding: 1% 5%;
}

footer a, footer ul, footer ul li, footer ul a{
    font-size: 1em;
}


footer ul {
    display: flex;
    flex-direction: column;
}

footer ul li{
    list-style-type: none;
    margin-bottom: 5%;
}








.hamburger_on_off_switcher {
      color: #FF5C34;
}

#mobile-only-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: none;
}

#mobile-only-nav ul li{
    margin-bottom: 5%;
}




/* Hide the toggle button by default on desktop */
#menu-toggle {
    display: none;
}

/* Show the toggle button and handle mobile nav on smaller screens */
@media (max-width: 768px) {
    #menu-toggle {
        display: block; 
    }
}


body {
    padding: 0 !important;
    margin: 0 !important;
}





/* Media Queries */




/* Desktop Styles */
@media (min-width: 769px) {
    .hamburger_on_off_switcher {
        display: none !important; /* Hide the icon on desktop */
    }
}



/* Mobile Styles: */

@media (max-width: 1749px) {
    .hamburger_on_off_switcher {
    display: block !important; /* Ensure the icon is visible on mobile */
    cursor: pointer;
    }

    .license_card{
    width: 80% !important;
    }

    nav {
    padding: 1%;
    }

    nav ul{display: none;}
}

@media (max-width: 500px){
    .album-detailed-description-area{
        margin-top: 7.5%;
    }

    .bandcamp-preview-container-with-text{
        margin-bottom: 10%;
    }
}










.active{
    display: flex !important;
    justify-content: flex-end !important;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-right: 100%;
}



@media (max-width: 1279px){
    footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #go_back{
        margin-bottom: 15%;
    }

       #goBackHome{
        margin-bottom: 15%;
        }
} 



.invidiual-albums a{
    color: #FF5C34;
    transition: 0.2;
}

.invidiual-albums a:hover{
    color: #FF8A65;
        transition: 0.2;
}

.invidiual-albums h4{
    color: #9AA0A6;
    font-size: 1rem;
    opacity: 0.5;
}

.album-detailed-description-area h1{
    padding: 0;
    margin: 0;
}

.album-detailed-description-area ul {
    padding: 0;
    margin: 0;
}

.album-detailed-description-area ul li{
    list-style-type: none;
    margin-top: 2.5%;
}


















/* 19.01.2026 */

.bandcamp-preview-container-with-text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 2%;
    border-radius: 0.25%;
    background-color: #23262956;

    box-shadow: 10px 10px 12px -5px rgba(35,38,41,0.35);
-webkit-box-shadow: 10px 10px 12px -5px rgba(35,38,41,0.35);
-moz-box-shadow: 10px 10px 12px -5px rgba(35,38,41,0.35);

}

/* Remove padding and marging properties from "A New Day’s Hurry" type of headings */
.bandcamp-preview-container-with-text div h2{
    margin: 0;
    padding: 0;
}

.faq-container{
    margin-top: 5%;
}