:root{
    /* this has to be set to switch between light or dark */
    color-scheme: light dark;


    --gladiatorus-dark-grey-1: #101010;
    --gladiatorus-medium-grey-1: #171717;
    --gladiatorus-medium-grey-weak: #1b1b1b;
    
    /* --afk-red: #9c362b; */
    --afk-red: #e80000;
    --afk-soft-grey: #252525;
    --afk-dark-grey: #1a1a1a;
    --afk-dark-grey-2: #181818;
    --afk-dark-grey-3: #0e0e0e;

    --afk-soft-white: #ececec;
    --afk-gentle-white: #cecece;
    
    /* V3 Colors */
    --afk-smn-border-color-dark: #f6f6f62b;
    --afk-smn-border-color-light: #0000002b;

    --afk-smn-border-color-dark: #f6f6f617;
    --afk-smn-border-color-light: #00000017;
    
    --afk-smm-search-light-background: #f5f5f5;
}
body{
    overflow-x: hidden;

    /* display: flex; */
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;

    text-align: -webkit-center;
    background-color: var(--afk-gentle-white);

    /* DARKMODE */
    color: lightgrey;
    /* background-color: var(--afk-dark-grey-2); */
    background-color: var(--afk-dark-grey);
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));
}
body div{
    transition-duration: 0.2s;
}
a{
    text-decoration: none;
    color: light-dark(var(--afk-dark-grey),var(--afk-soft-white));
    font-size: 0.75rem;
    opacity: 0.9;
    transition-duration: 0.2s;
}
a:hover{
    opacity: 1;
    color: var(--afk-red);
}


/* FONT CLASSES */
.carlito-regular {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .carlito-bold {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .carlito-regular-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .carlito-bold-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
/* */  


.afk-studio-main-window{
    position: absolute;
    top: 0px;
    /* left: 300px; */
    padding-left: 300px;
    /* height: 100%; */
    /* width: 100%; */
    
    padding-left: 0px; /* same as main-navbar-width*/
    color: var(--afk-dark-grey);
    background-color: var(--afk-gentle-white);
}
.afk-studio-main-window {
    position: absolute;
    top: 0px;
    padding-left: 100px;
    color: var(--afk-dark-grey);
    /* background-color: var(--afk-gentle-white); */
    background-color: var(--afk-soft-white); /* We make it a bit lighter to increase percieved contrast and "floating space"*/
    /* background-color: #070707;
    background-color: #a7a7a7; */

    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));


    width: 100%; /* Default width for regular desktop */

    contain: content;
    scroll-snap-type: y mandatory;

    /* Media query for mobile devices */
    /* @media (max-width: 767px) {
        width: calc(100% + 25px);
    } */
}
.afk-smn-container-minimized .afk-studio-main-window{
    /* padding-left: 100px; */
    opacity: 0.2;
    background-color: var(--gladiatorus-dark-grey-1);
}

.afk-studio-content{
    min-height: 85vh;
    scroll-snap-type: y mandatory;
}


/**   SCROLLBAR   **/
::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(255, 0, 0, 0.3); */
	background-color: none;
    stroke: 1px solid var(--afk-red);
    border-radius: 5px;
}


::-webkit-scrollbar
{
	width: 12px;
	background-color: none;
    stroke: 1px solid white;
    border-left: 1px solid var(--afk-red);
    border-radius: 0px;
    border-top: 1px solid var(--afk-red);
    border-bottom: 1px solid var(--afk-red);
}

::-webkit-scrollbar-thumb
{
	background-color: var(--afk-dark-grey-2);
	border: none;
    border-radius: 0 0px 0px 0;
}

/**  SCROLLBAR  ^^ **/




.h2{
    color: #d6d6d6;
}



.afk-studio-main-footer{
    background-color: var(--gladiatorus-dark-grey-1);
    color: white;
    padding-bottom: 150px;
}


/*   STANDARD WEB COMPONENTS  */
ul {
    list-style-type: disc;
    margin-left: 20px;
}

li {
    margin-bottom: 10px;
}

.info-list-container{
    width: 300px;
}
/*   STANDARD WEB COMPONENTS  ^^ */

/*   NOTIFCATION DESIGN   */

/*   NOTIFCATION DESIGN ^^ */


/*

    -------------------------------------------------
    -----                                       -----
    ---                 F O R M                   ---
    -----                                       -----
    _________________________________________________

*/
.form-outer-container-since-css-is-wierd{
    height: -webkit-fill-available;
}
.form-container{
    /* background-color: #ffffff0d;
    background-color: #0000004f; *//*Darker more black transparent*/  
    background-color: #ffffffbf;
    background-color: light-dark(#ffffffbf, #101010ff);
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0px #00000012;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    width: auto;

    

    /* FLEX INFO */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.form-header{
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.form-footer{
    margin-top: 20px;
}

form{
    padding: 10px;
    /* background-color: white; */
    width: 100%;
    /* border-radius: 5px; */
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    padding-top: 30px;
    padding-bottom: 30px;
    
    /* FLEX INFO */
    display: flex;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    align-content: center;
}
.form-control{
    border: 1px solid light-dark(#9898982b,var(--afk-smn-border-color-dark));
    background-color: light-dark(#fff, var(--afk-dark-grey-3));

}
.form-control:focus{
    background-color: var(--afk-dark-grey-3);
    background-color: light-dark(#fff, var(--afk-dark-grey));
}
.form-text{
    background-color: rgba(115, 115, 115, 0.03);
    border-radius: 5px;
    padding: 2px;
    margin: 6px;
}

label{
    transform: translateY(5px) scale(0.8);
    opacity: 0.6;
}
/****__ FORM __****/




/***
######################################################
------------------------------------------------------
-----                                            -----
---        A F K     B R E A D C R U M B           ---
-----                                            -----
------------------------------------------------------
######################################################
***/

.breadcrumb-item::before{
    color: var(--afk-red) !important;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0.5rem;
    font-size: 0.75rem;
    margin-top: 5px;
    }


    .breadcrumb li, .breadcrumb-item{
        color: rgb(212, 212, 212);
    }


/**** WELCOME  ****/
.afk-studio-main-focus-logo-img{
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;

    width: 150px;
    height: 150px;
}

.afk-studio-main-focus-logo-sub-title{
    margin-top: 20px;
    font-size: 12px;
    color: var(--afk-dark-grey);
    text-transform: uppercase;
    font-style: italic;
}
.designed-by-sub-title{
    margin-top: 20px;
    font-size: 10px;
    color: var(--afk-dark-grey);
    text-transform: uppercase;
    /* font-style: italic; */
}

/**** JUMBOTRON  ****/
.afk-studio-main-focus-logo-img .app{
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 5px 6px 0px #0000007f;
    object-fit: contain;
}
.app-icon{
    /* width: 100px;
    height: 100px; */
    object-fit: contain;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 5px 6px 0px #0000007f;
}





.matrix-p{
    min-width: 13px;
    animation-duration: 0.4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: translateX(0%);
    transition-duration: 0.4s;
}
/* ANIMATIONS  */
@keyframes character_lock_in{
    0%{
        transform: translateX(-100%);
        color: red;
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        /* color: white; */
    }
}


.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}


.fade-in.fade-in-visible {
    opacity: 1;
}






.afk-show-header{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.afk-show-header-text-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 19;
}

.afk-image-outer-border{
    border-radius: 20px;
    border: 4px solid light-dark(var(--afk-dark-grey), var(--afk-soft-white));
    flex-shrink: 5;
    transform: translate(100px, 0px);
    transform: translate(100px, 0px) scale(2);
}

@media screen and (max-width: 767px) {
    .afk-image-outer-border{
        transform: translate(100px, 0px);
        transform: translate(100px, 0px) scale(2);
    }
    
}

.afk-image-container{
    border-radius: 12px;
    margin: 10px;
    contain: content;
    width: 300px;
    box-shadow: -1px 3px 7px 0px #000000b0;
}

.afk-image-container img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/*
######################################################
------------------------------------------------------
-----                                            -----
---        A F K     C O O K I E     B A R         ---
-----                                            -----
------------------------------------------------------
######################################################
*/
.cookie-bar{
    position: fixed;
z-index: 1000;
width: calc(100% - 100px);
transform: translateX(100px);
height: auto;
background-color: light-dark(#ffffff, var(--afk-dark-grey));
color: var(--afk-gentle-white);
color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));
padding: 20px;
bottom: 0px;
/* opacity: 0.97; */
/* -webkit-box-shadow: 0px 0px 4px 0px rgba(23, 23, 23, 0.22); */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid var(--afk-smn-border-color-light);
    
}

@media screen and (max-width: 767px) {
    .cookie-bar{
        width: calc(100% - 50px);
        transform: translateX(50px);
    }
    
}




/*
------------------------------------------------------
-----                                            -----
---            C A R D     S T Y L I N G           ---
-----                                            -----
------------------------------------------------------
*/
.card{
    background-color: light-dark(#fff, rgba(0, 0, 0, 0.07));
}



/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K     S E C T I O N    S T Y L E S      ---
-----                                            -----
------------------------------------------------------
######################################################
*/

section{
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));

    /* FLEX INFO */

    padding-right: 100px;
    padding-left: 100px;

    min-height: 100vh;

    
    scroll-snap-align: start;

}

@media screen and (max-width: 767px) {
    section{
        padding-right: 0px;
        padding-left: 0px;
    }
    
}

@media screen and (max-width: 1376px) {
    section{
        padding-right: 50px;
        padding-left: 50px;
    }
    
}




/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K           P - E L E M E N T           ---
-----                                            -----
------------------------------------------------------
######################################################
*/
p{
    color: rgb(92, 92, 92);
}