/* Fonts and text */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,600;0,900;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');

/* Root */
:root{
    --dark-green: #162419;
    --medium-cyan: #00a6d2;
    --light-cyan: #17bce8;
    --medium-red: #0ABFA5;
    --light-red: #15D6BB;
    --light-green: #6bb56c;
    --medium-green: #3a7438;
    --light-beige: #fdfad7;
    --text-color: #666666;
    --dark-green-transparent: #162419EE;
    --special-font: 'Passion One', sans-serif;
}

body{
  font-family: 'Source Sans Pro', sans-serif;
}

p{
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 2rem;
  color: var(--text-color);
}

/* General elements*/

.header{
  background-color: var(--dark-green);
  padding: 30px 2%;
}

.main_logo{
  margin-top: auto;
  margin-bottom: auto;
}

.container-fluid{
  min-height: 100vh;
  background-color: var(--dark-green);
}

.carousel-img{
  height: 80vh;
  object-fit: cover;
}

.carousel-caption{
  text-align: right;
  right: 8%;
  bottom: 10vh;
}

.carousel-caption h1{
  display: block;
  font-family: var(--special-font);
  color: var(--light-beige);
  font-size: 4rem;
  text-transform: uppercase;
  background-color: var(--dark-green-transparent);
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  /* text-shadow: 1px 1px 1px rgba(0,0,0,0.50); */
}

.text-magenta{
  color: var(--medium-red) !important;
}

.text-cyan{
  color: var(--medium-cyan) !important;
}

.text-dark-green{
  color: var(--dark-green) !important;
}


.carousel-caption p{
  display: block;
  font-weight: 600;
  font-size: 2rem;
  color: var(--light-beige);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.50);
  width: 50vw;
  margin-left: auto;
  background-color: var(--dark-green-transparent);
}

.no-shadows p, .no-shadows h1{
  text-shadow: none;
}

.info-row{
  padding: 5%;
  background-color: var(--light-beige);
}

.info-row h1{
  font-family: var(--special-font);
  /* font-weight: 600; */
  margin-bottom: 20px;
  color: var(--medium-red);
  text-transform: uppercase;
  font-size: 3rem;
}

.info-row p{
  margin-bottom: 1rem;
}

.special-row, .special-row-b{
  background-color: var(--dark-green);
  padding: 5%;
  /* background-image: url('../imgs/special_bg.jpg'); */
  /* background-repeat: repeat-x; */
  background-size: cover;
  /* text-align: center; */
}

.special-row .btn-container, .special-row-b .btn-container{
  display: flex;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h2{
  color: var(--light-green);
  font-family: var(--special-font);
  text-transform: uppercase;
  font-size: 3rem;
}

.special-row p, .special-row-b p{
  color: var(--light-beige);
}

.special-row-b h2{
  text-align: right;
}

.special-row-b p{
  text-align: right;
}

.car-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.caricatures-row {
  background-color: var(--dark-green);
  padding-bottom: 1rem;
  padding-top: 3rem;
}

.caricatures-row h2{
  color: var(--medium-red);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  margin-left: 5%;
  padding-left: 15px;
}

.caricature{
  border: 3px solid var(--dark-green);
  perspective: 1000px;
  min-height: 350px;
  padding: 0;
}

/* This container is needed to position the front and back side */
.caricature-card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.8s;
 transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.caricature:hover .caricature-card-inner {
 transform: rotateY(180deg);
}

/* Position the front and back side */
.caricature-card-front, .caricature-card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden; /* Safari */
 backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.caricature-card-front {
 background-color: var(--medium-green);
 display: flex;
}

.quote-container{
  margin-top: auto;
  margin-bottom: auto;
  padding: 20px;
}

.quote-container h3{
  color: var(--light-beige);
  font-family: var(--special-font);
}

.quote-container h3::before{
  content: "“";

}
.quote-container h3::after{
  content: "”";
}
.quote-container h3::before, .quote-container h3::after{
  font-size: 2.5rem;
  color: var(--light-green);
  line-height: 0px;
}


.quote-container p{
  font-weight: 600;
  color: var(--light-beige);
  font-style: italic;
  text-align: right;
}


/* Style the back side */
.caricature-card-back {
 background-color: var(--dark-green);
 color: white;
 transform: rotateY(180deg);
 overflow: hidden;
}

.skills-container{
  padding: 5%;
  background-color: var(--light-beige);
}

.skills-container h2{
  color: var(--medium-cyan);
  text-align: right;
}

.skills-container p{
  color: var(--dark-green);
  text-align: right;
}

.skill img{
  max-width: 100%;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 1px 0 rgba(36,66,34,0.20);
}

/* Buttons */

.btn, .btn-lg{
  font-weight: 600;
  border-radius: 3px;
}

.btn-outline-secondary{
  border-radius: 3px;
  border: 2px solid var(--light-beige);
  color: var(--light-beige);
}

.btn-outline-secondary:hover{
  border-radius: 3px;
  border: 2px solid var(--light-beige);
  background-color: var(--light-beige);
  color: var(--dark-green);
}

.btn-primary{
  background-color: var(--medium-red);
  border: none;
  box-shadow: 1px 2px 0 0 rgba(0,0,0,0.20);
}

.btn-primary:hover, .btn-primary.focus, .btn-primary:focus{
  background-color: var(--light-red);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
  background-color: var(--light-red);
}

.btn-secondary{
  background-color: var(--medium-cyan);
  border: none;
  box-shadow: 1px 2px 0 0 rgba(0,0,0,0.20);
}

.btn-secondary:hover, .btn-secondary.focus, .btn-secondary:focus{
  background-color: var(--light-cyan);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle{
  background-color: var(--light-cyan);
}

.special-row .btn-lg, .special-row-b .btn-lg{
  transition: 0.15s transform ease-out;
  margin: auto;
}

.special-row .btn-lg:hover, .special-row-b .btn-lg:hover{
  /* padding: 0.75rem 1.25rem; */
  transform: scale(1.07);
  -webkit-transform: scale(1.07);
  /* font-size: 1.4rem; */
  transition: 0.15s transform ease-out;
}

/* Modal */
.modal-content{
  background-color: var(--dark-green);
}

.modal-header h5{
  color: var(--light-green);
  font-family: var(--special-font);
  font-size: 2rem;
}

.modal-header .close{
  color: var(--light-green);
  text-shadow: none;
}

.modal-body label{
  color: var(--light-beige);
}
.modal-body .text-muted{
  color: var(--light-green) !important;
}

/* Specific elements */
#logo-container{
  display: flex;
  height: 100%;
}

#contact-container{
  text-align: right;
  display: flex;
  padding-right: 2%;
}

#contact-container button{
  margin: auto 0 auto auto;
}

footer{
  background-color: #131714;
  margin: 0;
  min-height: 80px;
  display: flex;
}

footer p{
  color: var(--light-beige);
  text-align: center;
  margin: auto;
}


/* Responsive media queries */
@media only screen and (max-width: 720px){
  #contact-container{
    display: none;
  }

  #logo-container{
    margin-left: 0;
    padding-top: 3%;
    padding-bottom: 3%;
  }

  .main_logo{
    margin: auto;
  }

  .info-row{
    padding: 10% 5%;
  }

  .special-row{
    padding: 10% 5%;
  }

  .carousel-caption h1{
    font-size: 2.5rem;
  }

  .carousel-caption p{
    width: 100%;
    font-size: 1.5rem;
  }
}