@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');


*{
	margin:0;
	padding:0;
  	font-family: 'Work Sans', sans-serif;
  	color: #3a3a3a;
}

h4{
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.4;
}

a {
    text-decoration: none;
    color: gray;   
}

a:hover {
    color: #46B0A1;
}


img{
	display:block;
	width:100%;
}


span {
	font-family: 'Noto Sans SC', sans-serif;
}

.container{
	width:100vw;
	max-width:1000px;
	margin:0 auto;
	padding-top: 4%;
	padding-bottom: 9%;
}
.container:after{
	display:block;
	content:"";
	width:100%;
	clear:both;
}



article{
	background-color: white;
	float:left;
	
}

section#intro{
	background-color:white;
	
	
}


mark {
	background-color: #ffddf3;
}

.col1-2{
	width:47.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
}
.col1-3{
	width:31%;
	margin:0 1.15%;
	
}
.col1-4{
	width:22.7%;
	margin:0 1.15%;
}

.col1-2bis{
	width:57.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
}



nav {
	font-family: 'Work Sans', sans-serif;
	font-weight: 500;
	padding-bottom: 20Px;
  	padding-top: 20Px;
  	margin-left : 3%;
	animation: pop-in .6s ease-in;
}

#navbar li {
    display: inline-block;
    font-size: 0.90em;
	padding-left: 20px;
	padding-right: 40px;
}

#intro .col1-2{
  margin-top : 50px;
}

#intro .col1-2bis{
  margin-top : 50px;
}

#intro .col1-2 h2{
  margin-bottom : 15px;;
}


#intro h2{
	font-size: 4.5em;
	font-family: 'Space Mono', monospace;
	line-height: 125%;
}

#intro h3{
	font-size: 1.5em;
	font-weight: 450;
}

/******* CARDS *******/

#projects {
	padding: 8% 0;
}

header {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}

.band {
  width: 68%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 27px;
	
}
@media (min-width: 30em) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 60em) {
  .band {
    grid-template-columns: repeat(3, 2fr);
  }
}

.card {
			border-radius: 13px;

  background: white;
  text-decoration: none;
  color: #444;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
  position: relative;
  top: 0;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;

}
.card:hover {
	
  top: -2px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.card article {
			border-radius: 13px;

  padding: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
	
}
.card h1 {
	font-family:  'Space Mono', monospace;
	line-height: 125%;
  	font-size: 20px;
 	color: #333;
}
.card p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 1.4;
	margin-top: 9px;
	font-size: 0.9em;
	color: #828282;
}
.card span {
	font-family:  'Space Mono', monospace;
	font-size: 0.7em;
  	font-weight: 500;
  	margin: 2em 0 0 0;
	float: left;
	clear: both;
	color: #C7C7C7;
		font-variant: small-caps;

	
}

.card h6 {
	font-family: 'Noto Sans SC', sans-serif;
  	font-size: 1.1em;
	font-style: ;
  	font-weight: 600;
	float: right;
	font-variant: small-caps;
		color: #c7c7c7;

	
}

.card .thumb {
  padding-bottom: 70%;
  background-size: cover;
  background-position: center center;
border-radius: 13px 13px 0px 0px;

}

.card .thumb2 {
  padding-bottom: 40%;
  background-size: cover;
  background-position: center center;
	border-radius: 13px 13px 0px 0px;

}

@media (min-width: 60em) {
  .item-1 {
    grid-column: 1 / span 2;
  }
	
    @media (min-width: 60em) {
  .item-1-right {
    grid-column: 2 / span 2;
  }

	}

  .item-1 h1 {
    font-size: 24px;
	font-family: 'Noto Sans SC', sans-serif;
}
  }
	
  .thumb2 {
		padding-bottom: 70%;
	}

  .currentlytext {
	    grid-column: 1 / span 3;
	}

	.item-7 {
    display: none;
}

	
/******* TOGGLE ********/

.toggle-menu-lang-cont1 {
 float : right;
  max-width: 46.4px;
  width: 46.4px;
  max-height: 21.6px;
  height: 21.6px;
  border-radius: 12.4px;
  z-index: 5;
  background-color: #9edb84;
  transition: all 1s;
  transform: scale(1);
	margin-right: 330px;
    margin-top: 5px;
}

.handle1 {
  position: absolute;
  top: 1.86PX;
  right:  3.1PX;
  background-color: white;
  width: 18.5PX;
  height: 18.5PX;
  border-radius: 100%;
  filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
  transition: all 1s;
  transform: scale(1);
}

.slide1 {
  position: absolute;
  right: 24.8PX;
  background-color: white;
  transition: all 1s;
}

.color-swap1 {
  background-color: #0282E4;
  transition: all 1s;
} 

.toggle-menu-lang-cont {
 float : right;
  max-width: 46.4px;
  width: 46.4px;
  max-height: 21.6px;
  height: 21.6px;
  border-radius: 12.4px;
  z-index: 5;
  background-color: #9edb84;
  transition: all 1s;
  transform: scale(1);
	margin-right: 330px;
    margin-top: 5px;
}

.handle {
  position: absolute;
  top: 1.86PX;
  right:  3.1PX;
  background-color: white;
  width: 18.5PX;
  height: 18.5PX;
  border-radius: 100%;
  filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
  transition: all 1s;
  transform: scale(1);
}

.slide {
  position: absolute;
  right: 24.8PX;
  background-color: white;
  transition: all 1s;
}

.color-swap {
  background-color: #0282E4;
  transition: all 1s;
}

.toggle-menu-lang-cont2 {
 float : right;
  max-width: 46.4px;
  width: 46.4px;
  max-height: 21.6px;
  height: 21.6px;
  border-radius: 12.4px;
  z-index: 5;
  background-color: #9edb84;
  transition: all 1s;
  transform: scale(1);
	margin-right: 330px;
    margin-top: 5px;
}

.handle2 {
  position: absolute;
  top: 1.86PX;
  right:  3.1PX;
  background-color: white;
  width: 18.5PX;
  height: 18.5PX;
  border-radius: 100%;
  filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
  transition: all 1s;
  transform: scale(1);
}

.slide2 {
  position: absolute;
  right: 24.8PX;
  background-color: white;
  transition: all 1s;
}

.color-swap2 {
  background-color: #0282E4;
  transition: all 1s;
} 

.toggle-menu-lang-cont3 {
 float : right;
  max-width: 46.4px;
  width: 46.4px;
  max-height: 21.6px;
  height: 21.6px;
  border-radius: 12.4px;
  z-index: 5;
  background-color: #9edb84;
  transition: all 1s;
  transform: scale(1);
	margin-right: 330px;
    margin-top: 5px;
}

.handle3 {
  position: absolute;
  top: 1.86PX;
  right:  3.1PX;
  background-color: white;
  width: 18.5PX;
  height: 18.5PX;
  border-radius: 100%;
  filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
  transition: all 1s;
  transform: scale(1);
}

.slide3 {
  position: absolute;
  right: 24.8PX;
  background-color: white;
  transition: all 1s;
}

.color-swap3 {
  background-color: #0282E4;
  transition: all 1s;
} 



/****** CURRENTLY ********/



#currently {
	background-color: #EFFDF5;
	padding: 8% 0;
}

#currently h1 {
	font-family:  'Space Mono', monospace;
	line-height: 125%;
  	font-size: 20px;
 	color: #333;
}

#currently h4 {
	line-height: 1.8em;
	color: #3a3a3a;
}

#currently i {
	color:#46B0A1;
}

#currently a {
	line-height: 1.8em;	
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;

	font-weight: 400;
	font-style: italic;
}

.col1-2 a {	
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-2 i {
		color: #46B0A1;
		font-weight: 400;
	
}



.linkarticle:after {
  display:block;
  content: '';
  border-bottom: solid 5px #46B0A1;  
  transform: scaleX(0);  
  transition: transform 650ms ease-in-out;
  transform-origin:100% 80%
}
.linkarticle:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
	transition: transform 950ms ease-in-out;
}


/****** FOOTER ********/
footer {
	background: #46B0A1;
	font-size: 0.8em;
	color: white;
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

footer i {
	color:#FFFFFF;
}



/******* ANIMATIONS ********/

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateX(rem) scale(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}





/******* RESPONSIVE ********/
@media screen and (max-width:990px){
	.col1-4, .col1-2, .col1-2bis{
		width:80%;
		margin:5px 10% 0px 10%;
	}
	
#intro h2 {
    font-size: 2.80em;
	}
	
#projects {
	padding: 11% 0;
	
	}
	#vid{
	width: 100%;
		height: 40%;
	}
}

.item-1 h1 {
    font-size: 24px;
    font-family: 'Noto Sans SC', sans-serif;
}




@media screen and (max-width:600px){
	.col1-4, .col1-2, .col1-2bis{
		width:80%;
		margin:5px 10% 0px 10%;
	}
	
	#intro .col1-2 {
    margin-top: 30px;
	}

	#navbar li {
	padding-right:20px;
	}
	
	#intro h4 {
		
		font-size: 0.85em;
	}
	
	.container {
		padding-top: 0%;
	}
	
	.card p {
  line-height: 1.4;
	font-size: 0.8em;
	}
	
	#vid{
	width: 100%;
	height: 60%;
	}	
	
	.band {
  	width: 82%;
	}

.toggle-menu-lang-cont3, .toggle-menu-lang-cont2, .toggle-menu-lang-cont1, .toggle-menu-lang-cont {
	margin-right:  125px;
	max-width: 49.4px;
  	width: 49.4px;
  	max-height: 24.6px;
  	height: 24.6px;
  	border-radius: 15.4px;
	}	

.handle2, .handle3, .handle1, .handle {
	width: 21.5PX;
  	height: 21.5PX;

@media screen and (min-width:1228px){
	
	#projects {
	padding: 11% 7%;
	}
	
	#currently {
	padding: 11% 7%;
	}
	#vid{
	width: 100%;
	height: 70%;
}
    
    .item-1 h1 {
    font-size: 24px;
    font-family: 'Noto Sans SC', sans-serif;
}
/****/
	

