@font-face {
  font-family: 'eina';
  src: url("./../fonts/Eina.woff2") format("woff2");
}

.div-center {
    position: relative;
    top: 15%;
}

.projectUl {
    display: flex;
    margin-right: 40px;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 1.25rem;
    list-style: none;
}

.projectItem {
    margin: 0 0.75rem 2.25rem;
    width: 100%;
    display: inline-grid;
}

.projectItem .card-header {
    border-top: solid 2px #fff; 
}

.row-column {
    width: 100%;
}

.mt {
	margin-top: 2rem;
}

.m {
    margin: 15px;
}

@media(min-width: 900px) {
    .projectItem {
        width: 23%;
    }
}

@media(min-width: 768px) {
    .row-column {
        display: inline-grid;
    }
}

h1,h2,h3,h4,h5,h6,p {
    font-weight: 500;
}

* {
    font-family: 'eina';
}

.borderBtn {
    border: 1px solid rgb(189, 191, 194);
}

.fw-600 {
    font-weight: 600;
}

.brickColor {
    background: #cc4d24;
    color: white;
}

.inline-center {
    display: inline-flex;
    max-width: 60%;
    margin: 0px auto;
}

.ls-none {
    list-style: none
}

.danger {
    color: #C4183C;
}

.success {
    color: #17C671;
}

svg:hover * {
     transition: 0.1s;
     stroke: #333;
     fill: #bdc3c7;
}

svg:not(:hover) * {
    transition: 0.1s;
}

.danger-zone {
    border: 2px solid #C4183C;
    padding: 15px;
    border-radius: 15px;
}

.neoButton {
    border: 1px solid rgba(255,255,255, 0.2);
    box-shadow: 6px 6px 16px 0 rgba(217, 210, 200, 0.71), -6px -6px 26px 0 rgba(255,255,255,0.83);
}

.neoButton:hover {
	border: 1px solid rgba(255,255,255, 0.2);
	box-shadow: inset 6px 6px 16px 0 rgba(217, 210, 200, 0.71), inset -6px -6px 26px 0 rgba(255,255,255,0.83);
}

.neoButton-red {
    border: 1px solid rgba(255,255,255, 0.2);
    border-radius: 12px;
    box-shadow: 6px 6px 16px 0 rgba(240, 82, 82, 0.71), -6px -6px 26px 0 rgba(255,255,255,0.83);
}

.brief-description {
    display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
}

#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  background-color: #E9ECEF; /* Black background color */
  color: #333; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 25%;
  right: 25%;
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
  animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
