* {
    font-family: 'Dosis', sans-serif;
}
/*BEGIN Scroolbar*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(173, 173, 173);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888;
}
/*END Scroolbar*/

html {
    scroll-behavior: smooth;
  }
body {
    background-color: #f4f4f4;
    max-width: 100%;
    margin: auto;
}
p {
    font-size: 1.3em;
}
nav {
    background-color: #ffffff;
    opacity: 0.9;
    max-width: 100%;
    margin: auto;
}
.welcome {
    background-image: url("../images/sf_top.jpg");
    background-repeat: no-repeat;
    background-attachment: relative;
    background-position: center;
    height: 900px;
}
.portfolio {
    background-color: #ffffff;
}
.about {
    background-color: #ffffff;
}
.skill {
  width: 100%;
}
.detail-ul > li {
    font-size: 3vh;
}
.tap {
    visibility: hidden;
}
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 400px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #343a40;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: #ffc107;
    color: white;
    transform: rotateY(180deg);
}
.box {
    background-color: #1b1d38;
}
.download {
    background-color: #343a40;
    height: 200px;
}
.progress {
    width: 300px;
}
.contact-bar {
    background-image: url("../images/woman-messaging.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
}
.contact {
    background-color: #ffffff;
}
#pdf {
    width: 100%;
    height: 900px;
}
#title-w {
    font-size: 3em;
}
#title-n {
    font-size: 6em;
    color: #000000;
}
#title-q {
    font-size: 2.5em;
    color: #000000;
}
a.disabled {
    pointer-events: none;
    color: #ccc;
}
/* animation button back to top */
.back-top:hover {
  position: relative;
  animation: mymove 1s infinite alternate;
}
@keyframes mymove {
  from {top: 0px;}
  to {top: -30px;}
}
/* end animation */

@media all and (max-width:768px){
    
    #title-n {
        font-size: 4em;
        text-shadow: 0px 1px #ffffff;
    }

    .tap {
        visibility: visible;
        width:24px;
        position: absolute;
        right: 0px;
        top: 0px;
        opacity:0.8;
        z-index: 1;
}
}