@font-face {
    font-family: SF_Pro_Medium;
    src: url(Website_Fonts/SF-Pro-Rounded-Medium.otf);
  }
  
@font-face {
    font-family: SF_Pro_Thin;
    src: url(Website_Fonts/SF-Pro-Rounded-Thin.otf);
}

@font-face {
    font-family: Bradley_hand;
    src: url(Website_Fonts/Bradley_Hand.ttf);
}

@font-face {
    font-family: Pixel_Font;
    src: url(Website_Fonts/PixelifySans-VariableFont_wght.ttf);
}


@font-face {
    font-family: SF_Pro_Light;
    src: url(Website_Fonts/SF-Pro-Rounded-Light.otf);
}


.content_font {
    font-family: SF_Pro_Light;
    flex-wrap: wrap;
}

.title {
    font-family:sans-serif;
    font-size: 1rem;
    margin-top: 0;
}


.mb-6 {
    margin-bottom: 70px;
}


@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gap-3 {
    gap: .75rem;
}

.flex-grow, .grow {
    flex-grow: 1;
}

.grid {
    display: grid;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.underline-offset-4 {
    text-underline-offset: 4px;
}

.no-underline {
    text-decoration-line: none;
}

.pad-4 {
    padding: 1rem;
}

.bg-button {
    background-color: #1D1D1D;
    color: #FFFFFF;

}

.rounded-lg {
    border-radius: .5rem;
}

.w-full {
    width: 100%;
}

.inline-grid {
    display: inline-grid;
}


li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}

@media (hover:hover){
    .animated-list:hover {
        li{opacity:.5}
    } 
    .animated-list:hover {
        li:hover{opacity:1}
}
}

.animate-in {
    animation-delay: calc(var(--index)* .13s);
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.pad-5 {
    display: inline-flexbox;
    padding: 0.7rem;
}

.work-button {

    background-color: #1D1D1D;
    color: #d50c0c;
    font-family: Pixel_Font;

}

.work-dates {
    font-family:SF_Pro_Light;
    color: #897F7F;
    font-size: small;
}

.dim-row {
    transition: opacity 0.3s ease;
}

.dimmed-effect {
    opacity: 0.3 !important;
}

.highlighted {
    opacity: 1 !important;
}

.icon-text {
    display: inline-flex;
    align-items: center;
}

.icon-text i {
    margin-right: 8px
}

.total-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:auto;
    max-width: 750px;
    margin-top: 50px;
    margin-bottom: 100px;
    padding:20px;
}