:root {
    --background-color: #f7f2f4;
    --secondary-background-color: #fffafc;
    --third-background-color: #dd5f88;
    --text-color: #555;
    --font-color: #222;
    --font-secondary-color: #b51f4f;
    --background-gradient: linear-gradient(to right,#dd5f88,#de3c71);
    --background-gradient-contact: linear-gradient(to bottom right,#dd5f88,#de3c71);
    --icon-color: #d60045;
    --button-color: #d60045;
    --hover-button-color: #c2003e;
    --header-color: #555;
    --hr-color: rgba(0,0,0,.1);
    --background-image: url("../resources/flower.jpg");
    --background-image-medium: url("../resources/flower-medium.jpg");
    --background-image-small: url("../resources/flower-small.jpg");
    --background-image-xsmall: url("../resources/flower-xsmall.jpg");
    --shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

[data-theme="dark"] {
    --background-color: #0d1a26;
    --secondary-background-color: #263341;
    --third-background-color: #4b647e;
    --text-color: #F0F0F0;
    --font-color: #f5f7fa;
    --font-secondary-color: #9fb3c8;
    --background-gradient: linear-gradient(to right,#4b647e,#6a8bad);
    --background-gradient-contact: linear-gradient(to bottom right,#4b647e,#6a8bad);
    --icon-color: #007bff;
    --button-color: #007bff;
    --hover-button-color: #0069d9;
    --header-color: white;
    --hr-color: rgb(200,200,200);
    --background-image: url("../resources/droplets.jpg");
    --background-image-medium: url("../resources/droplets_medium.jpg");
    --background-image-small: url("../resources/droplets_small.jpg");
    --background-image-xsmall: url("../resources/droplets_xsmall.jpg");
    --shadow: -1px 6px 13px 0px rgba(0,0,0,0.44);
}

html{
  scroll-behavior: smooth;
}

:target:before {
    content: "";
    display: block;
    height: 65px;
    color: var(--secondary-background-color);
    margin: -65px 0 0;
}

p {
    font-size: 17px;
}

@media screen and (max-width:400px){
    p {
        font-size: 15px;
    }
}

/* Navigation Bar */
.navbar {
     margin-bottom: 0;
     background-color: var(--background-color);
     border: 0;
     letter-spacing: 4px;
     border-radius: 0;
     height: 65px;
  }

.brand-color {
    padding-left: 10px;
    font-weight: bold;
    font-size: 25px;
    color: var(--font-color);
}

.brand-color:hover {
    color: var(--font-secondary-color);
}

.nav-color {
    color: var(--font-color);
    font-size: 18px;
    padding-left: 20px;
    padding-right: 10px;
}

.nav-color:hover {
    color: var(--font-secondary-color);
    font-size: 20px;
}

.navbar li a{
    background-color: var(--background-color);
}

.navbar-toggler {
    background-color: var(--font-color) !important;
}

.fa-fw {
    color: var(--secondary-background-color);
}

.header-border {
    border-bottom: 1px solid var(--third-background-color);
    padding-bottom: 15px;
    padding-top: 10px;
}

.heading {
    color: var(--header-color);
}

footer .jumbotron {
    background: var(--background-color);
    margin-bottom: 0px;
    padding: 22px;
}

/* Buttons */
.btn {
    color: white;
}
.btn:focus {
    box-shadow: none;
}

.btn:active, .btn:hover {
    color: white;
    border-color: var(--button-color);
}

#experience-icons:hover {
    color: var(--hover-button-color);
    text-decoration: none;
}

#experience-icons {
    text-decoration: none;
    color: var(--button-color);
}

.btn-custom {
    background-color: var(--button-color);
    border-color: var(--button-color);
}

.btn-custom:hover {
    background-color: var(--hover-button-color);
    border-color: var(--button-color);
}

.btn-custom, .btn-custom:active, .btn-custom:focus {
    background-color: var(--button-color);
    border-color: var(--button-color);
}

/* Icons */
.icon-wrapper-footer {
    padding: 15px;
}

/* Footer */
#icons-footer {
    background: var(--secondary-background-color);
    color: var(--font-color);
    padding: 18px;
    font-size: 25px;
    text-decoration: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

#icons-footer:hover {
    color: var(--font-secondary-color);
}

/* Modal Styles*/
.modal-body, .modal-header, .modal-footer {
    background-color: var(--secondary-background-color);
    color: var(--text-color);
}

hr {
    background-color: var(--hr-color);
}

.close-modal {
    color: var(--text-color);
}