/* Custom CSS animation */
@keyframes barBounce {
  0% {
    transform-origin:center left;
    transform:scaleX(0);
    opacity:1;
  }

  10% {
    transform-origin:center left;
    transform:scaleX(0.15);
    opacity:1;
  }

  20% {
    transform-origin:center left;
    transform:scaleX(0.3);
    opacity:1;
  }

  30% {
    transform-origin:center left;
    transform:scaleX(0.45);
    opacity:1;
  }

  40% {
    transform-origin:center left;
    transform:scaleX(0.6);
    opacity:1;
  }

  50% {
    transform-origin:center left;
    transform:scaleX(0.75);
    opacity:1;
  }

  60% {
    transform-origin:center left;
    transform:scaleX(0.90);
    opacity:1;
  }

  70% {
    transform-origin:center left;
    transform:scaleX(1.05);
    opacity:1;
  }

  80% {
    transform-origin:center left;
    transform:scaleX(0.95);
    opacity:1;
  }

  90% {
    transform-origin:center left;
    transform:scaleX(1.03);
    opacity:1;
  }

  100% {
    transform-origin:center left;
    transform:scaleX(1);
    opacity:1;
  }

}

.barBounce {
  animation-name: bounceInDown;
}


/* Credits to @daneden.github.io */
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

/* Materialize buttons custom color hover fix */
.btn {
  overflow: hidden;
}
.btn:hover:before {
  opacity:1;
}

.btn:before {
    content: '';
    opacity: 0;
    background-color: rgba(0,0,0,.1);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: opacity .2s;
}

/* Footer fix */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}

/* CSS rules beginning */
body {
    background-image: url("../images/bg/bg2.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

#home_body {
	overflow-x:hidden;
}

.sidenav-header img {
  max-width: 20vw;
  padding-top: 10px !important;
}

.sidenav-header h4 {
  padding-bottom: 10px;
  margin-top: 0px !important;
}

#sidenav-mobile {
    width:40vw;
}

.card-title {
  font-size: 200% !important;
  padding-bottom: 10px;
}

.bold {
  font-weight: bold;
}

.social-icons {
  padding-top: 5px;
}

.social-icons a {
  padding-left: 5px;
  padding-right: 5px;
}

blockquote {
  margin: 20px 0;
  padding-left: 1.5rem;
  border-left: 5px solid #64b5f6; /* Just change the color value and that's it*/
  text-align: justify;
}

#main-page {
  margin-top:50px;
}


@media only screen and (max-width : 992px) {
  #main-page > div > div {
    height:initial;
  }
  #main-page {
    margin-top:initial;
  }

  #main-page blockquote {
    font-size: 2vw;
  }
}

@media only screen and (max-width : 600px) {
  #main-page blockquote {
    font-size: 2.5vw;
  }
}

.flag-title {
  font-weight: bold;
  font-size: 110%;
}

.flag-caption {
  padding-top: 10px;
  font-size: 90%;
  text-align: center;
}

.link-hide {
  text-decoration: none;
}

.skill-col {
  width:50% !important;
}

.determinate {
  animation: barBounce 0.7s;
  animation-fill-mode: forwards;
  opacity:0;
}

.skill-col:nth-of-type(2) > div:nth-child(2) > .determinate {
  animation-delay: 0.82s;
}

.skill-col:nth-of-type(2) > div:nth-child(4) > .determinate {
  animation-delay: 0.95s;
}

.skill-col:nth-of-type(2) > div:nth-child(6) > .determinate {
  animation-delay: 1.07s;
}

.skill-col:nth-of-type(2) > div:nth-child(8) > .determinate {
  animation-delay: 1.11s;
}

.skill-col:nth-of-type(3) > div:nth-child(2) > .determinate {
  animation-delay: 1.29s;
}

.skill-col:nth-of-type(3) > div:nth-child(4) > .determinate {
  animation-delay: 1.34s;
}

.skill-col:nth-of-type(3) > div:nth-child(6) > .determinate {
  animation-delay: 1.47s;
}

.skill-col:nth-of-type(3) > div:nth-child(8) > .determinate {
  animation-delay: 1.58s;
}


div.nav-wrapper > ul:first-of-type > li:first-child {
  animation: bounceInDown 0.7s;
}

.nav-wrapper > ul:first-of-type > li:nth-child(2) {
  animation: bounceInDown 0.9s;
}

.nav-wrapper > ul:nth-of-type(2) > li:first-child {
  animation: bounceInDown 1.3s;
}

.nav-wrapper > ul:nth-of-type(2) > li:nth-child(2) {
  animation: bounceInDown 1.5s;
}

#main-page > div:first-child {
  animation:bounceInLeft 1.7s;
}

#main-page > div:nth-child(2) {
  animation:bounceInRight 1.9s;
}

#main-page > div:nth-child(3) {
  animation:bounceInRight 1.9s;
}

/* Resume */
#resume_pdf {
	width:60vw;
	margin-left:20vw;
	height:87vw;
}

@media only screen and (max-width : 992px) {
  #resume_pdf {
  	width:90vw;
  	margin-left:5vw;
  	height:132vw;
    }
}

/* Skills */
div#skills > div.col:not(:first-child) > div.card {
  height:40vw;
  font-size:0.9vw;
}

#skills_intro > .center {
  font-size: 0.9vw;
}

#skills_quick_link > a {
  margin-top:10px;
}

#skills .card-image > div.card-title {
text-shadow: 1px 1px 2px black, 0 0 1px grey;
}

#skills .card img {
  width:100%;
}

@media only screen and (max-width : 992px) {
  div#skills > div.col:not(:first-child) > div.card {
    height:80vh;
    font-size:4vw;
  }

  #skills_intro > .center {
    font-size: 4vw;
  }
}

/* Footer */
#footer-social {
  display: flex;
  flex-direction: column;
}

#footer-social a {
  margin-bottom: 3px;
}

#footer-social span {
  margin-right: 5px;
}

.page-footer ul {
  margin-top:0;
}

#footer-links {
  margin-left:10px;
}

.footer-copyright.row {
  margin-bottom: 0px;
}

/* Languages */
#languages > div > div {
  min-height:85vh;
}

/* Meant to be used with flowtext */
.readableText {
  font-size:115%;
  text-align:justify-all;
}

.italic {
  font-style: italic;
}

.info {
  text-decoration: underline dotted;
}

.retourLigne {
  margin-top: 2vw;
}

.friendBtn {
  margin-bottom: 20px;
  width: 200px;
  align-items: center;
}

#friendList {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.github-btn {
  font-size:150%;
}