/*#region Main*/
@font-face {
    font-family: "USABlack";
    src: url("/static/fonts/USABlack.ttf");
}

#centeredpage {
    max-width: 760px;
}

body {
    background: url("/static/sky.webp");
}

.navbar {
    background-color: #081C15 !important;
}

.navbar a {
    user-select: none;
    font-variant: petite-caps;
}

.navbar-brand {
    font-family: 'USABlack', sans-serif;
    background-color: #081c15;
}

.navbar .flag {
    max-height: 24px;
    width: auto;
}

.navbar .nav-item {
    background-color: #2d6a4f;
}

.navbar #navbarNav {
    background: url("/static/pboardtex.webp");
}

.navbar-toggler {
    background-color: #2D6A4F;
}

.dropdown-menu {
    background: url("/static/bmetal.jpg");
}

#prebody, #prefooter {
    background: url("/static/bmetal.jpg");
    min-height: 10px;
}

footer {
    background-color: #081C15;
}

h1, h2, h3, footer {
    font-variant: petite-caps;
}

.page img {
    max-width: 100%;
}

.blog-post a {
    color: var(--bs-dark);
}
/*#endregion Main*/

/*#region Cards*/
.jcards {
    position: relative;  
    list-style-type: none;
    padding: 0;
    max-width: 24em;
}
  
.jcard {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    
    transform: translateY(0) rotate(4deg) translateX(25px) scale(1);
    transform-origin: 0 0;
    
    transition: transform 0.6s cubic-bezier(.8,.2,.1,0.8) 0.1s, background 0.4s linear;
    
    cursor: pointer;
    user-select: none;
}
    
.jcard:last-child {
    margin-bottom: 0;
}
  
.jcard--next { 
    z-index: 5; 
    transform: translateY(-25px) rotate(4deg) translateX(25px) scale(1);
    filter: brightness(0.9);
}
  
.jcard--out {
    animation: jcard-out 0.6s cubic-bezier(.8,.2,.1,0.8);
    transform: translateY(-50px) rotate(8deg) translateX(55px) scale(0.95);
    z-index: 1;
    filter: brightness(0.8);
}
  
@keyframes jcard-out {
    0% { z-index: 20; transform: translateY(0px) rotate(-4deg); }
    50% { transform: translateY(-120%) rotate(-5deg) translateX(-40px); }
    80% { z-index: 1; }
    100% { transform: translateY(-50px) rotate(8deg) translateX(55px) scale(0.95); }
}
  
.jcard--current {
    cursor: auto;
    user-select: auto;
    position: relative;
    z-index: 10;
    opacity: 1;
    transform: rotate(-1deg) translateX(0%) scale(1);
}

#models {
    min-height: 30em;
    margin: 5em;
}
/*#endregion Cards*/