@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
    background-color: black;
    overflow-x: hidden;
    overflow-y: hidden;
    margin:15px;
}



h1, h2, h3{
    color: white;
    font-family: 'Roboto', sans-serif;
}

h1{
    font-size: 45px;
    /*font-size: clamp(25px,3.5vw,45px);*/
    
    padding: 0px;
    margin:0px;
}

h3{
    padding:0px;
    margin: 0px;
    font-size: 28px;
    /*font-size: 1.6vw;*/
    display:inline;
}

h3.sub-title{
    margin-top:1em;
}

h2{
    font-size:45px;
    /*font-size: 3.2vw;*/

}



.main-container{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap-reverse;
    height:100%;
    width:100%;
    
}



.left{
    flex:1;
    height: 100%;
    /*border: solid red 1px;*/
    display: flex;
    flex-direction: column;
}

.middle{
    flex: 1;
    max-height:100%;
    /*border: solid blue 1px;*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    margin-left:20px;
    margin-right: 20px;
}

.right{
    flex: 1;
    flex-shrink: 10;
    height:100%;
    /*border: solid green 1px;*/
}


img[src="main_photo_BW.png"]{
    opacity: 50%;
    height:75%;
    position:absolute;
    bottom:0px;
    right:0px;
    pointer-events: none; 
}



.left>h2{
    margin:0px;
    padding: 0px;
    padding-left: 1em;;
    font-size: 30px;
}

.examples-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    padding:10px;
    border: 4px solid white;
}

/* Adapted from
* https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/
*/

.examples-container div{
    flex: 1;
    display:inline-block;

    background: rgb(235,89,92);
    background: linear-gradient(to right,#EB595C, rgba(235,89,92,1) 0%,rgba(235,89,92,1) 12%,rgba(76,191,224,1) 38%, rgba(76,191,224,1) 50%,white 50%);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
    
    padding:4px;
    margin: 0.5em;
}

.examples-container div:hover{
    background-position: 0 100%;
}

.examples-container a{
    display:block;
    text-decoration: none;
    background-color: black;
    padding:0.5em 0.75em;
}

.examples-container h3{
    position: relative;
    bottom:0.5em;
    white-space: nowrap;
    display: block;
    color: rgb(255, 255, 255);

}


.examples-container div h3:before{
    content:"";
    display: inline-block;
    position:relative;
    background-color: white;
    border-radius: 1em;
    width:2em;
    height:2em;
    top:0.5em;
    margin-right:0.5em;
}

.examples-container a[href="https://architecte.thibsdesign.fr"] h3:before{
    background-image: url("logo_architecte.svg");
}

.examples-container a[href="https://tactikfamily.fr"] h3:before{
    background-image: url("logo_tactik.svg");
}

.examples-container a[href="https://freedom-fitness.fr"] h3:before{
    background-image: url("logo_fitness.svg");
}

.examples-container a[href="https://restaurant.thibsdesign.fr"] h3:before{
    background-image: url("logo_restaurant.svg");
}

.examples-container a[href="https://polybot-grenoble.fr"] h3:before{
    background-image: url("logo_polybot.svg");
}


/* */

.title-container{
    flex:1;
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    
}

.text-carousel-container{
    flex:2;
    background-color: black;
    display:table;
}

.text-carousel{
    display:table-cell;
    vertical-align: middle;
}

.text-carousel h2{
    border-left: solid white 5px;
    padding-left: 10px;
}

/*Adapted from:
https://dev.to/afif/a-multi-line-css-only-typewriter-effect-3op3
*/


.carousel-1{
    display: inline;
    color:#0000;
    font-family: monospace;
    background:
    linear-gradient(-90deg,#FFFFFF 5px,#0000 0) 10px 0,
    linear-gradient(#FFFFFF 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    animation:
        b .7s infinite steps(1),
        t calc(var(--n)*.1s) steps(var(--n)) forwards;
}

.carousel-2{
    display:inline;
    color:#0000;
    font-family: monospace;

    background:
        linear-gradient(-90deg,#FFFFFF 5px,#0000 0) 10px 0,
        linear-gradient(#FFFFFF 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;

    animation-name: hide-carousel, t, b;
    animation-timing-function: steps(1,end),steps(var(--n)),steps(1);
    animation-fill-mode: forwards,forwards,forwards;
    animation-duration: 1.6s,calc(var(--n)*.1s),.7s;
    animation-delay: 0s, 1.5s,0s;
    animation-iteration-count: 1,1,infinite;

}

.carousel-3:after{
    display: inline-block;
    content:"responsive";
    color:#0000;
    font-family: monospace;
    width: 10ch;

    background:
        linear-gradient(-90deg,#FFFFFF 5px,#0000 0) 10px 0,
        linear-gradient(#FFFFFF 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;

    animation-name: hide-carousel, t, text-carousel-anim, b;
    animation-timing-function: steps(1,end),steps(var(--n)),ease,steps(1);
    animation-fill-mode: forwards,forwards,forwards,forwards;
    animation-iteration-count: 1,1,infinite,infinite;
    animation-duration: 4.25s,calc(var(--n)*.1s),8s,.7s;
    animation-delay: 0s, 4.2s, 5.3s,0s;
}

.social-container{
    display: flex;
    flex:1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:15px;
}

.social-container>div{
    display:inline-block;
    border: solid white 4px;
    border-radius: 30px;
    height:5vh;
    width:auto;
    padding:20px;
}

.social-container img{
    height:100%;
    width:auto;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-size: 200% 100% !important;
    background-position: 100% !important;
    transition: background-position 200ms ease;
}

.social-container img:hover{
    background-position: 0 100% !important;
}

.social-container img[src="LI-In-Bug.png"]{
    background-color:#2867b2;
    background: linear-gradient(to right,#2867b2, #2867b2 0%,#2867b2 50%,white 50%);
}

.social-container img[src="Malt_logo_white.svg"]{
    background-color:#ed4442;
    background: linear-gradient(to right,#ed4442, #ed4442 0%,#ed4442 50%,white 50%);
}

.social-container img[src="github-mark-white.svg"]{
    background-color:#a8a8a8;
    background: linear-gradient(to right,#a8a8a8, #a8a8a8 0%,#a8a8a8 50%,white 50%);
}


.social-container a[href="mailto:contact@thibsdesign.fr"]{
    display: inline-block;
  position: relative;
    font-family: 'Dancing Script';
    height:1em;
    color:white;
    font-size: 35px;
    margin-left:20%;
    margin-right: 20%;;
    text-align: center;
    text-decoration: none;
}

.social-container a[href="mailto:contact@thibsdesign.fr"]:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: 
  #ffffff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  
  .social-container a[href="mailto:contact@thibsdesign.fr"]:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }






  @media screen and (max-width: 1366px){
    .text-carousel-container{
        flex:1;
    }
    img[src="main_photo_BW.png"]{
        opacity: 25%;
    }
    .right{
        flex: 0;
    }
  }
  
  
  @media screen and (max-width:700px){
      body{
          overflow-y:visible;
          margin:8px;
      }
  
      .main-container{
          flex-direction:column-reverse;
          height:auto;
          min-height: 100%;
          width:100%;
          gap:50px;
      }
  
      .left{
          flex:1;
      }
  
      .middle{
          flex:2;
          gap:40px;
      }
  
  
  }