/* Project 2 Blank Bootstrap 5.3 starter template for DESN1021, Web & Time Based Design. <div> tags should be replaced with semantic HTML tags where appropriate  [DESN1021-Pro2#2-7bddd3e699aksjdhag888adfgkjahdfg8] DO NOT DELETE THIS COMMENT *//* Author: Web and Time-based Design unit */
/*Body styling */
body {
    background-color: black;
    color: white;
}
/*Navbar styling*/
.bg-navy {
    background-color: #001f3f;
}

.navbar-brand {
    color: white;
}

.navbar-dark .navbar-brand:hover {
    color: #87CEFA;
}

.nav-link {
    display: inline-block;
    background-color: transparent;
    transition: 2s ease-in-out;
}

.nav-link:hover {
    background-color: #87CEFA;
    cursor: pointer;
    border-radius: 100px;
    transition: 2s ease-in-out;
}
/*Makes selected images equal size and styling */
.img-equal {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid white;
    display: block;
}
/*Header styling and more */
h1,
h2,
h3,
h4 {
    text-decoration: underline;
    text-underline-offset: 8px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo 2';
}

p,
li,
a,
span,
.navbar-brand {
    font-family: 'Open Sans';
    font-weight: 500;
    font-size: 18px;
}
/*Footer styling */
.footer {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
/*Contact form styles */
.img-contact {
    border: 2px solid white;
    border-radius: 10px;
    height: 550px;
    width: 100%;
}

.contact-form-wrapper {
    margin-top: 4rem;
}

.contact-form-wrapper h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

form input,
form textarea,
form select {
    font-family: 'Open Sans';
}
/*Portfolio page styles */
.portfolio-item {
    position: relative;
}

.portfolio-item img {
    display: block;
    width: 100%;
    border-radius: 10px;
}
/*slight help gotten from chatgpt.com to help design the overlay*/
.portfolio-item .overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: rgba(135, 206, 250, 0.85);
    color: black;
    transition: bottom 0.4s ease-in-out;
    border-radius: 0 0 10px 10px;
}

.portfolio-item:hover .overlay {
    bottom: 0;
}

.portfolio-item .overlay h5 {
    margin: 0;
    font-weight: 700;
}

.portfolio-item .overlay p {
    margin: 0;
    font-size: 0.9rem;
}

.img-portfolio{
    width: auto;
    height: 350px;
    border-radius: 10px;
}
/*Resume page image styles */
.img-resume {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid white;
    display: block;
}
/*Swiper buttons styles */
.color-navy {
    color: #87CEFA;
}

 /* Project 2 Blank Bootstrap 5.3 starter template for DESN1021, Web & Time Based Design. <div> tags should be replaced with semantic HTML tags where appropriate  [DESN1021-Pro2#2-7bddd3e699aksjdhag888adfgkjahdfg8] DO NOT DELETE THIS COMMENT */