@import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Kaushan+Script&display=swap');

/* GENERAL */
html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(0, 0, 0, 0.2);
    color: #A714FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

/* HEADER */
#home-header {
    background-image: url("../images/lightning-bg-4px-transparent.png"), linear-gradient(160deg, #3B2667 10%, #32127A 60%) !important;
    /*background-image: url("../images/lightning-bg-purple.png");*/
    background-color: #f8f9fa;
    background-position: 95% 10% !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-attachment: scroll !important;
}

.navbar-nav {
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    color: #E3D53A !important;
}

.navbar-nav .nav-link:hover {
    color: #C4B61C !important;
}

.navbar-nav .active>.nav-link {
    color: #F9C700 !important;
}

.portfolio-preview-img {
    max-height: 60vh;
    border-radius: .25rem;
}


/* BACKGROUND STYLES */
.bg-purple-gradient {
    background-image: linear-gradient(90deg, #3B2667 10%, #32127A 60%);
}

.bg-footer {
    background-color: #32127A;
}

/* BUTTON STYLES */
.btn-purple {
    color: #fff;
    background-color: #68358F;
    border-color: #68358F;
}

.btn-purple:hover {
    color: #fff;
    background-color: #462461;
    border-color: #462461;
}

/* TEXT STYLES */
.font-strokes {
    font-family: 'Kaushan Script', cursive;
}

.font-heading {
    font-family: 'Ubuntu', sans-serif;
}

.text-shadow-border {
    text-shadow: 0 0 2px #000000, 0 0 2px #000000;
}

.text-sky-blue {
    color: skyblue !important;
}

a.text-sky-blue:hover {
    color: #45B4DF !important;
}

.text-yellow {
    color: #E3D53A !important;
}
a.text-yellow:hover {
    color: #FFD324 !important;
}

.text-purple-to-blue {
    background: linear-gradient(to right, #9708CC 0%, #14BDFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-yellow-to-blue {
    background: linear-gradient(to right, #FFEA98 0%, #14BDFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-yellow-to-yellow {
    background: linear-gradient(to right, #E3D53A 0%, #FFEA98 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.text-yellow-to-yellow:hover {
    background: linear-gradient(to right, #C4B61C 0%, #FFD324 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}