:root {
    --color: rgb(255, 177, 178);
    --color-dark: #726147;
    --purple: rgb(152, 143, 220);
    --pink: rgb(255, 177, 178);
    --cream: #ffd6b570;
    --pinktr: rgb(270, 190, 190)
    scroll-behavior: smooth;
}
@media (prefers-color-scheme: dark) {
    :root {--color: rgb(152, 143, 220);}
}
html {
  scroll-behavior: smooth;
}

.coba{
    width: 300px;
    height: 200px;
    background-color: #ff0000;
}
.coba1{
    width: 300px;
    height: 200px;
    background-color: #00ff08;
    margin-left: 600px;
}

*:hover,
*:active,
*:focus {
    -webkit-tap-highlight-color: transparent !important;
    outline-style: none !important
}
*:not(button) { transition: 2s; }

body {
    background-color: var(--cream);
    display: grid;
}

.Agency { font-family: 'Agency FB', sans-serif; }
.Ubuntu, h1, h2, h3, h4, h5, h6 { 
    font-family: 'Ubuntu', sans-serif;
    color: var(--color-dark);
}
.darken {mix-blend-mode:darken}

.footer col a {
    text-align: right;
}

.carousel-item, .container-fluid {
    position: relative;
    padding-bottom: 5rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background: var(--color) url("img/intro/3.webp") top center no-repeat;
}
.img-fluid {
    width: 50%;
    mix-blend-mode: darken;
}

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

.carousel-inner {
    width: 100vw !important;
    font-family: 'Ubuntu', sans-serif;
    color: var(--color-dark);
    margin-top: 0px;
}
.carousel-control-prev,
.carousel-control-next {
    color: var(--purple) !important;
    z-index: 1;
}

.welcome {
    padding: 5rem;
    padding-left:5rem;
}
button.pengecualian, button.pengecualian:active {
    max-height: fit-content;
    margin-top:30%;
    background-color: none !important;
    box-shadow: none !important;
}
button.btn.start a {
    color: var(--color-dark) !important;
}

@media screen and (min-width: 576px) { /*computer */
    .card button {
        margin-left: 31%;
        width: 33.3%;
        min-width: fit-content;
    }
    .footer col a {
        text-align: center;
    }
    .carousel-item, .container-fluid {
        margin-top: 1rem;
        padding-top: 3rem;
    }
    .image{
        justify-content: start;
    }
    .welcome{
        padding-left:15%;
    }
}

.card-columns{
    max-width: 1100px;
    margin: auto;
}

.card, .cube {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0);
    border-radius: 10px;
    background: var(--cream);
}

.cube {
    background: none;
    display: flex; 
    justify-content: space;
    align-items: center;
    min-height: 5vw;
}
.height {width: 100%; opacity: 0}
.slide {margin: 0 5vw;}
.slide:hover .cube, .slide:active .cube, #cubes .cube {
    animation: cube3d 10s infinite; z-index: 1;
}
.cube .side {position: absolute; width: 100%;}
#cubes {margin-bottom: -50vw !important; z-index: 1; overflow: hidden;}
#cubes img {margin-top: -50vw; width: 100vw;}

.card button {margin-left: 0;}

.card.flip { transform: rotateY(180deg); }

.card *, .cube * { border-radius: 10px; }
.card>*:not(.side) { transform: rotateY(0deg) translateZ(2em) }
.card.flip>*:not(.side) { transform: rotateY(180deg) translateZ(2em) }

.card>i {
    position: absolute;
    top: 0; right: 0;
    color: white;
}

.side {
    border: none;
    border-radius: 10px;
    display: flex; flex-direction: column;
}

.side.front { transform: rotateY(0deg) translateZ(45vw) }
.side.back { transform: rotateY(180deg) translateZ(45vw) }
.side.right { transform: rotateY(90deg) translateZ(45vw) }
.side.left { transform: rotateY(-90deg) translateZ(45vw) }
.side.left.top    { transform: rotateX( 90deg) translateZ(45vw); }
.side.left.bottom { transform: rotateX(-90deg) translateZ(45vw); }

.card .side.front { transform: rotateY(0) translateZ(2em) }

.card .side.back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    @media (max-width:1024px){max-height: 80vh;}
}

.hidden {
    display: none
}

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: .8vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 10000000000
}

progress::-webkit-progress-value {
    background-color: var(--color);
    opacity: 75%;
    transition-duration: 1s
}

a {color: var(--color);}

button {
    border: none;
    border-radius: 5px;
    background-color: var(--color);
    color: white;
    box-shadow: #0006 0 1px 2px, #0000004d 0 3.5px 7.5px -1.5px, #0003 0 -1.5px inset !important;
}
button:hover {color: black}
button:active {
    margin-top: 1px;
    box-shadow: #00000040 0 .0625em .0625em, #00000040 0 .125em .5em, #ffffff1a 0 0 0 1px inset !important;
}

.logo {
    width: 10vw;
    max-width: 100px;
    min-width: 80px;
    mix-blend-mode: color;
} .logo:hover{mix-blend-mode:unset}

.portfolio img {
    width: 300px
}

.portfolio {
    flex-wrap: wrap;
    max-width: 1000px
}

.for-navbar {
    background-color: var(--color);
    padding: none !important ;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 70%;
}
.for-navbar:hover {
    opacity: 100%
}
.for-navbar button { background-color: var(--cream); }
.navbar-text {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

.gap { height: 4em }

.footer{
    background-color: var(--cream);
    width: 100vw;
    padding: 50px;
    padding-bottom: 0px;
}
.logo-footer { width: 250px; }

#root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: ivory
}

@keyframes cube3d {
    from {transform: rotateY(0deg)}
    15%, 25% {transform: rotateY(90deg)}
    40%, 50% {transform: rotateY(180deg)}
    65%, 75% {transform: rotateY(270deg)}
    90%, to {transform: rotateY(360deg)}
}

/*bootstrap change colors*/
.btn-primary, .btn-primary:hover, .btn-primary:focus,  
{background-color:var(--color) !important; border-color:var(--color) !important;}
.btn-primary:active
{background-color:var(--cream) !important; border-color:var(--cream) !important;}