@charset "UTF-8";
/* 
    Author: Amin Amani
    Website: AminAmani.net
*/

/* 
    Table of Contents:

    A) Home Page
        1. Globals
        2. Header
        3. NAV Bar
        4. About
        5. Skills / Screenshots
        6. Projects (Gallery)
        7. Education & Experience
        8. Contact
        9. Footer
        10. Back to Top Button
        11. Recaptcha Badge
    B) Projects Pages
        12. Details
        13. Spacing
        14. Carousel
    C) Overriding Bootstrap Colors
        15. Text
        16. Border
        17. Background
*/

/* ====================
        1. Globals
     ================== */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #F5F5F5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Overlock', cursive;
    text-transform: capitalize;
}

.title {
    /* margin-top: 1em; */
    margin-bottom: 0.5em;
    text-align: center;
    color: #00bcd4;
    font-size: 3em;
    text-transform: capitalize;
    letter-spacing: 2px;
    font-weight: bold;
}

.no-break {
    white-space: nowrap;
}

/* ====================
        2. Header
     ================== */

header {
    background-image: url("../img/header-bg.webp");
    background-size: cover;
    background-color: #5c5c74;
    padding: 30px 30px;
    color: white;
}

.header-left {
    padding-top: 40px;
    text-align: center;
}

.header-right {
    padding-top: 30px;
}

.header-right hr {
    border-width: 1px;
    border-color: white;
}

.header-right i {
    color: #fdac14;
    padding-right: 7px;
}

.header-right .separator {
    display: inline-block;
    padding: 0 15px;
}

.profile-photo {
    max-height: 250px;
    border: 5px solid #fdac14;
}

.profile-photo-small {
    max-height: 150px;
    border: 5px solid #fdac14;
}

/* ====================
        3. NAV Bar
     ================== */

.nav-item a {
    padding: 1em 2em!important;
    border: 1px solid #343a40;
    border-radius: 15px;
}

.nav-item a:hover, .nav-item a:focus {
    background-color: #282828!important;
    color: white!important;
    border: 1px solid #282828;
    border-radius: 15px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

/* ====================
        4. About
     ================== */

#about .about-text p {
    text-align: justify;
}

#about .about-box div {
    border: 2px solid #00bcd4;
    padding: 1em;
    text-align: center;
}

#about .about-box h3 {
    color: #00bcd4;
    margin-bottom: 1em;
}

#about .btn .fa {
    /* font awesome icons inside buttons */
    font-size: 0.9em;
}

/* ===============================
        5. Skills / Screenshots
     ============================= */

#skills, #screenshots {
    color: white;
}

#skills hr, #screenshots hr {
    border-color: white;
}

#screenshots h5 {
    padding-top: 2em;
}

#skills h5 {
    padding-top: 1em;
}

#skills .progress {
    margin-top: 2em;
    height: 3px;
}

.bg-my-violet {
    background-color: blueviolet;
}

.bg-my-yellow {
    background-color: yellow;
}

.bg-my-green {
    background-color: teal;
}

/* ==============================
        6. Projects (Gallery)
     ============================ */

#projects .title {
    margin-bottom: 1em;
}

#projects hr {
    border-color: black;
}

#projects .image-frame {
    /* Image Frame */
    width: 100%;
    max-width: 310px;
    /* image width +10px */
    padding: 5px;
    margin: 0 auto 3em auto;
    border: 1px solid black;
    -webkit-box-shadow: grey 5px 5px 5px;
    box-shadow: grey 5px 5px 5px;
    position: relative;
    /* Used for Image title and Description positioning */
}

#projects .image-frame .image-container {
    /* Dark Background behind the image for the dimming effect on Hover */
    width: 100%;
    background-color: black;
    min-height: 200px;
}

#projects .image-frame a:hover .project-image, #projects .image-frame a:focus .project-image {
    /* Image dimming effect on Hover */
    opacity: 0.7;
}

#projects .image-frame .project-title {
    /* Overlay on Images */
    position: absolute;
    bottom: 5px;
    left: 20px;
    color: lightgray;
    padding: 20px;
    text-align: center;
    -webkit-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

#projects .image-frame a:hover .project-title, #projects .image-frame a:focus .project-title {
    -webkit-transform: translate(0px, -60px) scale(1.2);
    -ms-transform: translate(0px, -60px) scale(1.2);
    transform: translate(0px, -60px) scale(1.2);
    color: #fdac14;
    -webkit-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

#projects .image-frame .project-description {
    /* Overlay on Images When Hovering */
    position: absolute;
    bottom: 5px;
    color: #f1f1f1;
    opacity: 0;
    color: white;
    font-size: 1.2em;
    padding: 20px;
    text-align: center;
}

#projects .image-frame a:hover .project-description, #projects .image-frame a:focus .project-description {
    opacity: 1;
    -webkit-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
}

/* ===================================
        7. Education & Experience
     ================================= */

#edu-exp {
    color: white;
}

#edu-exp hr {
    border-color: white;
}

#edu-exp .title {
    text-align: left;
}

#edu-exp .row {
    padding-bottom: 1.7em;
}

#edu-exp h4 {
    padding-bottom: 0.2em;
}

#edu-exp h5 {
    color: #fdac14;
    padding-bottom: 0.4em;
}

#edu-exp p, #edu-exp ul li {
    color: lightgray;
    margin-bottom: 0;
}

#edu-exp ul {
    margin-left: 15px;
    padding: 0;
}

#edu-exp .mytooltip {
    position: relative;
    display: inline-block;
}

#edu-exp .mytooltip .mytooltiptext {
    visibility: hidden;
    width: 270px;
    background-color: #202020;
    color: #F5F5F5;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    -webkit-box-shadow: grey 2px 2px 5px;
    box-shadow: grey 2px 2px 5px;
    position: absolute;
    z-index: 1;
}

#edu-exp .mytooltip .mytooltiptext td:nth-child(2) {
    text-align: right;
}

#edu-exp .mytooltip .mytooltiptext tbody tr:nth-child(4n+1) td {
    /* Group each 4 courses together */
    padding-top: 10px;
}

#edu-exp .mytooltip .mytooltiptext th {
    border-bottom: 1px solid #F5F5F5;
    padding-bottom: 5px;
}

#edu-exp .mytooltip:hover .mytooltiptext {
    visibility: visible;
}

/* =========================
        8. Contact
     ======================= */

#contact input {
    margin-bottom: 0.5em;
}

#contact textarea {
    min-height: 130px;
}

/* =========================
        9. Footer
     ======================= */

#footer {
    color: white;
}

#footer hr {
    border-color: white;
}

#footer a {
    text-decoration: none;
}

#footer i {
    /* Icons with FontAwesome */
    display: inline-block;
    width: 80px;
    font-size: 36px;
    /* PX for fixed Icon size */
    color: #fdac14;
    border: 1px solid #fdac14;
    border-radius: 10px;
    padding: 10px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#footer a:hover i, #footer a:focus i {
    /* Icons with FontAwesome - Hover */
    color: white;
    border-color: white;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#footer h4 {
    padding: 25px 0 10px 0;
    color: lightgray;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#footer a:hover h4, #footer a:focus h4 {
    padding: 25px 0 10px 0;
    color: white;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#footer p {
    color: lightgray;
}

#footer a:hover p, #footer a:focus p {
    color: white;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#footer .textwrap {
    word-wrap: break-word;
}

.copyright {
    color: lightgray;
    background-color: black;
}

/* ==============================
        10. Back to Top Button
     ============================ */

#toTop {
    color: #00bcd4;
    text-align: center;
    font-size: 24px;
    /* PX for fixed Icon size */
    line-height: 24px;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: 1px solid #00bcd4;
    z-index: 999;
    width: 32px;
    height: 32px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

#toTop:hover, #toTop:focus {
    color: #F5F5F5;
    background-color: #00bcd4;
}

/* =========================
        11. Recaptcha Badge
     ======================= */

.grecaptcha-badge {
    visibility: hidden;
}

/* ---------------------------------------------------------- */

/* ---------------------- Projects Pages -------------------- */

/* ---------------------------------------------------------- */

/* =========================
        12. Details
     ======================= */

#details .detail-image {
    border-width: 2px !important;
}

#details .detail-text {
    text-align: justify;
}

#details .back-to-main a {
    text-decoration: none;
}

#details .bg-dark {
    /* Other Projects Page */
    color: lightgray;
}

/* =========================
        13. Spacing
     ======================= */

ul.normal-spacing {
    margin-left: 15px;
    padding: 0;
}

ul.normal-spacing>li {
    margin-bottom: 10px;
}

/* =========================
        14. Carousel
     ======================= */

#screenshots-carousel .carousel-control-next, #screenshots-carousel .carousel-control-prev {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    /* Black Color */
    bottom: -90%;
}

/* ---------------------------------------------------------- */

/* --------------- Overriding Bootstrap Colors -------------- */

/* ---------------------------------------------------------- */

/* =========================
        15. Text
     ======================= */

/*
.text-primary {
    color: #181510!important;
}

.text-secondary {
    color: #785F35!important;
}
*/

.text-warning {
    color: #fdac14!important;
}

.text-info {
    color: #00bcd4!important;
}

.text-light {
    color: #F5F5F5!important;
}

/* =========================
        16. Border
     ======================= */

/*
.border-primary {
    border-color: #181510!important;
}

.border-secondary {
    border-color: #785F35!important;
}
*/

.border-warning {
    border-color: #fdac14!important;
}

.border-info {
    border-color: #00bcd4!important;
}

.border-light {
    border-color: #F5F5F5!important;
}

/* =========================
        17. Background
     ======================= */

/*
.bg-primary {
    background-color: #181510!important;
}

.bg-secondary {
    background-color: #785F35!important; 
}
*/

.bg-warning {
    background-color: #fdac14!important;
}

.bg-info {
    background-color: #00bcd4!important;
}

.bg-light {
    background-color: #F5F5F5!important;
}