/* <--- index page --->*/

/*Nav Section*/
nav {
  width: 100%;
  background-color: hsl(42, 63%, 48%);
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 1.2em;
  font-family: Proza Libre, sans-serif;
}

nav a {
  border-bottom: none;
  box-shadow: none;
  color: seashell;
  padding: 0.625rem;
  transition-property: color;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
  transition-delay: 300ms;
}

nav a:hover {
  color: #000;
}

nav img {
  width: 15.625rem;
  vertical-align: middle;
}

/* nav and stickly class at the same time */
.sticky {
  position: fixed;
  background-color: hsla(42, 63%, 48%, 0.95);
}

.fancy {
  display: none;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  nav {
    flex-wrap: wrap;
    padding: 0.3125rem;
  }

  nav .link,
  nav .myName nav .date {
    width: 100%;
    text-align: center;
    margin: 0.25em 0;
    order: 2;
  }

  nav div {
    padding: 0;
    margin: 0;
  }

  nav a {
    padding: 0.125rem 0.3125rem;
    border-bottom: none;
    box-shadow: none;
    color: #000;
  }

  nav a:hover {
    color: seashell;
  }
}

/* Loading on Scroll */

.section {
  /* padding: 15rem 3rem; */
  /* border-top: 1px solid #ddd; */

  transition: transform 1s, opacity 1s;
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

body {
  background-color: #f3f3f3;
}

/*main start*/
.start {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: calc(100vh - 50px);
  background: url(../images/background-desktop.jpg) no-repeat 50% fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  o-background-size: cover;
}

/* @media (max-width: 991px) {
  .start {
    padding: 25px;
  }

  .start-content h2 {
    font-size: 1rem;
  }

  .start-content h3 {
    font-size: 14px;
  }
} */

@media (min-width: 20rem) and (max-width: 48rem) {
  .start {
    background: url(../images/background-mobile.jpg);
    background-size: calc(100vh - 100px);
    height: calc(100vh - 100px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    o-background-size: cover;
  }
}

.start-content {
  background-color: hsla(209, 61%, 16%, 0.8);
  padding: 1.25rem;
  max-width: 59.375rem;
}
.start-content h2 {
  font-family: Cormorant Garamond, sans-serif;
  font-weight: 600;
  font-size: 3.75rem;
  color: #41fdfe;
}

.start-content h3 {
  color: seashell;
  line-height: 1.3;
  font-family: Proza Libre, sans-serif;
  font-size: 1.875rem;
}

@media screen and (max-width: 1050px) {
  .start-content h2 {
    font-size: 1.875rem;
  }

  .start-content h3 {
    font-size: 1.5625rem;
  }
}

/*Featured Projects*/
.projects-title {
  margin-bottom: 1rem;
  text-align: center;
}

.projects-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.underline {
  width: 5rem;
  height: 0.25rem;
  background-color: hsl(42, 63%, 48%);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 65.625rem) {
  .projects-title h2 {
    line-height: 1;
    font-size: 1.5625rem;
  }
}

@media screen and (max-width: 84.375rem) {
  .container {
    max-width: 90%;
  }
}

@media screen and (max-width: 96.875rem) {
  .container {
    max-width: 80%;
  }
}

.container {
  max-width: 70%;
  margin: 0 auto;
  font-family: Proza Libre, sans-serif;
}

.featured-projects {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: space-between;
}

@media screen and (max-width: 62.5rem) {
  .featured-projects {
    flex-direction: column;
  }

  .featured-projects .featured-project {
    padding: 1.25rem;
    width: 100%;
    margin: 1.25rem 0;
    height: 15.625rem;
  }
}

.featured-project:first-child {
  border: 5px solid rgb(1, 12, 63);
}
.featured-project:first-child .explore {
  color: seashell;
  background-color: hsl(209, 61%, 16%);
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project:first-child .explore:hover {
  background-color: #6c41ec;
}

.featured-project:nth-child(2) {
  border: 0.3125rem solid hsl(42, 63%, 48%);
}
.featured-project:nth-child(2) .explore {
  background-color: hsl(42, 63%, 48%, 0.6);
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project:nth-child(2) .explore:hover {
  background-color: hsl(42, 63%, 48%, 1);
}

.featured-project:nth-child(3) {
  border: 0.3125rem solid hsl(209, 61%, 16%);
}
.featured-project:nth-child(3) .explore {
  color: seashell;
  background-color: hsl(209, 61%, 16%);
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project:nth-child(3) .explore:hover {
  background-color: #639eff;
}

.featured-project h2 {
  font-family: Cormorant Garamond, sans-serif;
  font-size: 2rem;
}

.featured-project {
  width: 30%;
  padding: 2.5rem;
  height: 18.75rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

.featured-project a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.explore {
  width: 9.375rem;
  margin: 0 auto;
  display: block;
  padding: 0.3125rem 1.25rem;
  font-weight: 700;
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 65.625rem) {
  .featured-project h2 {
    font-size: 1.5rem;
  }
}

/*skills title*/
.skills-title {
  margin-bottom: 1rem;
  text-align: center;
}

.skills-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

@media screen and (max-width: 65.625rem) {
  .skills-title h2 {
    font-size: 1.5625rem;
  }
}

.skills {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  background-color: hsl(45, 90%, 88%);
}

.flex-skill {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 1.875rem;
}

.flex-skill h3 {
  font-size: 2rem;
  font-family: Proza Libre, sans-serif;
}

.skill p {
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 65.625rem) {
  .flex-skill h3 {
    font-size: 1.25rem;
  }

  .skill p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 62.5rem) {
  .skills {
    flex-direction: column;
  }

  .skills .skill {
    padding: 1.25rem;
    width: 100%;
    margin: 1.25rem 0;
  }
}

.skill {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 1.25rem;
}

.skill p {
  color: hsl(43, 86%, 17%);
  margin-bottom: 0.5rem;
  text-align: start;
}

.skill-container {
  background-color: #fff;
  height: 1rem;
  width: 100%;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  position: relative;
}

.skill-value-htmlCss {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 80%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-value-javascript {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 70%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-value-react {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 60%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-value-node {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 50%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-value-express {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 50%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-value-firebase {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(42, 78%, 60%);
  height: 100%;
  width: 60%;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.skill-text-htmlCss {
  position: absolute;
  top: -2rem;
  left: 80%;
  transform: translateX(-50%);
}

.skill-text-javascript {
  position: absolute;
  top: -2rem;
  left: 70%;
  transform: translateX(-50%);
}

.skill-text-react {
  position: absolute;
  top: -2rem;
  left: 60%;
  transform: translateX(-50%);
}

.skill-text-node {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.skill-text-express {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.skill-text-firebase {
  position: absolute;
  top: -2rem;
  left: 60%;
  transform: translateX(-50%);
}

.services-title {
  /* margin-bottom: 1rem; */
  text-align: center;
}

.services-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

@media screen and (max-width: 65.625rem) {
  .services-title h2 {
    font-size: 1.5625rem;
  }
}

/*Other Experience in index page*/

.other-experience {
  width: 100%;
  margin: 1.875rem auto;
  text-align: center;
}

.slider {
  max-width: 70rem;
  height: 25rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slider__btn {
  position: absolute;
  top: 30%;
  z-index: 10;
  outline: none;
  border: none;
  background: rgba(143, 114, 42, 0.6);
  font-family: Proza Libre, sans-serif;
  color: #333;
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 3%;

  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 3%;

  transform: translate(50%, -50%);
}

.dotted {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #b9b9b99f;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;

  /* Only necessary when overlying images */
  /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  /* background-color: #fff; */
  background-color: rgba(143, 114, 42, 0.6);
  outline: none;
  border: none;
  opacity: 1;
}

.experience-article {
  /* border: 0.3125rem solid hsl(43, 86%, 17%); */
  margin-top: 3.125rem;
  padding: 1.25rem;
  position: relative;
}

.experience-article h3 {
  font-size: 1.875rem;
  font-family: Proza Libre, sans-serif;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .experience-article h3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 65.625rem) {
  .experience-article h3 {
    font-size: 18px;
  }
  .other-experience {
    /* width: 100%; */
    margin: 2rem auto;
    text-align: center;
  }

  .slider__btn {
    height: 2rem;
    width: 2rem;
    font-size: 1rem;
  }

  .slider__btn--left {
    left: 4.5%;

    transform: translate(-50%, -50%);
  }

  .slider__btn--right {
    right: 4.5%;

    transform: translate(50%, -50%);
  }
}

.experience-article a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.experience-article .read-more {
  color: seashell;
  width: 9.375rem;
  background-color: rgba(143, 114, 42, 0.6);
  margin: 0 auto;
  display: block;
  padding: 0.3125rem 1.25rem;
  font-weight: 700;
  font-family: Proza Libre, sans-serif;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

@media (max-width: 991px) {
  .slider-container {
    padding: 25px;
    width: 100%;
  }

  .slide {
    width: 90%;
  }

  .slide h3 {
    font-size: 1rem;
  }
  .slide .read-more {
    font-size: 12px;
  }
}

.experience-article .read-more:hover {
  background-color: hsl(43, 86%, 17%, 1);
}

@media screen and (max-width: 1050px) {
  .experience-article .read-more {
    font-size: 1rem;
  }
}

@media screen and (max-width: 65.625rem) {
  .featured-project .explore {
    font-size: 1rem;
    width: 8.125rem;
  }
}

/*<-- Other-Experience Page--->*/

.experience {
  font-size: 1.25rem;
  line-height: 1.7;
  font-family: Proza Libre, sans-serif;
}

@media only screen and (max-width: 810px) {
  .banner,
  .companies h2 {
    font-size: 14px;
  }

  .navigation-button {
    padding-left: 8rem;
  }

  .banner {
    padding-left: 10%;
    padding-right: 0;
    font-size: 14px;
    font-weight: 400;
  }

  .left-nav .link {
    padding-left: 5rem;
    font-size: 1rem;
  }

  .experience {
    padding-left: 10%;
  }
}

@media only screen and (max-width: 540px) {
  .experience {
    padding-left: 8%;
  }

  .banner,
  .companies h2 {
    font-size: 12px;
    font-weight: 500;
  }
}

/* Navigation Bar */

header {
  position: fixed;
  z-index: 5;
  left: -16.8em;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 5rem;
  padding-right: 2rem;
  background: url('../images/nav_background.jpg') center center repeat;
  font-family: 'Proza Libre', sans-serif;
  font-size: 18px;
  overflow-y: scroll;
  line-height: 2.2;
  font-weight: bold;
  color: #142033;
  transition-property: left;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: 300ms;
}

header:hover {
  left: 0;
}

nav .hover-content {
  margin-right: 3em;
}

header h2 {
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 2.6em;
  font-weight: bold;
  color: #639eff;
}

header h3 {
  padding-bottom: 5px;
  margin: 0;
}

header ol {
  list-style: upper-roman outside;
}

header a {
  text-decoration: none;
  box-shadow: none;
  color: inherit;

  transition-property: color;
  transition-duration: 800ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}

header a p {
  margin-left: 3px;
  padding: 0;
}

header a:hover,
header a.active {
  color: #639eff;
}

.left-myName {
  padding-left: 7.5rem;
}

@media only screen and (max-width: 500px) {
  header {
    display: none;
  }
}

/* other experience body */
.navigation-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.button-home {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 21rem;
  background-color: #639eff;
  opacity: 0.3;
  padding: 0 2rem;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 300ms;
}

.button-home .action {
  color: #ffffff;
  font-size: 3rem;
  font-weight: bold;
  font-family: Proza Libre, sans-serif;
}

.button-home:hover {
  opacity: 1;
}

@media only screen and (max-width: 930px) {
  .button-home {
    width: auto;
    padding: 1rem 2rem;
  }

  .button-home .action {
    display: none;
  }
}

.experience h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2.625rem;
  text-align: center;
  max-width: 90%;
  margin: 2.5rem auto;
}

.experience span {
  color: #61dbfb;
}

.companies h2 {
  font-size: 1.875rem;
  text-align: left;
  margin-left: 0;
}

.companies h3 {
  font-size: 1.5625rem;
}

.company {
  color: #61dbfb;
  font-size: 1.5625rem;
  transition-property: color, font-size;
  transition-duration: 800ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}

.company:hover {
  text-decoration: underline;
  color: hsl(43, 86%, 17%);
  font-size: 1.875rem;
}

.description {
  margin-left: 1.875rem;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .experience h2 {
    font-size: 1.25rem;
    margin-left: 0;
    text-align: left;
    width: 100%;
  }

  .company:hover {
    font-size: 1.5625rem;
  }

  .companies h2 {
    font-size: 1.25rem;
  }

  .companies h3 {
    font-size: 1.25rem;
  }

  .company {
    font-size: 1.25rem;
  }

  .description {
    font-size: 1rem;
  }
}

@media screen and (max-width: 65.625rem) {
  .experience .button {
    font-size: 1rem;
    width: 6.25rem;
  }

  .experience h2 {
    font-size: 1.5625rem;
    margin-bottom: 0.75rem;
  }

  .company:hover {
    font-size: 1.5625rem;
  }

  .companies h2 {
    font-size: 1.5625rem;
    margin-bottom: 5px;
  }

  .companies h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
  }

  .company {
    font-size: 1.25rem;
  }

  .description {
    font-size: 1rem;
  }
}

/* My Projects in other experience page */

.featured-projects-o {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: space-between;
}

@media screen and (max-width: 1000px) {
  .featured-projects-o {
    flex-direction: column;
  }

  .featured-projects-o .featured-project-o {
    padding: 1.25rem;
    width: 100%;
    margin: 1.25rem 0;
    height: 15.625rem;
  }
}

.featured-project-o:first-child {
  border: 5px solid hsl(42, 63%, 48%);
}
.featured-project-o:first-child .explore {
  background-color: hsl(42, 63%, 48%, 0.6);
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project-o:first-child .explore:hover {
  background-color: hsl(42, 63%, 48%);
}

.featured-project-o:nth-child(2) {
  border: 0.3125rem solid #41fdfe;
}
.featured-project-o:nth-child(2) .explore {
  background-color: #41fdfe;
  opacity: 0.6;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project-o:nth-child(2) .explore:hover {
  opacity: 1;
}

.featured-project-o:nth-child(3) {
  border: 0.3125rem solid hsl(209, 61%, 16%);
}
.featured-project-o:nth-child(3) .explore {
  color: seashell;
  background-color: hsl(209, 61%, 16%, 0.6);
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project-o:nth-child(3) .explore:hover {
  background-color: hsl(209, 61%, 16%);
}

.featured-project-o h2 {
  font-size: 2rem;
}

.featured-project-o {
  width: 30%;
  padding: 2.5rem;
  height: 18.75rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

.featured-project-o a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .featured-project-o h2 {
    text-align: center;
    font-size: 1.5625rem;
  }

  .button {
    width: 150px;
  }

  .experience p {
    font-size: 1rem;
  }
}

@media (min-width: 20rem) and (max-width: 1050px) {
  .featured-project-o h2 {
    text-align: center;
    font-size: 20px;
  }

  .featured-project-o .explore {
    text-align: center;
    font-size: 1rem;
    width: 130px;
  }
}

/* <-- About Page--> */

.my-name {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  text-align: center;
}
.portrait {
  display: flex;
  width: 100%;
  margin: 100px auto;
  padding: 30px 0;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.portrait img {
  width: 350px;
  border: 10px solid hsl(42, 63%, 48%);
}

.about {
  line-height: 1.7;
  font-family: Proza Libre, sans-serif;
}
.about h2 {
  font-size: 30px;
  text-align: left;
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 1050px) {
  .about h2 {
    font-size: 25px;
  }
}

.about ul {
  margin-left: 30px;
  font-size: 20px;
}

.about p {
  font-size: 23px;
  font-family: Proza Libre, sans-serif;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .portrait img {
    width: 250px;
    border-radius: 100%;
    height: 250px;
    margin-bottom: 0;
  }

  .portrait {
    margin: 0;
    padding: 0;
  }

  .my-name {
    font-size: 1rem;
  }

  .about p {
    font-size: 1.25rem;
  }

  .about h2 {
    font-size: 1.25rem;
    text-align: left;
  }

  .about ul {
    font-size: 1.25rem;
  }
}

.education-title {
  margin-bottom: 1rem;
  text-align: center;
}

.education-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

/*Education section in about page*/

.education-section {
  max-width: 100%;
  margin: 1.875rem auto;
  text-align: center;
}

.education-article {
  border: 0.3125rem solid #41fdfe;
  margin-top: 3.125rem;
  padding: 1.25rem;
  position: relative;
}

.education-article h3 {
  font-size: 1.8rem;
  font-family: Proza Libre, sans-serif;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .education-article h3 {
    font-size: 1.25rem;
  }
}

.education-article a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.education-article .explore {
  color: hsl(43, 86%, 17%);
  background-color: #41fdfe;
  opacity: 0.6;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.education-article .explore:hover {
  opacity: 1;
}

/* <--- Education Page ---> */

@media screen and (max-width: 84.375rem) {
  .education {
    max-width: 90%;
  }
}

@media screen and (max-width: 96.875rem) {
  .education {
    max-width: 80%;
  }
}

.education {
  max-width: 70%;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.7;
  font-family: Proza Libre, sans-serif;
}

.education h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 30px;
  text-align: center;
  max-width: 90%;
  margin: 40px auto;
}

.education p {
  font-family: Proza Libre, sans-serif;
  font-size: 30px;
  text-align: center;
  max-width: 90%;
  margin: 40px auto;
}

.bootcamp a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
  color: #639eff;
  transition-property: color;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}

.bootcamp a:hover {
  color: #306acc;
}

.institutions {
  display: flex;
  width: 100%;
  flex-direction: row;
}

.institution {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 1.875rem;
}

.school-logo {
  height: 28.125rem;
  width: 30.625rem;
}

.school-title {
  margin-bottom: 1rem;
  text-align: center;
}

.school-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.institution a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.institution ul {
  margin-left: 30px;
  font-size: 20px;
  margin-bottom: 10px;
  font-family: Proza Libre, sans-serif;
}

.institutions {
  margin-bottom: 5px;
  padding-bottom: 0px;
}

.certification-title {
  margin-bottom: 1rem;
  text-align: center;
  font-family: Proza Libre, sans-serif;
}

.certification-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.cert-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
}

.certifications {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.certification {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin: 0 auto;
}

.certification p {
  margin-bottom: 2px;
  font-size: 1.4rem;
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 768px) {
  .school-title h2 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1050px) {
  .certification h3 {
    font-size: 25px;
  }

  .certification p {
    font-size: 1rem;
  }

  .education h2 {
    font-size: 22px;
  }

  .education .button {
    width: 130px;
    font-size: 20px;
  }
}

@media screen and (max-width: 62.5rem) {
  .certifications {
    flex-direction: column;
  }

  .institutions {
    flex-direction: column;
  }

  .button {
    width: 9.375rem;
    font-size: 20px;
  }

  .education h2 {
    font-size: 20px;
  }

  .education p {
    font-size: 18px;
    margin-bottom: 0.75rem;
  }

  .school-logo {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
  }

  .institution h2 {
    font-size: 25px;
  }

  .institution ul {
    font-size: 20px;
  }

  .certification-title h2 {
    font-size: 25px;
  }
}

/* <--- Projects Page---> */

/* Banner Section */

.projects-banner {
  padding: 3.125rem 13rem;
  background-color: #142033;
  text-align: center;
  font-weight: bold;
  line-height: 2.1;
  color: #b3d0ff;
}

.projects-banner h1 {
  font-size: 6rem;
  line-height: 1;
  font-weight: 500;
  color: #66a1ff;
  font-family: Cormorant Garamond, sans-serif;
}

.projects-banner em {
  font-size: 1.5rem;
  font-style: italic;
  font-family: Cormorant Garamond, sans-serif;
}

.projects-banner h2 {
  font-size: 3rem;
  font-family: Proza Libre, sans-serif;
}

@media only screen and (max-width: 810px) {
  .projects-banner {
    padding-left: 20%;
    padding-right: 0%;
  }

  .projects-banner h1 {
    font-size: 4rem;
  }

  .projects-banner h2 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 540px) {
  .projects-banner {
    padding-left: 10%;
    padding-right: 0%;
  }

  .projects-banner h1 {
    font-size: 1.5rem;
  }

  .projects-banner h2 {
    font-size: 1.2rem;
  }
}

.underline-projects {
  width: 5rem;
  height: 0.25rem;
  background-color: rgba(1, 12, 63, 0.8);
  margin-left: auto;
  margin-right: auto;
}

.underline-skills {
  width: 5rem;
  height: 0.25rem;
  background-color: hsl(42, 78%, 60%);
  margin-left: auto;
  margin-right: auto;
}
/* Featured projects section in Projects page */

.featured-projects-p {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: space-between;
}

.featured-project-p {
  width: 30%;
  padding: 2.5rem;
  height: 18.75rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

@media screen and (max-width: 1000px) {
  .featured-projects-p {
    flex-direction: column;
  }

  .featured-projects-p .featured-project-p {
    padding: 1.25rem;
    width: 100%;
    margin: 1.25rem 0;
    height: 15.625rem;
  }
}

.featured-project-p:first-child,
.featured-project-p:nth-child(2),
.featured-project-p:nth-child(3) {
  background-color: rgba(1, 12, 63, 0.8);
  box-shadow: 0 4px 2px 2px #000000;
  display: block;
  color: #b3d0ff;
  padding: 1.25rem;
}
.featured-project-p:first-child .explore,
.featured-project-p:nth-child(2) .explore,
.featured-project-p:nth-child(3) .explore {
  font-family: Proza Libre, sans-serif;
  cursor: pointer;
  width: 10rem;
  padding: 0.77rem 0;
  border-radius: 54px;
  border-width: 0px;
  box-shadow: none;
  border-bottom: none;
  margin-top: 1.27rem;
  background-color: #6c41ec;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.featured-project-p:first-child .explore:hover,
.featured-project-p:nth-child(2) .explore:hover,
.featured-project-p:nth-child(3) .explore:hover {
  background-color: rgba(108, 65, 233, 0.7);
}

@media only screen and (max-width: 810px) {
  .featured-projects-p {
    padding-left: 20%;
    padding-right: 0%;
  }
}

@media only screen and (max-width: 540px) {
  .featured-projects-p {
    padding-left: 10%;
    padding-right: 0%;
  }
}

/* Blogs Section */

.blogs-title {
  /* margin-bottom: 1rem; */
  text-align: center;
}

.blogs-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

@media screen and (max-width: 65.625rem) {
  .blogs-title h2 {
    font-size: 1.5625rem;
  }
}

.blog-article-i {
  border: 0.3125rem solid rgba(1, 12, 63, 0.8);
  margin-top: 3.125rem;
  padding: 1.25rem;
  position: relative;
}

.blog-article-i a {
  color: #000;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.blog-article-i .explore {
  color: seashell;
  width: 9.375rem;
  background-color: rgba(1, 12, 63, 0.8);
  margin: 0 auto;
  display: block;
  padding: 0.3125rem 1.25rem;
  font-weight: 700;
  font-family: Proza Libre, sans-serif;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 200ms;
}

.blog-article-i .explore:hover {
  background-color: rgba(108, 65, 233, 0.7);
}

@media screen and (max-width: 1050px) {
  .blog-article-i .explore {
    font-size: 1rem;
  }
}

/* Skills Section */

.skills {
  padding-left: 10%;
}

@media only screen and (max-width: 810px) {
  .skills,
  .skills h3,
  .other-e {
    padding-left: 20%;
    padding-right: 0%;
  }
}

@media only screen and (max-width: 540px) {
  .skills,
  .skills h3,
  .other-e {
    padding-left: 10%;
    padding-right: 0%;
  }
}

/* Technical Support Section in Projects Page  */

.support-article-projects {
  border: 0.3125rem solid rgba(1, 12, 63, 0.8);
  margin-top: 3.125rem;
  padding: 1.25rem;
  position: relative;
}

.support-article-projects h3,
.blog-article-i h3 {
  font-size: 1.875rem;
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 810px) {
  .support-article-projects h3,
  .blog-article-i h3 {
    font-size: 20px;
  }
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .support-article-projects h3,
  .blog-article-i h3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 1050px) {
  .support-article-projects h3,
  .blog-article-i h3 {
    font-size: 25px;
  }
}

.support-article-projects a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.support-article-projects .explore {
  color: seashell;
  background-color: rgba(1, 12, 63, 0.8);
  /* width: 200px; */
  width: 9.375rem;
  margin: 0 auto;
  display: block;
  padding: 0.3125rem 1.25rem;
  font-weight: 700;
  font-family: Proza Libre, sans-serif;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 300ms;
}

.support-article-projects .explore:hover {
  background-color: rgba(108, 65, 233, 0.7);
}

@media screen and (max-width: 1050px) {
  .support-article-projects .explore {
    font-size: 1rem;
  }
}

/* <--- Experience Page ---> */

@media screen and (max-width: 84.375rem) {
  .experience {
    max-width: 90%;
  }
}

@media screen and (max-width: 96.875rem) {
  .experience {
    max-width: 80%;
  }
}

.experience {
  max-width: 70%;
  margin: 0 auto;
}

.languages-title {
  margin-bottom: 1rem;
  text-align: center;
}

.languages-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.language a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.framework a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.frameworks-title {
  margin-bottom: 1rem;
  text-align: center;
}

.frameworks-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.languages,
.frameworks {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.languages img {
  height: 9.375rem;
  width: 12rem;
  padding-bottom: 0.3125rem;
  margin: 0.625rem 0.625rem;
}

.frameworks img {
  height: 9.375rem;
  width: 12rem;

  margin-bottom: 0.625rem;
}

.languages h3,
.frameworks h3 {
  padding: 0.3125rem;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-family: Proza Libre, sans-serif;
}

.professional-article h2,
.personal-article h2 {
  text-align: center;
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

.professional h2,
.personal h2 {
  text-align: left;
}

.button-professional,
.button-personal {
  margin: 2.5rem auto;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 13rem;
  background-color: #142033;
  color: #ffffff;
  opacity: 0.3;
  padding: 0 2rem;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 300ms;
}

.button-professional .action,
.button-personal .action {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: Proza Libre, sans-serif;
}

.button-professional:hover,
.button-personal:hover {
  opacity: 1;
}

.professional-article a,
.personal-article a {
  text-decoration: none;
  box-shadow: none;
  border-bottom: none;
}

.professional,
.personal {
  position: fixed;
  z-index: 10;
  top: -100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 4rem 2rem 4rem;
  background-color: #ffffff;
  box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  font-family: 'Proza Libre', sans-serif;
  font-size: 1.5rem;
  transition-property: top, opacity;
  transition-duration: 2000ms, 3000ms;
  transition-delay: 0s, 1000ms;
  height: 37.5rem;
  margin-bottom: 1.75rem;
  overflow-y: scroll;
}

.professional-article:hover .professional {
  top: 0;
  opacity: 1;
}

.personal-article:hover .personal {
  top: 0;
  opacity: 1;
}

.professional ul,
.personal ul {
  margin-left: 80px;
  font-family: Proza Libre, sans-serif;
}

.support-title {
  margin-bottom: 1rem;
  text-align: center;
}

.support-title h2 {
  font-family: Proza Libre, sans-serif;
  font-size: 2rem;
  margin-bottom: 0.625rem;
}

/*Technical Support article in experience page*/

.support-experience {
  max-width: 100%;
  margin: 1.875rem auto;
  text-align: center;
}

.support-article {
  border: 0.3125rem solid hsl(42, 63%, 48%);
  margin-top: 3.125rem;
  padding: 1.25rem;
  position: relative;
}

.support-article h3 {
  font-size: 1.875rem;
  font-family: Proza Libre, sans-serif;
}

@media screen and (max-width: 810px) {
  .support-article h3 {
    font-size: 25px;
  }
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .support-article h3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 1050px) {
  .support-article h3 {
    font-size: 25px;
  }
}

.support-article a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.support-article .explore {
  color: seashell;
  background-color: hsla(42, 63%, 48%, 0.6);
  width: 200px;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 300ms;
}

.support-article .explore:hover {
  background-color: hsla(42, 63%, 48%);
}

@media screen and (max-width: 1050px) {
  .support-article .explore {
    font-size: 1rem;
  }
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .languages-title h2,
  .frameworks-title h2,
  .support-title h2 {
    text-align: center;
    font-size: 25px;
  }

  .professional-article h2,
  .personal-article h2 {
    font-size: 25px;
  }

  .languages h3,
  .frameworks h3 {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
  }

  .languages img,
  .frameworks img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
  }

  .professional-article:hover .professional {
    overflow-y: scroll;
  }

  .personal-article:hover .personal {
    overflow-y: scroll;
  }

  .button-professional,
  .button-personal {
    margin: 20% 0;
  }
  .professional ul li {
    font-size: 1rem;
  }

  .personal ul li {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 930px) {
  .button-professional,
  .button-personal {
    width: auto;
    padding: 1rem 2rem;
  }

  .button-professional .action,
  .button-personal .action {
    display: none;
  }
}

@media screen and (max-width: 1366px) {
  .professional-article:hover .professional {
    overflow-y: scroll;
  }

  .personal-article:hover .personal {
    overflow-y: scroll;
  }
}

/* <--- Artur-Meyster Page ---> */

@media screen and (max-width: 84.375rem) {
  .artur-article {
    max-width: 90%;
  }
}

@media screen and (max-width: 96.875rem) {
  .artur-article {
    max-width: 80%;
  }
}

.artur-article {
  max-width: 70%;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.7;
  /* font-family: work sans, sans-serif; */
}

.artur-article .a-btn {
  text-decoration: none;
  color: #61dbfb;
  border-bottom: 1px solid #61dbfb;
  box-shadow: none;
  background-color: transparent;
  font-family: Proza Libre, sans-serif;
  transition-property: color;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}

.artur-article .a-btn:hover {
  color: #306acc;
}

.artur-article h2 {
  font-family: Cormorant garamond, sans-serif;
  font-size: 40px;
  text-align: left;
  max-width: 90%;
  margin: 40px auto;
  font-weight: 600;
}

.artur-article a {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
  color: #639eff;
  transition-property: color;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}

.artur-article a:hover {
  color: #306acc;
}

.publisher-cont {
  display: flex;
  max-width: 90%;
  margin: 40px auto;
  font-family: work sans, sans-serif;
  position: relative;
}

.a-publisher {
  display: flex;
  text-decoration: none;
  box-shadow: none;
  align-items: center;
}

.a-avatar {
  margin: 10px auto;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  border: 0;
  max-width: 90%;
}

.artur-name {
  padding: 0 10px;
  color: #666;
  font-size: 1rem;
}
.artur-name b {
  color: #000;
}

.publish-time {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #666;
  font-size: 1rem;
}

.publish-time b {
  color: #000;
}

.artur-article h3 {
  font-family: work sans, sans-serif;
  font-weight: 500;
  font-size: 30px;
  text-align: left;
  max-width: 90%;
  margin: 40px auto;
}

.artur-article p {
  font-family: Proza Libre, sans-serif;
  font-size: 25px;
  text-align: left;
  max-width: 90%;
  margin: 40px auto;
}

@media (max-width: 991px) {
  .artur-article {
    max-width: 100%;
  }
  .artur-article h2 {
    font-size: 25px;
  }

  .artur-name,
  .publish-time {
    font-size: 12px;
  }

  .artur-article h3 {
    font-size: 18px;
    font-weight: 700;
  }

  .artur-article p {
    font-size: 1rem;
  }
}
/* Footer */

footer {
  text-align: center;
  margin: 0 auto;
  bottom: 0;
  padding: 1.875rem;
  width: 100%;
  font-size: 1em;
  background-color: hsl(45, 90%, 88%);
}

footer div {
  padding: 0.3125rem;
}

footer a {
  color: #000;
  padding: 0.625rem;
  box-shadow: none;
  transition-property: color;
  transition-duration: 300ms;
  transition-timing-function: ease-in;
}

footer a:hover {
  color: #306acc;
}

footer img {
  height: 1.25rem;
}

@media only screen and (max-width: 810px) {
  #footer .link,
  #footer .icons,
  #footer .copyright {
    padding-left: 10%;
    font-size: 14px;
  }
}

@media only screen and (max-width: 540px) {
  #footer .link,
  #footer .icons,
  #footer .copyright {
    padding-left: 8%;
    font-size: 12px;
  }
}

/*Contact Page*/

/* .contact {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: calc(100vh - 50px);
  background: url(../images/contact-desktop.jpg) no-repeat 50% fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  o-background-size: cover;
}

@media (min-width: 20rem) and (max-width: 48rem) {
  .contact {
    background: url(../images/contact-mobile.jpg);
    background-size: calc(100vh - 100px);
    height: calc(100vh - 100px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    o-background-size: cover;
  }
}

.contact-content {
  background-color: hsla(209, 61%, 16%, 0.8);
  padding: 1.25rem;
  max-width: 59.375rem;
}
.contact-content h2 {
  font-family: Proza Libre, sans-serif;
  font-weight: 600;
  font-size: 3.75rem;
  color: #41fdfe;
}

@media screen and (max-width: 84.375rem) {
  .my-contacts {
    max-width: 90%;
  }
}

@media screen and (max-width: 96.875rem) {
  .my-contacts {
    max-width: 80%;
  }
}

.my-contacts {
  max-width: 70%;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1.75rem;
}

.flex-contact img {
  width: 2rem;
  height: 2rem;
  padding: 0.3125rem;
}

.flex-contact {
  opacity: 1;
  padding: 0.625rem;
  margin: 0.3125rem 1.25rem;
  color: #000;
  background-color: #e6e6e6;
  flex-basis: 17.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition-property: background-color, color;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  transition-delay: 200ms;
}

.flex-contact:hover {
  color: #61dbfb;
  background-color: seashell;
}

.contact-button {
  border-radius: 0.25rem;
  color: #000;
  display: block;
  font-weight: 700;
  width: 12.5rem;
  padding: 1.25rem;
  margin: 2.5rem auto;
  border: 1px solid #61dbfb;
  text-align: center;
  transition-property: background-color, color, border;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  transition-delay: 200ms;
}

.contact-button:hover {
  background-color: #61dbfb;
  border: 1px solid #61dbfb;
  color: #fff;
}

@media screen and (max-width: 1050px) {
  .contact-content h2 {
    font-size: 1.875rem;
  }
} */

/* AOB 
 .gold-coffee {
  position: absolute;
  height: 4.375rem;
  left: 18.75rem;
  bottom: -30.5rem;
}

.dots {
  position: absolute;
  height: 4.375rem;
  right: 18.75rem;
  bottom: -31.25rem;
}

.arrows {
  position: absolute;
  height: 4.375rem;
  right: 48.125rem;
  bottom: -18.75rem;
}

@media screen and (max-width: 1280px) {
  .gold-coffee,
  .arrows,
  .dots {
    display: none;
  }
}

@media screen and (max-width: 100rem) {
  .gold-coffee {
    position: absolute;
    height: 1.875rem;
    left: 14.375rem;
    bottom: -30.625rem;
  }
}

@media screen and (max-width: 100rem) {
  .arrows {
    position: absolute;
    height: 1.875rem;
    right: 35rem;
    bottom: -16.25rem;
  }
}

@media screen and (max-width: 100rem) {
  .dots {
    position: absolute;
    height: 1.875rem;
    right: 13.75rem;
    bottom: -30.625rem;
  }
} 
*/