/* 
===============
=== GENERAL === 
===============
*/
html{
scroll-snap-type: none;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
display: none;
}

p, h1, h2, h3, span, a, img, li, ul{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

p, h1, h2, h3, span, i, a{
    color: var(--dark-color);
}

/* 
=======================
=== Project Nav Bar === 
=======================
*/
.starting-page {
background: var(--tertiary-color);
height: auto;
min-height: 100vh;
padding-bottom: 150px;
}

.navbar-background {
position: fixed;
top: 40px;
left: 0; 
right: 0; 
height: 140px;
width: 650px;
margin: auto;
display: flex;
flex-direction: row;
gap: 20px;
align-items: top;
justify-content: center;
padding: 10px 30px;
border-radius: 30px;
z-index: 10;
}

.project-tab {
width: 40%;
height: 50px;
padding: 0 2rem;
border: 2px solid rgb(21, 21, 21);
border-radius: 30px;
box-shadow: 0 8px 0 0 var(--boxshadow-dark);
background-color: rgb(255, 248, 240);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
color: rgb(41, 41, 41);
}

.project-tab.dark {
    border: 2px solid rgb(255, 248, 240);
    background-color: var(--secondary-color);
    color: rgb(255, 248, 240);
}

.project-tab p {
font-size: 1.2rem;
}

.project-tab.active {
transform: translateY(5px);
box-shadow: 0 3px 0 0 var(--boxshadow-dark);
}


/* 
============================
=== Flip Card Containers === 
============================
*/
.project-container {
position: relative;
width: 100%;
min-height: 80vh;
top: 150px;
background: transparent;
display: flex;
flex-direction: row;
justify-content: center;
}

.project-content-cont {
position: absolute;
background: transparent;
width: 90%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
opacity: 1;
}

.main-project-container {
    pointer-events: none;
    z-index: 1;
}

.side-project-container {
    pointer-events: none;
    z-index: 1;
}

.main-project-container.active {
    pointer-events: auto;
    z-index: 2;
}
.side-project-container.active {
    pointer-events: auto;
    z-index: 2;
}

.main-project-container .flipcard {
    transform: translateX(-20%);
    opacity: 0;
}

.side-project-container .flipcard {
    transform: translateX(20%);
    opacity: 0;
}

.main-project-container.active .flipcard {
    transform: translateX(0);
    opacity: 1;
}

.side-project-container.active .flipcard {
    transform: translateX(0);
    opacity: 1;
}

.project-content-cont .flipcard:hover {
    scale: 1.02;
}


/* 
==================
=== FLIP CARDS ===
==================
*/
.flipcard {
    position: relative;
    width: 900px;
    max-width: 100%;
    aspect-ratio: 3/2;
    perspective: 3200px;
    transition: transform 0.5s cubic-bezier(.36,0,.5,1) calc(var(--fcnum)*100ms),
                opacity 0.4s cubic-bezier(.36,0,.5,1) calc(var(--fcnum)*100ms),
                scale 0.2s cubic-bezier(.36,0,.5,1);
}

.flipcard .fc-front, .flipcard .fc-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 3px 12px 20px 3px rgba(var(--dark-rgb-value), 0.2);
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .5s ease-in-out,
                background-color 0.3s ease-in-out;
    backface-visibility: hidden;
}

.flipcard .fc-front {
    transform: rotateX(0deg);
    background-color: var(--tertiary-color);
    color: grey;
}

.flipcard .fc-back {
    transform: rotateX(-180deg);
    background-color: var(--tertiary-color);
    color: grey;
}

.flipcard.flipped .fc-front {
    transform: rotateX(180deg);
}

.flipcard.flipped .fc-back {
    transform: rotateX(0deg);
}

/* 
==================
=== COPYRIGHTS ===
==================
*/
footer {
height: 8vh;
padding-top: 5vh;
background-color: var(--tertiary-color);
}