:root {
    --dark-color: #022B3A;
    --light-color: #FFFCFF;
    --neutral-color: #eee;
    --color-pop-yellow: #EAE151; 
    --color-pop-red: #C33C54;
    --body-font: 'Quicksand', sans-serif;
    --header-font: 'Montserrat', sans-serif;
}

body {
    background-color: var(--light-color);
    font-family: var(--body-font)
}

h1,h2,h3,h4,h5,h6,.navbar-custom {
    font-family: var(--header-font);
}

.navbar-custom {
    background-color: var(--light-color);
}

.header-section {
    background-color: var(--neutral-color);
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 10px;
    padding-right: 10px;
}

.header-container {
    background-color: var(--dark-color);
    border-radius: 6px; 
    color: var(--light-color);
    box-shadow: 
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
}

.about-text {
    padding: 1rem; 
    border-left: 1px solid white;"
}

.button-colorful {
    padding: 6px;
    text-decoration: none;
    color: var(--color-pop-yellow);
    box-shadow: inset 0 0 1.5px var(--color-pop-yellow), 0 0 1.5px var(--color-pop-yellow);
    text-align: center;
    border-radius: 5px;
}

.button-neutral {
    padding: 10px;
    text-decoration: none;
    color: var(--dark-color);
    background-color: var(--light-color);
    box-shadow: inset 0 0 1.5px var(--dark-color), 0 0 1.5px var(--dark-color);
    text-align: center;
    border-radius: 5px;
}

.button-neutral:hover {
    background-color: var(--dark-color);
    color: var(--light-color);
    transition: all .3s ease 0s;
    cursor: pointer;
}

.send-button {
    background-color: rgba(0, 0, 0, 0);
    font-size: X-large;
    border: none;
    float: right;
    color: var(--light-color)
}

.send-button:hover{
    border-bottom: 1px solid white;
}

.button-colorful:hover {
    background-color: var(--color-pop-yellow);
    color: var(--dark-color);
    transition: all .3s ease 0s;
    cursor: pointer;
}

i {
    color: var(--color-pop-yellow);
    margin-right: 5px;
}

.card-custom {
    background-color: var(--dark-color);
    color: var(--light-color);
    box-shadow: 
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
}

.image-overlay {
    border-radius: 8px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
}

.image-overlay:hover {
    /* transition: ease-in-out .5s;
    transition-property: opacity; */
    opacity: .9;
}

.profile-icon {
  border: 2px solid var(--dark-color);
  border-radius: 25px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
  /* -moz-box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.6); */
  /* -webkit-box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.6); */
}

.profile-photo {
  border: 3px solid var(--neutral-color);
  box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.6);
}

.resume-section, .contact-section {
    background-color: var(--light-color);
}

.projects-section {
    background-color: var(--neutral-color);
}

.profile-photo {
  border-radius: 50%;
}
.card-body p {
  font-style: italic;
}

.send-button span {
  font-size: small;
}