/*----- GOOGLE FONTS -----*/
@font-face {
    font-family: "Fira Code", monospace;
    src: url("/blogfolio/static/fonts/fira_code/FiraCode-VariableFont_wght.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu", sans-serif;
    src: url("/blogfolio/static/fonts/ubuntu/Ubuntu-Regular.ttf");
    font-display: swap;
}

/*----- GENERAL STYLES -----*/
body {
    font-family: "Ubuntu", sans-serif;
    background-color: #1e293b;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fira Code", monospace;
}

#about,
#portfolio,
#skills {
    background-color: #1e293b;
}

/*----- NAVBAR -----*/
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 15;
}

/*----- ICONS & LOGO -----*/
.icon--smaller {
    width: 64px;
    height: 64px;
}

/* Pop: source: https://github.com/IanLunn/Hover/blob/master/css/hover.css */
@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}
@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.hvr-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pop:hover,
.hvr-pop:focus,
.hvr-pop:active {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/*----- TEXT EFFECTS -----*/
.heading__text--shadow {
    /* code from https://css-tricks.com/almanac/properties/t/text-shadow/ */
    color: #f8fafc;
    text-shadow: 1px 0px 1px #94a3b8, 0px 1px 1px #476685, 2px 1px 1px #94a3b8, 1px 2px 1px #476685,
        3px 2px 1px #94a3b8, 2px 3px 1px #476685, 4px 3px 1px #94a3b8, 3px 4px 1px #476685,
        5px 4px 1px #94a3b8, 4px 5px 1px #476685, 6px 5px 1px #94a3b8, 5px 6px 1px #476685,
        7px 6px 1px #94a3b8;
}

.text__shadow--light {
    text-shadow: 1px 1px 2px #eff6ff;
}

/*----- SHADOW EFFECTS -----*/
.card__box-shadow {
    -webkit-box-shadow: 8px 9px 0.5rem rgba(100, 116, 139, 0.8);
    box-shadow: 8px 9px 0.5rem rgba(100, 116, 139, 0.8);
}

/*----- TOOLTIP -----*/
/* found at: https://stackoverflow.com/questions/66236686/using-bootstrap-5-to-create-custom-tooltips */
.custom-tooltip.tooltip > .tooltip-inner {
    background-color: #2c3e50;
    font-weight: bold;
}

/* found at: https://newtodesign.com/change-bootstrap-5-tooltip-arrow-color/ */
.tooltip.bs-tooltip-top > .tooltip-arrow::before {
    border-top-color: #2c3e50;
}

.tooltip.bs-tooltip-bottom > .tooltip-arrow::before {
    border-bottom-color: #2c3e50;
}

.tooltip.bs-tooltip-start > .tooltip-arrow::before {
    border-left-color: #2c3e50;
    border-right-color: #2c3e50;
}

.tooltip.bs-tooltip-end > .tooltip-arrow::before {
    border-right-color: #2c3e50;
}