main.scss

// Colour Palette
$light-blue-theme: #EFFAFD;
$medium-blue-theme: #4A8BDF;
$medium-blue-theme-clear:#4a8bdf33;
$bold-blue-theme:#061A40;
$bold-red-theme: #A0006D;
$medium-red-theme: #EA4DAA;
$bold-red-theme-clear: #a0006d1c;

$bold-yellow-accent: #FBD078;
$bold-yellow-accent-clear: #fbcf7843;
$bold-green-accent: #20D39E;
$bold-green-accent-clear: #20d39d4e;
$bold-red-accent: #FF4143;

$solid-black-font:#0A090C;
$solid-white-font: #ffffff;
$bold-blue-font:#010B3F;
$solid-white-font-clear: #ffffff76;

// Font import
@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
$header-font-family: 'Unbounded', Georgia, sans-serif;
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: $bold-blue-theme;
    color: $solid-white-font;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px 40px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: $header-font-family;
    position: relative;
    cursor: default;
}
.text-unmuted {
    color: $bold-red-theme;
    opacity: 0.5;
    cursor: default;
}

.intext-strong {
    color:$bold-yellow-accent;
}

#technical-skills-grid div,
#professional-skills-grid div{
    text-align: left;
    padding: 5px ;
}
#technical-skills-grid i, 
#professional-skills-grid i {
    font-size:x-large;
    color: $medium-blue-theme;
    vertical-align: middle;

}

#technical-skills-grid i:hover,
#professional-skills-grid i:hover {
    font-size:x-large;
    color: $bold-red-theme;
}

#profilePicture {
    text-align: center;
    align-self: normal ;
    position: relative;
}

.row.g-0 {
    text-align: center;
    align-self: normal ;
    position: relative;
    overflow: hidden;
}
.sliding-background-wrapper {
    overflow: hidden;
}
.sliding-background {
    opacity: 0.5;
    background: url(programming-by-mohammad-rahmani-unsplash.jpg) repeat;
    background-size: cover;
    height: 2000px;
    width: 100%;
    position: absolute;
    animation: slide 60s linear infinite;
    z-index: -6;
}

@keyframes slide{
    0%{
      transform: translate3d(0, 0, 0);
    }
    100%{
      transform: translate3d(0, -1000px, 0);
    }
  }

#profilePictureTextContainer {
    padding: 20px 40px;
    cursor: default;
}

#profilePictureTextContainer p{
    font-size: smaller;
    
}

// Wiggle Transformation for #profilePictureImage.hover function in main.js
.wiggle {
    animation: wiggle 0.5s ease-in-out;
    transform-origin: center;
  }
  
  @keyframes wiggle {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(2deg);
    }
    50% {
      transform: rotate(-2deg);
    }
    75% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

#profilePictureTextContainer h2 {
    text-align: center;
}
.social-button-container {
    font-size: larger;
    padding-bottom: 10px;
}
.social-button-container a {
    text-decoration: none;
}

.social-button-container i {
    margin: 5px 5px;
}

.github-button:link, .linkedin-button:link, .behance-button:link, .email-button:link,
.github-button:visited, .linkedin-button:visited, .behance-button:visited, .email-button:visited, 
.technical-button:link, .professional-button:link, .education-button:link, .experience-button:link,
.technical-button:visited, .professional-button:visited, .education-button:visited, .experience-button:visited {
    color: $medium-blue-theme;
    background-color: $medium-blue-theme-clear;
    border-radius: 100%;
    border: transparent solid 2px;
    text-decoration: none;
    font-size: large;
    padding: 4px 4px;
}

.quick-download-button:link, .quick-download-button:visited {
    color: $bold-yellow-accent;
    background-color: $bold-yellow-accent-clear;
    border-radius: 100%;
    border: transparent solid 2px;
    text-decoration: none;
    font-size: large;
    padding: 4px 4px;
}
.quick-download-button:hover {
    color: $bold-green-accent;
    background-color: $bold-green-accent-clear;
    border:  transparent solid 2px;
    border-bottom: $bold-green-accent solid 2px;
} 

.github-button:hover, .linkedin-button:hover, .behance-button:hover, .email-button:hover,
.technical-button:hover, .professional-button:hover, .experience-button:hover, .education-button:hover {
    color: $bold-red-theme;
    background-color: $bold-red-theme-clear;
    border:  transparent solid 2px;
    border-bottom: $bold-red-theme solid 2px;
} 


#profilePictureImage {
    padding-top: 20px;
    width: 35%;
    opacity: 0.3; 
    display: none;
}

div.col.about-me-box {
    background-color: $medium-blue-theme-clear;
    color: $solid-white-font;
    padding: 20px 40px;
    // margin: 40px 0px;
    position: relative;
    text-align: left;

}

div.col.about-me-box h2 {
    color: $medium-blue-theme;
}

#accordionCurriculumVitae {
    margin: 40px 0px;
    padding: 0px 0px;
    width: 100%;
    background-color: $medium-blue-theme-clear;
    border-color: transparent;
}

.accordion, .accordion-item, .accordion-header, dl, .accordion-button {
    background-color: transparent;
    color: $solid-white-font;
}

div.accordion-body, div.accordion {
    // background-color: $medium-blue-theme-clear;
    color: $solid-white-font;
}

#headingFiveDownload {
    margin-top: 0;
    background-image: none;
}

.accordion-button.collapsed {
    border-left: 5px solid transparent;
    border-collapse: collapse;
}

.accordion-button::after {
    background-image: url(chevron-down.png);
}
.accordion-button:not(.collapsed)::after {
    background-image: url(chevron-down.png);
}

.accordion-button:not(.collapsed) {
    background-color: $medium-blue-theme-clear;
    box-shadow: inset 0 -1px 0 $medium-blue-theme-clear;
    color: $medium-blue-theme;
    border-left: 5px solid $medium-blue-theme;
}

.accordion-button:focus {
    // border-color: $medium-blue-theme-clear;
    box-shadow: 1px 2px 3px $medium-blue-theme-clear;
}

.accordion-button.collapsed:hover {
    background-color: $medium-blue-theme-clear;
    border-left: 5px solid $medium-blue-theme-clear;
}

#headingFiveDownload .accordion-button.collapsed:hover {
    color: $solid-white-font;
    border-left: 5px solid $bold-red-theme;
    background-color: $bold-red-theme-clear;

}

#headingFiveDownload .accordion-button.collapsed::after {
    background-image: none;
}

h2.accordion-header i,
#headingFiveDownload i {
    padding-left: 10px;
    color: $bold-red-theme;
}
#headingFiveDownload i {
    color: $bold-red-theme;
}

p.education-qualification, 
p.education-place,
p.education-description,
ul.education-list {
    margin: 0 auto;
    padding: 0 auto;
}
p.education-qualification {
    font-weight: bold;
}
p.education-place {
    font-weight: lighter;
}

// Experience Styling
.experience-date {
    line-height: 100%;
    text-align: left;
}
// .fa-bars-staggered,
.experience-date .fa-arrow-up-long {
    display: block;
    margin:0;
    padding:0;
    padding :0.2em 1.5em;
    color: $bold-red-theme;
}
p.experience-title, 
p.experience-place,
p.experience-description,
ul.experience-list {
    margin: 0 auto;
    padding: 0 auto;
}

#headingFiveDownload a {
    text-decoration: none;
}
footer {
    text-align: center;
    color: $medium-blue-theme;
}
p.last-updated {
    font-size: smaller;
    color:$medium-blue-theme;
    text-align: center;
    text-decoration: underline;
    cursor: default;
}