/*
Basic start for a webpage (get rid of some default values)
*/

/* The following variables makes easier to keep a homogeneous approach */
:root{
    /* Colors */
    --clr-accent: #006270;
    --clr-bck: #3b3a3a;
    --clr-darkgrey: #333;
    --clr-white: #efefef;
    /* Variables for all page */
    --clr-body: white; /*#efefef;*/
    --clr-light: #F9F7F0;
    --clr-blue-lig: #18B7BE;
    --clr-blue-med: #178CA4;
    --clr-blue-fade: #6c9aa3;
    --clr-blue-dark: #072A40;
    /* Responsive webpage */
    --width-elements: min(100% - 1rem, 90vw);
    /* Others */
    --border-round: 10px;
}

/* Remove items by https://piccalil.li/blog/a-modern-css-reset*/
/* Box sizing */
*, *::before, *::after{
    box-sizing: border-box;
}
/* Remove margins */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

a {
    text-decoration: none;
}

  /* Main body  --------------------------------------------------*/
  html, body {
      background: var(--clr-body);
      color: var(--clr-blue-dark);
      font-family: "Ubuntu Mono"; /*basic-sans, Sans-Serif;*/
      font-size: 1.12em; /*em	Relative to the font-size of the element (2em means 2 times the size of the current font)*/
      height: 100%;
      line-height: 1.5;
      min-height: 100vh; /*vh	Relative to 1% of the height of the viewport==browser size**/
      text-size-adjust: none;
      text-rendering: optimizeSpeed;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
  }

  /* Default definition of fonts in the page */
  p, dt, .light_fonts, .dark_fonts {
      margin: .5em 0 .5em 0;
  }

  /* Color for fonts */
  .light_fonts{
      color: var(--clr-light);
  }

.dark_fonts{
    color: var(--clr-darkgrey);
}


  /* Title is used for headers */
.title {
    color: var(--title-color, var(--clr-darkgrey));
    font-size: var(--title-size, 2.5rem); /*rem	Relative to font-size of the root element*/
    line-height: 1;
    margin: 0 0 .15em; /*top right bottom*/
  }

.title_center {
    color: var(--title-color);
    font-size: var(--title-size, 2.5rem); /*rem	Relative to font-size of the root element*/
    line-height: 1;
    margin: 0 0 .15em; /*top right bottom*/
    text-align: center;
  }

.horizontal-line::after, .horizontal-line::before {
    content: "";
    display: inline-block;
    border: 0.09rem solid;
    border-color: var(--clr-bck);
    margin-left: 2px;
    margin-bottom: 3px;
    width:20vw;
}

  /*Standard for links*/
  a:link {
      color: var(--clr-white);
  }
  /* Change configuration when the link is visited. */
  a:visited {
    color: var(--clr-white);
    background-color: transparent;
  }

  a:hover {
    color: var(--clr-accent);
    cursor: pointer; /* Change the cursor when over the button. */
    background-color: transparent;
  }

  /* Change configuration when the link is active. */
  a:active {
    color: var(--clr-blue-dark);
    background-color: transparent;
  }

  .a-light:link {
    color: var(--clr-blue-med);
  }
  .a-light:visited {
    color: var(--clr-blue-med);
  }

.bucket{
    background: var(--clr-blue-med);
    border-radius: var(--border-round); /* Smooth corners */
    padding: 0.5em 2em/*calc(.5em + 1vw)*/;
    width: var(--width-elements);
    margin-inline: auto;
    --title-color: var(--clr-light);
    margin-top: 10px;
}

.empty{
    background: var(--clr-body);
}

/* Skills block -------------------------------------------------- */
.skillsbar { /* bucket of full bar */
    display: flex;
    align-items: center;
    justify-content: center; /* Distribute in line */
    gap: 1em;
    margin-bottom: 10px;
}

.skillsbar button {
    background: var(--clr-blue-med);
    border: 0;
    border-radius: 2em;
    color: var(--clr-white);
    cursor: pointer; /* Change the cursor when over the button. */
    font-size: calc(var(--button-scale) * 1rem);
    padding: .5em 1.25em;
    transition: transform 100ms; /*Used for simple effect when hovering*/
}

/* Hover effect */
.skillsbar button:hover{
    background-color: var(--clr-blue-fade);
    color: var(--clr-white);
    transform: scale(1.1);
}

.tab-content ul {
    color: var(--clr-darkgrey);
    list-style-position: inside;
    margin: .5em 0 .5em 0;
}

.tab-content li {
    color: var(--clr-darkgrey);
}


/* Multiple selection */
.tab-content {
    display: grid;
    align-items: center;
    justify-items: center;
}

.target.selected {
    border-radius: 0.5em;
    background-color: var(--clr-darkgrey);
}

/*Fade contents for all skills
This is used in conjunction with JS to hide and unhidden the
contents in the courses section. */
.tab-pane {
    grid-column: 1;
    grid-row: 1;
    opacity: 0; /* 0 means not visible, 1 means visible. */
    transition: all 0.5s; /* Add a smooth effect during transition. */
}

.tab-pane.visible {
    opacity:1;
}

/* Navigation bars -------------------------------------------------- */
/* Top menu navigation bar*/

.navbar { /* bucket of full bar */
    display: flex;
    align-items: center;
    justify-content: center; /* Distribute in line */
    padding: 10px;
    background-color: var(--clr-body);/* var(--clr-blue-med);*/
    color: var(--clr-darkgrey);  /* azure Color of text */
}
/* Get rid of bullets in list only under navbar */
.navbar li {
    list-style: none;
}
.nav-links a {
    color: var(--clr-darkgrey);
}

.nav-links a:hover {
    color: azure;
}

/* Navbar links (menu) */
.nav-menu {
    display: flex;
    gap: 1em; /* Add space between members */
    font-size: 18px;
}
/* Hover effect */
.nav-menu li:hover{
    background-color: var(--clr-blue-fade);
    border-radius: 5px; /* Use rounded borders */
    transition: 0.3 ease; /* 0.3 ease 
    fast-slow-fast) */
}

.nav-menu li {
    padding: 5px 14px;
}

/* For mobile devices ---------*/
input[type=checkbox] {
    display: none; /* Make checkbox vanish*/
}

.hamburger {
    display: none;
    font-size: 24px;
    user-select: none; /* User cannot select */
}
.hamburger:hover {
    cursor: pointer;
}

/* Queries */
@media (max-width: 768px) {
    /*Only for smaller than 768px*/
    .nav-menu {
        display: none;
        position: absolute;
        background-color: var(--clr-blue-med);
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
    }
    .nav-menu li:hover {
        display: inline-block;
        background-color: var(--clr-blue-fade);
        transition: 0.3 ease;
    }
    .nav-menu li + li {
        margin-top: 12px;
    }

    input[type=checkbox]:checked ~ .nav-menu {
        display: block;
    }

    .hamburger {
        display: block;
    }
    
    .empty {
        width: calc(var(--width-elements) * .5);
    }

    .skillsbar {
        display: grid;
    }

} /* END MEDIA MAX-WIDTH 768px*/


/*Standard for links*/

/* Button(s) */
.backButton{
    display: grid;
    padding: calc(.5em + 1vw);
    width: 20vw; margin:0 auto; /*Center block after set width*/
}

/* Normal button, effect scale -------------- */
.button {
    background: var(--clr-blue-dark);
    border: 0;
    border-radius: 2em;
    color: var(--clr-white);
    cursor: pointer; /* Change the cursor when over the button. */
    font-size: calc(var(--button-scale) * 1rem);
    padding: .5em 1.25em;
    transition: transform 100ms; /*Used for simple effect when hovering*/
}

/*Add effect to the button; it will looks like the button expands on hover. */
.button:hover {
transform: scale(1.1);
}

/* Button, Glow effect ----------------- */
@keyframes glow { /* Add glow animation */
    0% {
        box-shadow: 0 0 0 0 var(--clr-blue-dark);
    }
    50% {
        box-shadow: 0 0 20px 0 var(--clr-blue-dark); /* High pixels higher glow */
    }
}
.button-glowing {
    /* Custom properties */
    --glowingackground: var(--clr-blue-lig);
    --glowingorder-color: var(--clr-blue-lig);/*linear-gradient(to bottom right, red, blue)*/;
    --glowingorder-width: .5em; /* Scalable, will modify the borders' width */
    --edge-size: .5em; /* How cut the corners will be (radius) */
    /* Style */
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: var(--border-round);
    box-shadow: var(--clr-blue-med);
    background: var(--glowingackground);
    color: var(--clr-white);
    cursor: pointer; /* Change the cursor when over the button. */
    font-size: calc(var(--button-scale) * 1rem);
    padding: .5em 1.25em;
    animation: glow 1.4s linear infinite;
}

.button-glowing:where(:hover, :focus) {
    background: var(--clr-blue-dark);  /* Color when the transition is over (after focus)*/
}


  /* Images and footer */
  /* --------- FOOTER --------- */
  /* Format of the footer */

  footer {
      position: relative; /* fixed if you want it frozen*/
      text-align: center;
      background-color: var(--clr-darkgrey);
      padding: 0.2em;
      bottom: 0px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      color: var(--clr-light);
      /* border: 1px solid var(--clr-darkgrey);
      border-radius: 10px; */
  }
  footer img {
      width: 25px;
      height: 25px;
      margin-right: 25px;
      border-radius: var(--border-round);
  }

  /* Get rid of link's underline*/
  footer a:link, footer a:hover, footer a:active, footer a:visited {
      text-decoration: none;
  }
  
  .bucket-images {
    margin-top: 0.5em;
}

  /* FOOTER */

/* Bootstrap */
  /* Center align the text within the three columns below the carousel */
  .about-me .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  /* rtl:begin:ignore */
  .about-me .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  /* rtl:end:ignore */

  /* Featurettes
  ------------------------- */
  /* Thin out the about-me headings */
  .featurette-heading {
    letter-spacing: -.05rem;
  }

  @media (min-width: 40em) {
    .featurette-heading {
      font-size: 50px;
    }
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
      }
  }

  /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 32rem;
    background: var(--clr-darkgrey);
  }
  .overlay-image{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    opacity: 0.3;
}

/* Button, Glow effect ----------------- */
@keyframes glow { /* Add glow animation */
    0% {
        box-shadow: 0 0 0 0 var(--clr-blue-dark);
    }
    50% {
        box-shadow: 0 0 20px 0 var(--clr-blue-dark); /* High pixels higher glow */
    }
}
.button-glowing {
    /* Custom properties */
    --glowingackground: var(--clr-blue-lig);
    --glowingorder-color: var(--clr-blue-lig);/*linear-gradient(to bottom right, red, blue)*/;
    --glowingorder-width: .5em; /* Scalable, will modify the borders' width */
    --edge-size: .5em; /* How cut the corners will be (radius) */
    /* Style */
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: var(--border-round);
    box-shadow: var(--clr-blue-med);
    background: var(--glowingackground);
    color: var(--clr-white);
    cursor: pointer; /* Change the cursor when over the button. */
    font-size: calc(var(--button-scale) * 1rem);
    padding: .5em 1.25em;
    animation: glow 1.4s linear infinite;
}

.button-glowing:where(:hover, :focus) {
    background: var(--clr-blue-dark);  /* Color when the transition is over (after focus)*/
}