/*-------------------------------------------------
    - color variables */
:root {
    --bg-light-color: #FFFFFF;
    --bg-mid-color: #B79F79;
    --bg-dark-color: #8D6937;
    --secondary-color: #0A3E32;
    --secondary-dark-color: #043033;
}

/*-------------------------------------------------
    - global */

body{padding: 0; margin: 0;}
html {
    font-size: 18px;
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Sora', sans-serif;
    background-color: var(--bg-light-color);
    /*color: var(--secondary-dark-color);*/
}

a:not(.project-link-hover):not(.menu-btn-url){
    color: orange;
    font-weight: bold;
    text-decoration: none;
}

.alinea { 
  text-indent: 40px; 
}


.animate-in {
    -webkit-animation: fadeIn 5.5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity 5.5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



.overlay{
    margin-left: 60px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

#header-solid{
    position: relative;
    z-index: 0;
    border: 0px;
    background: black;
    width: 100%;
    height: 200px;
    opacity: 0.8;
}
#header-tuto-title {
    position: relative; 
    color: white;
    z-index:1;
    text-align: center;
    padding-top: 7.5%;
    font-size: 40px;
    font-weight: 10;
    border: 1px;
    top: 70%;
}
#header-name{
    font-size: 44px;
    font-weight: bold;
    grid-column: 1/7;
}

#background-video {
    width: 100%;
    /*max-height: calc(100vh - 169px);*/
    position:relative;
    z-index:0;
    border: 0px;
}
#container{
    /*setting the font-size to 0 allow to remove 
    the lower margin below the video...*/
    font-size: 0; 
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.menu-btn {
  opacity: 0.6;
  margin: auto;
  display: block;
  position: relative;
  padding: 0.2em 0;
  font-size: 20px;
}
/*https://css-irl.info/animating-underlines/*/
.menu-btn:hover{opacity: 1; }

/* Scale from center */
.menu-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2em;
  background-color: white;
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
  transition: opacity 500ms, transform 500ms;
}
.menu-btn:hover::after,
.menu-btn:focus::after{transform: scale(1); }
.menu-btn-url{
    color: white;
    font-weight: bold;
    text-decoration: none;
}
/*-------------------------------------------------
    - body */
.body-layout {
    margin: 5px 100px;
    text-align: center;
    padding: 20px 40px 20px 40px;
}

/*-------------------------------------------------
    - footer */
.footer-layout {
    margin: 0px 100px;
    text-align: center;
    padding: 1px 0px;
    font-size: 14px;
    font-family: "Space Mono", sans-serif;
}
.footer-layout a{
    color: black;
}
.footer-layout a:hover{
    color: rgb(200, 200, 200);
}

/*-------------------------------------------------
    - projects */
.projects-table {
    padding: 2px;
    margin-left: auto;
    margin-right: auto;
    border-spacing:20px;
}
.projects-cell{
    border-style:  hidden;
}
.projects-row{
    border-style:  hidden;
}
.project-img {
    width: 230px;
}

.project-img-hover {
    position: absolute;
    width: 99.5%;
    background: black;
    opacity: 0;
    height: 98%;
    display: table;
    border-collapse: collapse; /* remove margin b/w black solid and image */
}
.project-txt-hover {
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 40px;
}


/*-------------------------------------------------
    - reel */
#body-reel a{
    color: rgb(70, 70, 70);
    font-weight: bold;
    text-decoration: none;
}
#body-reel a:hover {
    color: black;
}
#reel-sub{
    font-size: 16px;
}


/*-------------------------------------------------
    - tutos */
.tutos-table {
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    border-spacing:30px;
    border-style: hidden;
}
.tutos-cell{
    border-style: hidden;
}
.tuto-img {
    width: 340px;
    height: 250px;
}
.tuto-solid {
    background: black;
    opacity: 0.7;
}
.tuto-text {
    font-size: 20px;
    color: rgb(170, 170, 170);
}
.tuto-text:hover {
    color: white;
}
.tuto-desc {
    font-size: 16px;
    margin: auto;
}
.tuto-link:hover {
    color: var(--bg-light-color); 
    text-decoration:none; 
}
.tuto-layout {
    text-align: left;
    width: 800px;
    margin: auto auto auto auto;
}
.tuto-layout > h1 {font-size: 26px; }
.tuto-layout > h2 {font-size: 22px; }
#tuto-toc-link {color: rgb(70, 70, 70); font-weight: normal;}
#tuto-toc-link:hover {color: black; }
.tuto-toc-li {list-style-type: none; }

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

code {
      font-family: 'Consolas', 'Courier New', monospace;
      background: #dddddd;
      color: #black;
      padding: 0em 0.4em;
      border-radius: 3px;
      border: 1px solid #bbbbbb;
      height: 2px;
      font-size: 0.9em;
}
/*-------------------------------------------------
    - mentorship */
.schools {
    display: flex;
    align-items: flex-end;
}
.schools img {
    margin-right: 0px;
    width: 100%;
    height: auto;
}
.FAQ_question {
    text-align: left;
}
.FAQ_response {
    text-align: left;
    font-size: 14px;
}

/*-------------------------------------------------
    - links */
#body-links {
    text-align: left;
    margin: 0px;
    padding-left: 200px;
    background-color: rgb(0, 0, 0);
    color: rgb(255,255,255);
}

#body-links a{
    color: rgb(200, 200, 200);
    font-weight: normal;
    text-decoration: none;
}

#body-links a:hover {
    color: white;
}

/*-------------------------------------------------
    about */

#about-body {
    text-align: center;
    padding: 20px 250px 20px 250px;
    text-align: justify;
}

#about-body > h2{
    text-align: center;
}

#about-body a:hover{
    color: rgb(200, 200, 200);
    font-weight: bold;
}
#about-body a{
    color: black;
    font-weight: bold;
}

.about-img {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-social {
    width: 30px;
}