html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    background-image: url(dark_wood.png);
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    color: #777777;
}

.navbar-light .navbar-brand {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 30px;
    margin-left: 8%;
    color: #777;   
    padding: 5px; 
}

.line {
    border-right: #777 solid 1px;
}

.box {
    background-color: #fff;
    margin-top: 10 rem;
    padding: 20px;
    margin-bottom: 10rem;
}

img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.card-img {
    width: 250px;
    height: 250px;
    
}

h1 {
    color: #777;
    font-family: 'Georgia', Times, Times New Roman, serif;
    border-bottom: 5px solid #ffc107;
    width: 100%;
    margin-bottom: 15px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    text-align: center;
    border-top: 5px solid #ffc107;
}

.card {
    margin: 20px;
}


#gr {
    display: block;
    height: auto;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

#icons {
    margin: auto;
}

.icons {
    display: block;
    text-align: center;
    margin: auto;
    color: #777;
    
}

.icons:hover {
    color: #ffc107;
}

#or {
    margin: auto;
    font-family: 'Georgia', Times, Times New Roman, serif;
    
}

.flip-card {
background-color: transparent;
width: 250px;
height: 250px;
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%;
backface-visibility: hidden;
}

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

/* Style the back side */
.flip-card-back {
background-color: #ffc107;    
color: white;
transform: rotateY(180deg);
}

@media (max-width: 767.98px) {
    #gr{
        width: 100%;
        margin-top: 180px;
        margin-bottom:100px;
    }
}

#nav {
    position: fixed;
    bottom: 7%;
    right: 5%;
}
.menu {
color: #ffc107;
margin: 20px auto;
transition: transform .25s linear;
transform-origin: center;
transform-style: preserve-3D;
float: right;
cursor:pointer;

}

.menu-rotate {
    transform: rotate(180deg);
}

.menu-list  {
    display: none;
    text-align: right;    
        
}
.menu-list-open {
    display: inline;
    	
}
.chip {
    color: #777777;
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    margin-top: 10px;
}

.chip:hover {
    color: #ffc107;
}

.chip i {    
    margin: 10px 20px 10px 5px ;
        
}

.slit-in-horizontal {
	-webkit-animation: slit-in-horizontal 0.45s ease-out both;
	        animation: slit-in-horizontal 0.45s ease-out both;
}

@-webkit-keyframes slit-in-horizontal {
    0% {
      -webkit-transform: translateZ(-800px) rotateX(90deg);
              transform: translateZ(-800px) rotateX(90deg);
      opacity: 0;
    }
    54% {
      -webkit-transform: translateZ(-160px) rotateX(87deg);
              transform: translateZ(-160px) rotateX(87deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(0) rotateX(0);
              transform: translateZ(0) rotateX(0);
    }
  }
  @keyframes slit-in-horizontal {
    0% {
      -webkit-transform: translateZ(-800px) rotateX(90deg);
              transform: translateZ(-800px) rotateX(90deg);
      opacity: 0;
    }
    54% {
      -webkit-transform: translateZ(-160px) rotateX(87deg);
              transform: translateZ(-160px) rotateX(87deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(0) rotateX(0);
              transform: translateZ(0) rotateX(0);
    }
  }