*{
	padding: 0px;
	margin: 0px;
}

body{
	background-color: #15374D !important;
}

html{
    scroll-behavior: smooth !important;
}

#div_nav{
	background-color: #15374D !important;
}

#contact_border{
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 1.0);
	border: 1px solid white;
	font-weight: bolder;
}

h1{
	font-size: 5em;
	color: whitesmoke;
}

#jeri{
    font-weight: bolder !important;
    scroll-behavior: smooth;
}

#jeri:hover{
    color: #71B0C3 !important;
}


#nav_project:hover, #nav_tools:hover{
    color:#71B0C3 !important;
}

#nav_contact:hover{
    background-color: #6E94A0;
    border-radius: 10px;
}


.flip-box {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: black;
}

.flip-box-back {
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.5);;
    color: white;
    transform: rotateY(180deg);
}