@font-face {
    font-family: 'Hitch_Hike';
    src: url('/assets/fonts/UrbanSlick.eot');
    src: url('/assets/fonts/UrbanSlick.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/UrbanSlick.woff2') format('woff2'),
        url('assets/fonts/UrbanSlick.woff') format('woff'),
        url('assets/fonts/HitchHike.ttf') format('truetype'),
        url('/assets/fonts/UrbanSlick.svg#Urban&Slick') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monokoni';
    src: url('/assets/fonts/UrbanSlick.eot');
    src: url('/assets/fonts/UrbanSlick.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/UrbanSlick.woff2') format('woff2'),
        url('assets/fonts/Monokoni/mononoki-Regular.woff') format('woff'),
        url('assets/fonts/Monokoni/mononoki-Regular.ttf') format('truetype'),
        url('/assets/fonts/UrbanSlick.svg#Urban&Slick') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/*
font-family: 'Monokoni';
font-family: 'Hitch_Hike';
font-family: 'Inter', sans-serif;
*/

html {
    scroll-behavior: smooth;
  }
  



body{
    background-color: #fffcfc;
    background-image: url("/assets/img/test.jpg");
}

#home_page_prompt{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#home_page_prompt h1{
    font-size: 3.2em;
}

button{
    font-family: 'Inter', sans-serif;

}

#home_page_prompt a{
    text-decoration: none;
    color: black;
}

#home_page_prompt p{
    font-family: 'Monokoni';
}



h1{
    font-family: 'Hitch_Hike';
    font-size: 2em;
}


nav{
    display: flex;
    justify-content: space-between;
    padding-left: 22px;
    padding-right: 22px;
}

nav div{
    display: flex;
    align-items: center;
}

.hamburger_on_off_switcher{
    display: none !important;
}

.nav_right{
    padding-right: 15px;
}

nav h1 a{
    color: black;
    
}

.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{
    font-family: 'Monokoni';
    font-size: 16px;
    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 h1{
    font-family: 'Monokoni';
    font-size: 16px;
}

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%;
}


.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 h1{
    font-family: 'Monokoni';
    font-size: 16px;
}

.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: flex-end;
    margin-top: 2%;

}

.card h1 a{
    color: #009192;
    text-decoration: none;
}

.card a{
    color: #009192;
}

.card ul li a{
    color: #009192;
}

.card ul li a:visited{
    color: #009192;
}



/* Individual_pages_only */


.description_ip p{
    font-family: 'Inter', sans-serif;
    margin-bottom: 2%;
}


.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 dotted #5e6678;
}

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



.album_content{
    margin-top: 10%;
}

.album_content ul li{
    font-family: 'Inter', sans-serif;
    margin-top: 12px;
    margin-bottom: 12px;
}


#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-family: 'Monokoni';
        font-size: 1.25rem;
}

#wish a{
    color: #009192;
}



@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) {
    .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%;
    }



    



/*     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_download{
        justify-content: center;
    }



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


    .description_ip{
        margin-bottom: 25%;
    }

    .album_content{
        margin-top: 25%;
    }


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


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


}








/* ------Textures/html only------ */














.texture_triple_container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}


.texture_container{
    padding: 1%;
}

.texture_container img{
    width:300px;
}























@media only screen and (max-width: 1600px) {
    .texture_container img{
        width:280px;
    }
}


@media only screen and (max-width: 1366px) {
    .texture_container img{
        width:250px;
    }
}


@media only screen and (max-width: 1024px) {
    .texture_container img{
        width:240px;
    }
}

@media only screen and (max-width: 800px) {
    .texture_triple_container{
        flex-direction: column;
    }

    .album_content {
        margin-bottom: 15%;
    }
}






















/* ------ Tutorial Posts Only------ */

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

.lists ul{
    padding: 0%;
    margin: 0;
}

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



#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 20px 15px 20px;
    background-color: black;
    font-family: 'Monokoni';
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
   transition: opacity 0.5s ease; /* Adds fade effect */
  }
  
  #scrollToTopBtn:hover {
    background-color: #009192;
  }






#main_post_title{
    font-size: 1.1rem;
    margin-bottom: 2.5%;
}

.additional_subtitles{
    font-size: 1.1rem !important;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}



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

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


.post_section_seperator{
    border-bottom: 1px dashed #5e6678;
    margin-top: 10%;
    margin-bottom: 5%;
}

    


.big_image_wrapper_for_margins{
    margin-top: 5%;
    margin-bottom: 5%;
}


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

.image_container_small{
    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_if_neccessary{
    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
}