html{
    scroll-behavior: smooth;
}
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}
body{
    font-family: ocr-a-std,monospace;
    background: black;
    line-height: 1.5;
    font-size: 0.875rem;
    position: relative;
}
.brandId{
  font-family: ocr-a-std,monospace;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
    color: #e000bb;
}
.melPink{
  color: #e000bb;
}
.melBlue{
  color: #47bec2;
}
.melWhite{
  color: white;
}
.fa{
  color: #47bec2;
}
.logo{
  width: 150px;
}
/*WELCOME MELANIE CODES**/

footer{
    padding-top: 25px;
    padding-bottom: 25px;
}
section {
  padding-top: 120px;
  padding-bottom: 50px;
}
header{
  height: 100vh;
  background-color: black;
  padding-top: 30px;
  padding-bottom: 40px;
}
/*HEADER-SAP */

#home_sap{
  background-color: white;
}
.sap_text{
  font-family: 'BentonSans Regular', sans-serif;
}
.sap_text h1{
  font-weight:bolder;
  color: black;
}
.sap_text h4{
  color: black;
  font-weight: bold;
}
#text_go_back h1{
  font-family: 'BentonSans Regular', sans-serif;
}
/*mnilogo*/
.miniLogo{
  width: 60px;
}
/*NAV BAR*/
.navbar-dark .navbar-nav .nav-link{
  color: #47bec2;
}
/*TYPING MELANIE CODES**/
#cursor {
  display: inline-block;
  width: 8px;
  background-color: white;
  animation: blink-animation 1s steps(1) infinite;
}
.TypeMelanie{
  color: white;
}
/*ARROWs*/
.arrows {
	width: 60px;
  padding-top: 120px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.arrows path {
	stroke: #e000bb;
	fill: transparent;
	stroke-width: 1.5px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}
.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}
.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}
.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
/*ARROWs2-SAP*/
.arrows2 {
	width: 60px;
  padding-top: 35px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.arrows2 path {
	stroke: #e000bb;
	fill: transparent;
	stroke-width: 1.5px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}
.arrows2 path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}
.arrows2 path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}
.arrows2 path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
/*CONTAINERS*/
.titles
{
    color: #e000bb;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
    font-family: ocr-a-std,monospace;
}
.titles:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.abTittle{
  color: white;
}
.titles2{
  color: white;
}
/*EYES*/
.error-num {
  font-size: 8em;
}

.eye {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 100px;
  position: relative;
  width: 100px;
}
.eye::after {
  background: #000;
  border-radius: 50%;
  bottom: 56.1px;
  content: "";
  height: 33px;
  position: absolute;
  right: 33px;
  width: 33px;
}

/*POJECTS*/
#projects{
    background-color: white ;}
.btn-primary{
  background-color: #e000bb;
}
.btn-primary:hover, .btn-primary:active {
  background-color: #47bec2;
}
/*GALLERY*/
.filter-button
{
    font-size: 18px;
    font-family: lato, sans-serif;
    border: 1px solid #e000bb;
    border-radius: 5px;
    text-align: center;
    color: #e000bb;
    margin-bottom: 25px;
}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #e000bb;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #e000bb;
}
.btn-default:active .filter-button:active
{
    background-color: #e000bb;
    color: white;
}
.gallery_product
{
    padding: 0;
}
/*OVERLAY*/
.card-img-overlay{
  font-family: lato, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.card:hover{
  cursor: pointer;
}
.card *{
  transition: all 0.35s ease-in-out;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.02);
  opacity:0.8;
}
.card:hover .card-img-overlay{
    color:white;
    background-color: #e000bb;
    opacity: 0.8;
}
.card-img-overlay>h5, .card-img-overlay>p,.card-img-overlay>button{
  visibility:hidden;
}
.card-img-overlay:hover h5, .card-img-overlay:hover p,.card-img-overlay:hover button{
  visibility: visible;
}
.btn-pink{
  background-color: purple;
  color: white;
}
/*MODAL*/
.modal-content{
  font-family: lato, sans-serif;
}
/* Modal project showcase */
#brandId{
  background-color: black;
}
.logoText{
  background-color: #333;
}
#whiteBg{
  background-color: white;
}
#gradientBg{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#47bec2+0,47bec2+27,696ff7+100 */
background: #47bec2; /* Old browsers */
background: -moz-linear-gradient(45deg,  #47bec2 0%, #47bec2 27%, #696ff7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #47bec2 0%,#47bec2 27%,#696ff7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #47bec2 0%,#47bec2 27%,#696ff7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47bec2', endColorstr='#696ff7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*ABOUT*/
#about{
  background: linear-gradient(-45deg, #e000bb, #696FF7, #4EA8DE);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;

}
#about.secondText,h5,h4,h6{
  font-family:lato, sans-serif;
  color: white;
}
.melaniePic{
  max-width: 30%;
}
.h1{
  padding-left: 15px;
  font-family: ocr-a-std,monospace;
  text-align: center;
  white-space: nowrap;
}
.helloMel{
  padding-left: 15px;
  font-family: ocr-a-std,monospace;
  text-align: left;
  white-space: nowrap;
}
.secondText{
  font-weight: 300;
  padding: 20px 0 4px 15px;
  text-align: left;
}
.cv{
  margin-left: 15px;
}
hr{
  color: #e000bb;
  border-top: 2px solid;
  opacity: 0.5;
}
/*COMMENTS SAP*/
#comments{
  font-family: 'BentonSans Regular', sans-serif;
  background-color: white;
}
.comment p{
  font-size: 16px;
  color: white;
}
.comment {
  background-color:#0070f2;
}
.blockquote-footer{
    background-color:#0070f2;
    color: white;
}
/*FOOTER*/

footer{
    background-color: white;
}

/*UP ARROW*/
.top-link{
  position: fixed;
  bottom:25px;
  right: 25px;
  z-index: 10;
  display: none;
}
.fa-arrow-up{
  font-size: 32px;
  background-color: rgba(225, 225, 225, 0.5);
  border-radius: 50%;
  border: 1px solid #e000bb;
  padding: 10px;
}
.fa-arrow-up:hover{
  color: #48bdc1;
}
@media screen and (min-width: 768px) {
  .melaniePic{max-width: 10%;}
  .text-lg-left{text-align: left;}
 }
@media screen and (min-width :800px) {
    }  
@media screen and (min-width: 992px) {
  .sap_card{width: 35%;}
  }
@font-face {
  font-family:ocr-a-std, monospace;
  font-weight: 400;
  font-style: normal;
  ;
  src: url(https://use.typekit.net/ubz2lkt.css);
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
/*ARROWS*/
@keyframes arrow 
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
/*ARROWS2*/
@keyframes arrow2 
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow2 /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
/*ABOUT GRADIENT*/
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}