/*
                                @@    @@  @@@@@@@@  @@   @@   @@@@@   @@@   @@      @@    @@  @@@@@@@@  @@@@@@@   @@@@@@@@  @@@   @@  @@@@@@@@                                
                                @@@  @@@  @@    @@  @@   @@  @@   @@  @@@@  @@      @@@  @@@  @@    @@  @@    @@  @@        @@@@  @@  @@    @@                                
                                @@ @@ @@  @@    @@  @@@@@@@  @@@@@@@  @@ @@ @@      @@ @@ @@  @@    @@  @@@@@@@   @@@@@@@@  @@ @@ @@  @@    @@                                
                                @@    @@  @@    @@  @@   @@  @@   @@  @@  @@@@      @@    @@  @@    @@  @@   @@   @@        @@  @@@@  @@    @@                                
                                @@    @@  @@@@@@@@  @@   @@  @@   @@  @@   @@@      @@    @@  @@@@@@@@  @@    @@  @@@@@@@@  @@   @@@  @@@@@@@@                                
www.mohanmoreno.ch
*/
@font-face {
	font-family: 'Lausanne Pan 50';
	src: url('../fontes/Pan/twklausannepan-50.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 50 Italic';
	src: url('../fontes/Pan/twklausannepan-50italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Thin';
	src: url('../fontes/Pan/twklausannepan-100.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Thin Italic';
	src: url('../fontes/Pan/twklausannepan-100italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 150';
	src: url('../fontes/Pan/twklausannepan-150.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 150 Italic';
	src: url('../fontes/Pan/twklausannepan-150italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Extra Light';
	src: url('../fontes/Pan/twklausannepan-200.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Extra Light Italic';
	src: url('../fontes/Pan/twklausannepan-200italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 250';
	src: url('../fontes/Pan/twklausannepan-250.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 250 Italic';
	src: url('../fontes/Pan/twklausannepan-250italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Light';
	src: url('../fontes/Pan/twklausannepan-300.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Light Italic';
	src: url('../fontes/Pan/twklausannepan-300italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 350';
	src: url('../fontes/Pan/twklausannepan-350.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 350 Italic';
	src: url('../fontes/Pan/twklausannepan-350italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Regular';
	src: url('../fontes/Pan/twklausannepan-400.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Regular Italic';
	src: url('../fontes/Pan/twklausannepan-400italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 450';
	src: url('../fontes/Pan/twklausannepan-450.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 450 Italic';
	src: url('../fontes/Pan/twklausannepan-450italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Medium';
	src: url('../fontes/Pan/twklausannepan-500.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Medium Italic';
	src: url('../fontes/Pan/twklausannepan-500italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 550';
	src: url('../fontes/Pan/twklausannepan-550.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 550 Italic';
	src: url('../fontes/Pan/twklausannepan-550italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Semibold';
	src: url('../fontes/Pan/twklausannepan-600.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Semibold Italic';
	src: url('../fontes/Pan/twklausannepan-600italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 650';
	src: url('../fontes/Pan/twklausannepan-650.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 650 Italic';
	src: url('../fontes/Pan/twklausannepan-650italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Bold';
	src: url('../fontes/Pan/twklausannepan-700.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Bold Italic';
	src: url('../fontes/Pan/twklausannepan-700italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 750';
	src: url('../fontes/Pan/twklausannepan-750.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 750 Italic';
	src: url('../fontes/Pan/twklausannepan-750italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Extra Bold';
	src: url('../fontes/Pan/twklausannepan-800.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Extra Bold Italic';
	src: url('../fontes/Pan/twklausannepan-800italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 850';
	src: url('../fontes/Pan/twklausannepan-850.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 850 Italic';
	src: url('../fontes/Pan/twklausannepan-850italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Black';
	src: url('../fontes/Pan/twklausannepan-900.woff2');
}
@font-face {
	font-family: 'Lausanne Pan Black Italic';
	src: url('../fontes/Pan/twklausannepan-900italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 950';
	src: url('../fontes/Pan/twklausannepan-950.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 950 Italic';
	src: url('../fontes/Pan/twklausannepan-950italic.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 1000';
	src: url('../fontes/Pan/twklausannepan-1000.woff2');
}
@font-face {
	font-family: 'Lausanne Pan 1000 Italic';
	src: url('../fontes/Pan/twklausannepan-100italic.woff2');
}
:root{
  --fond: #000148;
  --couleur-titres: #ff7700;
  --couleur-texte:#b1ebeb;
  --fonte-texte: 'Lausanne Pan Regular';
}
* {
	margin: 0;
	padding: 0;
	background-color: var(--fond);
	color: var(--couleur-texte);
	font-family: var(--fonte-texte);
}
body::-webkit-scrollbar {
	display: none;
}
body::-webkit-scrollbar-track {
	display: none;
}
body::-webkit-scrollbar-thumb {
	display: none;
}
body::-webkit-scrollbar-thumb:hover {
	display: none;
}
/*=====================================================================================================================*/

::selection{
	background-color: #ff7700;
}
nav{
	display: flex;
	justify-content: space-between;
	position: fixed;
	z-index: 1;
	background: none;
	width: 100%;
	padding-right: 3rem;
	background-image: linear-gradient(rgba(0, 1, 72, 0.95)70%, rgba(0, 1, 72, 0 ));
	button {
		margin: 1rem;
		font-size: 30px;
		font-weight: 500;
		text-decoration: none;
		border: none;
		background: none;
	}
}
nav button:hover{
	color: #ff7700;
	text-decoration: none;
	cursor: pointer;
}
nav button:active{
	color: #ff7700;
	text-decoration: none;
	font-weight: 1000;
}
.cli-btn{
	position: relative;
	width: max-content;
	text-align: left;
	line-height: 1em;
	font-size: 1em;
	transition: 200ms;
}

.cli-btn::before {
	content: '';
	width: 0;
	background: #ff7700;
	height: 3px;
	position: absolute;
	bottom: -0.1em;
	right: 0;
	transition: 400ms;
}
.cli-btn:hover::before{
	width: 0;
	width: 100%;
	left: 0;
}

.cli {
	font-family: monospace;
	text-decoration: none;
	font-weight: 900;
	color: #b1ebeb;
	transition: 200ms;
	display: flex;
	flex-direction: column;
}
.cli:hover{
	color: #ff7700;
}


.line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  font-family: monospace;
}

.line1 {
  animation: typing1 1s steps(7, end) forwards;
}

.line2 {
  animation: typing2 1s steps(7, end) forwards;
  animation-delay: 1s;
}

@keyframes typing1 {
  from { width: 0 }
  to { width: 100% }
}

@keyframes typing2 {
  from { width: 0 }
  to { width: 100% }
}

@media screen and (max-width:680px){
	nav button{font-size: 1.2rem;width: auto;margin: 0.5rem;}
	#logo{
		height: 30px;
		width: auto;
	}
	p{
		font-size: 1em;
	}
}
@media screen and (max-width:504px){

	.description{
display: none;
	}
}
/*=====================================================================================================================*/
.blink {
	display: flex;
	flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0;
	width: 100%;
	text-align: center;
}

/* h1{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2s;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
} */

main{
	font-size: 1.25rem;
	padding: 1em;
}
h2 {
	margin-top: 2.1em;
	background: none;
	z-index: 0;
	font-size: 2em;
}
section h2 {
	color: rgb(245, 54, 11);
	color: var(--couleur-titres);
}
h2::selection{	color: #000148;
}
h3{
	margin-bottom: 0.5em;
	margin-top: 1em;
	font-size: 1.5em;
	font-family: 'Lausanne Pan 250';

}
p{
	line-height: 1em;
}

/*=====================================================================================================================*/
.projet{
	min-height: 100vh;
	padding-top: 1px;
}
.btn-projets{
	position: relative;
	width: max-content;
	text-align: center;
	a{
		text-align: center;
	}
}
.btn-projets::before {
	content: '';
	width: 0;
	background: #ff7700;
	height: 0.1em;
	position: absolute;
	bottom: 0.1em;
	right: 0;
	transition: 400ms;
}
.btn-projets:hover::before{
	width: 0;
	width: 100%;
	left: 0;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
.a-projets {
	color: #ff7700;
	font-size: 1.2em;
	width: 100%;
	text-decoration: none;
}
.a-projets{
	position: relative;
	text-align: left;
	a{
		text-align: center;
		text-decoration: none;
		color: var(--couleur-titres);
	}
}
.a-projets::before {
	content: '';
	width: 0;
	background: #ff7700;
	height: 0.1em;
	position: absolute;
	bottom: -0.2em;
	right: 0;
	transition: 350ms;
}
.a-projets:hover::before{
	background: #ff7700;
	width: 100%;
	left: 0;
	transition: 1s;
}

p {
	margin-bottom: 1em;
}

.description{
	margin-left: 2em;
}
@media screen and (max-width:533px){
	.projet{
	height: auto;
	padding-top: 1px;
}
}
/*=====================================================================================================================*/

.propos-contact {
	display: flex;
	flex-direction: row;
	height: auto;
}
.propos {
	margin-right: 32px;
	width: 50%;
	p{
		margin-top: 0.5em;
		margin-bottom: 1em;
	}
}
.contact {		margin-right: 0;
		width: 50%;

}
#mail {
	color: rgb(245, 54, 11);
	color: #ff7700;
	text-decoration: none;
	word-break: break-all;
}
.lien-r{
	color: rgb(245, 54, 11);
	color: #ff7700;
	text-decoration: none;
}
#mail::selection{
	color: #000148;
}
#mail:hover{
	text-decoration: underline;
}
.lien-r::selection{
	color: #000148;
}
.lien-r:hover{
	text-decoration: underline;
}
@media screen and (max-width: 973px) {
	/* .propos-contact{
		flex-direction: column;
	} */
	 /* h2{
		margin-top: 2em;
	 } */
	.propos {
		width: 100%;
	}
	.contact {
		width: 100%;
	}
}
/*=================================================================================================================*/
footer {
    text-align: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	background-color: #ff7700;
    font-weight: 600;
	height: 48px;
	color: #000148;
	text-transform: uppercase;
	letter-spacing: 0.11rem;
	a{
		color: #000148;
		background-color: #ff7700;
		margin-right: 0.5em;
		text-decoration: none;
	}
}
footer::selection {
    color: #b1ebeb;
    background-color: rgba(0, 0, 0, 0);

}
	footer a::selection{
		color: var(--couleur-texte);
	}
/*=================================================================================================================*/

	
	  	  	  	  @media screen and (max-width: 160px) {
		 * {font-size:0.5rem;}}
	  
	  	  	  	  @media screen and (max-width: 244px) {
		h1, h2, h3 {font-size:0.8rem;}}
	  
	  	  	  	  @media screen and (max-width: 673px) {
					.propos-contact{
						height: auto;
					}
					/* h2{
						margin-top: 2em;
					}
		 p {font-size:0.9em;} */
		}
	  
	  @media screen and (max-width:410px) {.mail {
		/*
       writing-mode:  vertical-lr;*/
	   word-break: break-all;
    }}