@font-face {
    font-family: 'IBMPlexSans';
    font-weight: 300;
    src: url('./fonts/IBMPlexSans/IBMPlexSans-ExtraLight.ttf');
}

@font-face {
    font-family: 'Orbitron-regular';
    src: url('./fonts/Orbitron/static/Orbitron-Regular.ttf');
}

@font-face {
    font-family: 'Orbitron-SemiBold';
    src: url('./fonts/Orbitron/static/Orbitron-SemiBold.ttf');
}

@font-face {
    font-family: 'Orbitron-Bold';
    src: url('./fonts/Orbitron/static/Orbitron-Bold.ttf');
}


:root {
    --cream: #FFFDE7;
    --blue: #002198;
    --grey: #B2B2B2;
    --greyAM: #a3a3a3;
}

/* ==== Text Selection ==== */

::selection {
  background-color: rgb(0, 0, 0);
  color: #ffffff;
}

/* ==== Text Selection ==== */

/* ==== MAIN ==== */

body {
	margin: 0;
	padding:0;
	background-color: #000;
	overflow-y:hidden;
	height:100%;
	width: 100%;
	height: 100vh;
	width:100vw;
	overflow: hidden;

	cursor: default;
    
    scrollbar-color: var(--cream) var(--blue);
    scrollbar-width: thin;
    -webkit-font-smoothing: antialiased;
}

/* 
    ADD Scroll on WORK PAGE 
	overflow-x: hidden;

*/

.page {
    position: relative;
    padding:0px;
    margin: 0px;

    min-height: 100vh;
    min-width: 100vw;
    padding:0px;
    margin: 0px;
    
    /*from WORK PAGE*/  
    overflow: hidden;
}

/* ==== overlayButton ==== */
#overlay {
    position: absolute;
    font-size: 16px;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding:0px;
    margin:0px;

    /*     
    background: rgb(149, 156, 247);
    background: radial-gradient(circle, rgb(141 255 0 / 20%) 0%, rgb(0 8 255 / 22%) 30%, rgba(19, 3, 37, 0.4) 100%); */
    
    /* overflow: hidden; */
    
    /* justify-content:center;
    align-items:center; */
}

.overlayPercentVert {
    display: grid!important;
    height: 100%;
    grid-template-rows: 10fr 1fr 8fr!important;

}

.overlayPercentHoriz{
    display: grid!important;
    width: 100%;
    grid-template-columns: 15fr 1fr 15fr!important;

}
.purcentLoaded{
    font-family: 'Orbitron-regular';
    font-size: clamp(9px, .6vw, 15px);
    color: var(--grey);
}



/* ==== text indication animation ==== */

/* ==== menu ==== */
#overlayMenu {
    position: absolute;
    font-size: 16px;
    z-index: 12;
    width: 100%;
    height: 40%;
    padding:0px;
    margin:0px;
    /* border: 1px solid #7b11ff; */
    display: grid!important;
    grid-template-columns: 1fr 4fr 1fr!important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}

.menu {
    
    width: 100%;
    height: 100%;
    display: flex;
}

.iconMenu {

    position: relative;
    top: 0px;
    left: 0px;
    max-height:64px;
    max-width:64px;

    height:42px;
    border: 1px solid #7b11ff;
    font-size: 10vw;
    background: rgba(0, 0, 0, 0.1);
    color:rgb(255, 255, 255);
    text-align: center;
    cursor: pointer;

}

.showMenu {
    visibility: visible !important;
    z-index: 15;

}

.smallMenu {
    height:42px !important;

}

.menuList{
    
    visibility: hidden;
    /* align-items: center; */
    
    width: 100%;
    height: 100%;
    display: flex;
    /* border: 1px solid #7b11ff; */
    justify-content: center;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden/* background-image: linear-gradient(-8deg, rgba(215, 255, 203, 0.1) 10%, rgba(21, 255, 0, 0.01), rgba(34, 255, 159, 0.06) 40%); */;
}

.horizontalGrid {
    top: 0%;
    bottom: 0%;
    left: 0px;
    right: 0px;
    height: 100%;
    display: grid;
    /* grid-gap: 1px; */
    /* grid-template-columns: 14fr 1fr 14fr; */
    /* border: 1px solid #00ff00; */
    z-index: 10;
    place-items: center;
    /* backdrop-filter: blur( 3px ); */
    /* -webkit-backdrop-filter: blur( 3px ); */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    
    /* backdrop-filter: blur( 2px ); */
}
.aNameContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
    backdrop-filter: blur( 3px );
    -webkit-backdrop-filter: blur( 3px );
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    z-index: 20;
}

.textSelectionMenu {
    
    font-family: 'Orbitron-SemiBold';
    font-size: clamp(10px, 6vw, 30px);
    color: var(--blue);
    
}

/* ==== menu ==== */


.indicationsSwitch{
    position: absolute;
    bottom:20%;
    font-size: 1vw;
    border: 1px solid #2f2f2f42;
    padding: 2px;
    
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, 0%);
    
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

}

.landscapeTxtMobile{
    
    bottom:40% !important;
}

.textSwitch {

    text-transform: uppercase;
    font-family: 'Orbitron-SemiBold';
    position: relative;
    padding:0;margin: 0;
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center items horizontally */


    color: var(--grey);
    text-align: center;
    bottom:20%;
    font-size: clamp(1.3vw, 14px, 25px);

    -webkit-transition: all  .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s;

    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */


}

.textSwitch, .textSwitch::after {
    
    font-family: 'Orbitron-SemiBold';
}
.hiddenKeyPress {
    visibility : hidden;
}

.showcaseKeyPress {
    visibility: visible;
}
    
/* ==== text indication animation ==== */




/* ==== Work Page ==== */

.workList{
    
    visibility: visible;
    align-items: left;
    
    overflow-x: hidden;
    overflow-y: scroll;
    
    top: 10%;
    width: 100%;
    height: 80%;
    min-height: 40%;
    max-height: 70svh;
    border: 1px solid var(--blue);
    /* color:var(--blue); */
    background-color: var(--cream);
    justify-content: center;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;



    
    overflow: auto;
    padding-right: 15px;

    
    /* overflow: hidden */
    /* background-image: linear-gradient(-8deg, rgba(215, 255, 203, 0.1) 10%, rgba(21, 255, 0, 0.01), rgba(34, 255, 159, 0.06) 40%); */;
}

.titleProjects {
    
    font-family: 'Orbitron-Bold';
    font-size: clamp(60px, 8vw, 90px);
    /* color: var(--blue); */


    /* to match with the hero image */
    
    color: var(--cream);
    mix-blend-mode: difference;
    margin-top: -120px;
    z-index: 9 !important;
    position: relative;
}



.listProjects {
    
    font-family: 'Orbitron-SemiBold';
    font-size: clamp(25px, 4vw, 25px);
    color: #0037ff;
    position: relative;
    z-index: 10;
}

.listProjectsSelected {
    
    font-family: 'Orbitron-Bold';
    font-size: clamp(30px, 4vw, 20px);
    color: var(--blue);
    position: relative;
    z-index: 10;
}

.titleProjectsWP{
    
    font-family: 'Orbitron-Bold';
    font-size: clamp(60px, 8vw, 90px);
    color: var(--blue);
    margin-bottom: 0;

    position: relative;
    z-index: 10;
}

.titleProjWPLandscape{
    
    margin-top: 30px !important;
}

/* ==== Work Page ==== */

/* ==== About Me Page ==== */

.aboutMe {

    position: absolute;
    border: 1px solid #ff0000;
    width: 30%;
    height: 25%;
    align-items: left;
    /* z-index: 11; */

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


    mix-blend-mode: difference;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
    
    overflow-x: hidden;
    overflow-y: auto;

}

.aboutMeMobile{
    position: absolute;
    border: 1px solid #ff0000;
    width: 40%;
    height: 30%;
    align-items: left;
    z-index: 11;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
    
    overflow-x: hidden;
    overflow-y: auto;

}

.invertedTextAbtMe{
    
    background: rgba(255,255,255,0);
    -webkit-filter: invert(100%);
    filter: invert(100%);

}

.titleAboutMe {

    
    font-family: 'Orbitron-Bold';
    font-size: clamp(30px, 6vh, 40px);
    color: var(--greyAM);
    padding:0%;
    margin: auto;
    margin-top: 6px;
    margin-left: 6px;
    
}


.titleAboutMeMobile {

    
    font-family: 'Orbitron-Bold';
    font-size: clamp(14px, 3vh, 20px);
    color: var(--greyAM);
    padding:0%;
    margin: auto;
    margin-top: 6px;
    margin-left: 6px;
    
}

.descriptionAboutMe {
    
    font-family: 'IBMPlexSans';
    font-size: clamp(14px, 1.5vh, 20px);
    color: var(--greyAM);
    margin: 3px;

}


.descriptionAboutMeMobile {
    
    font-family: 'IBMPlexSans';
    font-size: clamp(10px, 1.5vh, 15px);
    color: var(--greyAM);
    margin: 2px;

}

/* ==== About Me Page ==== */

/* ==== Footer ==== */

.bottomMenu {
    border-top: 1px solid #4f4f4f;
    padding: 1px;

    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    grid-template-rows: repeat(1, 25px);
    position: sticky;
    background-color: var(--cream);

    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    mix-blend-mode: difference;

    z-index: 10 !important;
    

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.bottomMenuMobile {
    border-top: 1px solid #4f4f4f;
    padding: 1px;

    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    grid-template-rows: repeat(1, 20px);
    position: sticky;
    background-color: var(--cream);

    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    mix-blend-mode: difference;

    z-index: 10 !important;
    

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.footerCenter{
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 4fr 2fr 4fr;
    grid-template-rows: repeat(1, 100%);

}
.centerMenu {
    /* border: 1px solid rgb(77, 255, 0); */

    display: grid;
    grid-gap: 1px;
    grid-template-columns: 2fr 4fr 2fr;
    grid-template-rows: repeat(1, 100%);
}

.centerMenuMobile {
    /* border: 1px solid rgb(77, 255, 0); */

    display: grid;
    grid-gap: 1px;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: repeat(1, 100%);
}

.footerRight{
    place-items: right;
    text-align:right;
    vertical-align: center;
    padding-top: .1px;
    padding-bottom: .1px;
    /* border: 1px solid rgb(0, 145, 255); */

}

.footerLeft{
    
    display: grid;
    grid-gap: 1px;
    padding: .1vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 6fr;
    grid-template-rows: repeat(1, 20px);

    place-items: left;
    text-align:left;
    vertical-align: center;
    /* border: 1px solid rgb(0, 123, 255); */
}

.footerLeftMobile{
    
    display: grid;
    grid-gap: 3px;
    padding: 1;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
    grid-template-rows: repeat(1, 18px);
    place-items: left;
    text-align: left;
    vertical-align: center;
    /* border: 1px solid rgb(0, 123, 255); */
}

.center {
    margin: 1px;
    height: 100%;
    mix-blend-mode: difference;
}
.footer{

    /* border: 1px solid #595959; */
    place-items: center;

    
    width: 100%;
    height: 95%;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;

    mix-blend-mode: difference;

    -webkit-transition: all  .8s ease-out;
    -moz-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;
    transition: all .8s;
    

    z-index: 11 !important;
}

.bottomMenu:hover .centerMenu:hover .center:hover .footer:hover {
    /* mix-blend-mode: contrast; */

    mix-blend-mode: normal;
    /* background: #ff00ff; */
    /* backdrop-filter: hue-rotate(200deg) blur(16px); */
    
}
.centerIcon-Grid {
    /* border: 1px solid rgb(77, 255, 0); */

    /* overflow:hidden; */
    
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: repeat(1, 40px);
}

.svgLinks{
    height: 2vh;
    fill: var(--blue);
    cursor: pointer;
    height: 100%;
    padding-top:0;
    padding-bottom:0;

    

    -webkit-transition: all  .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s;


    /* border: 1px solid rgb(0, 0, 0); */
}
.svgLinks:hover{
    /* color: #1200fe; */
    color: var(--blue);
    transform: scale(1.04);

}
.svgLinks path{
    fill: var(--blue) !important;
  }
  
.svgLinks a:link,
.svgLinks a:visited {
    text-decoration: none;
    border: 0;
    color: var(--blue);
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

@media only screen and (min-width: 1783px) {
    p.customfontRights {
        font-family: 'Orbitron-SemiBold';
        /* font-size:.6vw; */
        font-size: 10px;
        /* border: 1px solid rgb(0, 123, 255); */
        
        margin-top: 1%;
        margin-bottom: 2%;
        margin-right: 2%;
    
        height: 18px;
        line-height: 18px;
        /* color: #a3a3a3; */
        color:var(--blue);
        text-align: right;
        text-transform: uppercase;
        vertical-align: center;
    
        -webkit-transition: all  .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    
    
    }
}
@media only screen and (min-width: 10px) and (max-width: 1784px) {

    p.customfontRights {
        font-family: 'Orbitron-SemiBold';
        /* font-size:.6vw; */
        font-size: 6px;
        /* border: 1px solid rgb(0, 123, 255); */
        
        margin-top: 2%;
        margin-bottom: 2%;
        margin-right: 2%;
    
        /* height: 18px;
        line-height: 18px; */
        /* color: #a3a3a3; */
        color:var(--blue);
        text-align: right;
        text-transform: uppercase;
        vertical-align: center;
    
        -webkit-transition: all  .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    
    
    }
}



p.customfontRights:hover{
    /* color: var(--cream); */
    /* transform: scale(1.01); */

}



/* Button Dark Mode */

.changeModeButton{
    font-family: 'Orbitron-SemiBold';
    font-size:.8vw;
    /* border: 1px solid rgb(0, 123, 255); */
    
    height: 100%;
    /* color: #a3a3a3; */
    color:var(--blue);
    background-color: #FFFDE7;
    /* text-align: center; */
    text-transform: uppercase;
    /* vertical-align: center; */

    -webkit-transition: all  .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s;

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

}

@media screen and (orientation: portrait) {

    .changeModeButtonMobile{
        font-family: 'Orbitron-SemiBold';
        font-size:1vw;
        /* border: 1px solid rgb(0, 123, 255); */
        
        height: 100%;
        /* color: #a3a3a3; */
        color:var(--blue);
        background-color: #FFFDE7;
        text-align: center;
        text-transform: uppercase;
        vertical-align: center;
    
        -webkit-transition: all  .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    
    }
    
    p.customfontRightsMobile {
        font-family: 'Orbitron-SemiBold';
        font-size: 5px;
        /* border: 1px solid rgb(0, 123, 255); */
        margin-top: .1px;
        margin-bottom: 0;
        margin-right: 2%;
        /* height: 50%; */
        /* color: #a3a3a3; */
        color: var(--blue);
        text-align: right;
        text-transform: uppercase;
        vertical-align: center;
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    }

    p.customfontRightsMobile:hover{
        /* color: #1200fe; */
        transform: scale(1.04);

    }
}

@media screen and (orientation: landscape) {

    .changeModeButtonMobile{
        font-family: 'Orbitron-SemiBold';
        font-size:1vw;
        /* border: 1px solid rgb(0, 123, 255); */
        
        height: 100%;
        /* color: #a3a3a3; */
        color:var(--blue);
        background-color: #FFFDE7;
        text-align: center;
        text-transform: uppercase;
        vertical-align: center;
    
        -webkit-transition: all  .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    
    }
    
    p.customfontRightsMobile {
        font-family: 'Orbitron-SemiBold';
        font-size: 5px;
        /* border: 1px solid rgb(0, 123, 255); */
        margin-top: 2.5%;
        margin-bottom: 2%;
        margin-right: 2%;
        /* height: 50%; */
        /* color: #a3a3a3; */
        color: var(--blue);
        text-align: right;
        text-transform: uppercase;
        vertical-align: center;
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s;
    }

    p.customfontRightsMobile:hover{
        /* color: #1200fe; */
        transform: scale(1.04);

    }

}

/* Dark Mode// Light Mode */
.lightMenu{
    background-color: var(--cream) !important;

}
.darkMenu{
    background-color: #000000 !important;

}
.lightScrollbar{
    scrollbar-color: var(--blue) #000000 !important;

}

.hiddenMenu {
    visibility: hidden;
}
/* ==== Footer ==== */

/* ==== SlideShowGlitch ==== */

.slideShowImages {

    
    position: relative;
    padding:0px;
    margin: 0px;

    min-height: 90%;
    min-height: 90%;
    min-width: 90%;
    width:90%;
    height:90%;

    
    /* min-height: 100%;
    min-height: 100%;
    min-width: 100%;
    width:100%;
    height:100%; */


    margin: 0 auto;
    
    overflow: hidden;
    border: 1px solid var(--blue);

}

/* ==== SlideShowGlitch ==== */

/* ==== Project Page ==== */


.pageProject {
    position: relative;
    padding:0px;
    margin: 0px;

    min-height: 100vh;
    min-height: 100%;
    min-width: 100vw;
    height:100%;
    padding:0px;
    margin: 0px;
	overflow-y:scroll;
    overflow-x:hidden;
    
}

.textProject {
    
    font-family: 'IBMPlexSans';
    font-size: clamp(19px, 2.3vh, 28px);
    color: var(--blue);
    /* margin: 3px; */
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    min-width: 60%;
    width: 60%;

}

.textCreditsTitle{
    
    font-family: 'Orbitron-SemiBold';
    font-size: clamp(18px, 2.5vh, 30px);
    color: var(--blue);
    margin: 3px;
    margin-top: 10px;
    margin-bottom: 10px;

}

.textCredits{
    font-family: 'Orbitron-regular';
    font-size: clamp(10px, 1.5vh, 16px);
    color: var(--blue);
    margin: 3px;
    margin-top: 10px;
    margin-bottom: 10px;


}

.Credits{
    position: relative;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 21fr 61fr 21fr;
    /* grid-template-rows: repeat(1, 200px); */

    place-items: left;
    text-align:left;
    vertical-align: center;
    top : 0px;
    left : 0px;
    padding: 10px;
    padding-bottom: 40px;
}

.centerCredits{
	overflow:hidden;
    border: 1px solid var(--blue);

}

.emptySpace{
    position: relative;
    padding:0px;
    margin: 0px;

    min-height: 20vh;
    min-height: 20%;
    min-width: 20vw;
    height:20%;
    padding:0px;
    margin: 0px;
	overflow:hidden;

}

/* ==== Project Page ==== */




/* ==== videoShow ==== */

.videoShow {

    
    position: relative;
    padding:0px;

    min-height: 90%;
    min-height: 90%;
    min-width: 90%;
    width:90%;
    height:90%;

    
    /* min-height: 100%;
    min-height: 100%;
    min-width: 100%;
    width:100%;
    height:100%; */


    margin: 0 auto;
    margin-top: 10px;
    
    overflow: hidden;
    border: 1px solid var(--blue);

}


.videoBorder{
    margin: 0 auto;
    width: 100%;

}
/* ==== videoShow ==== */

/* ==== Added for specific Pages ==== */
.paddingFooterRight{
    padding-right: 10px !important;
}


.mobileBlurDescriptor{
    mix-blend-mode: difference;

}


/* ==== MOBILE PLAY ==== */
      
.customMassiveIonicon{
	height: 20vh;
	padding:70%;
	fill: var(--blue);
	cursor: pointer;
	z-index: 100;
}
.customMassiveIonicon:hover{
	fill: #08FF08;

}

.safariPlay{
    

  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,0.1);
    mix-blend-mode: difference;
    backdrop-filter: blur( 2px );
    z-index:6;

    background:var(--blue);
    /* background: radial-gradient(circle, rgba(255,253,231,0) 0%, rgba(00, 33,152,0.15) 50%, rgba(221,255,140,0.05646008403361347) 100%); */
    background: radial-gradient(ellipse at top, rgba(00, 33,152,0.2), transparent),
            radial-gradient(ellipse at bottom, rgba(255,253,231,0.54), transparent);
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
    

    -webkit-transition: all  .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s;


}

    
   
.textSelection {

    text-transform: uppercase;
    font-family: 'Iceberg', sans-serif;
    position: relative;
    padding:0;margin: 0;
    
    color:var(--blue);
    background-color: var(--cream);
    text-align: center;
    top:-10%;
    font-size: .8vw;

    -webkit-transition: all  .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s;

    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */


}

.textSelection, .textSelection::after {
    
    font-family: 'Iceberg', sans-serif;
}

/* ==== MOBILE PLAY ==== */

/* ==== Href stuff ====*/
.hlinks {
    
    cursor: pointer;
    color : var(--cream);
}

.hlinkCream{
    color : var(--cream) !important;

}

.hlinkBlue{
    
    background-color: var(--blue);
    color : var(--cream) !important;

}




/* ==== Hero image stuff ====*/
.heroImg{
   
    position: relative;
    padding:0px;
    margin: 0px;

    min-width: 100vw;
    padding:0px;
    margin: 0px;
     
    overflow: hidden;
}
/* ==== Hero image stuff ====*/


.indicationSlideShowImgLoading{
    
    font-family: 'IBMPlexSans';
    font-size: clamp(19px, 2.3vh, 28px);
    color: var(--blue);
    position: relative;
    top: 50%;
    left: 45%;
}


.landscapeCredsMobile{
    padding-bottom: 140px !important;
}