html {
  overflow-y: scroll;
}

/* Main part of the html page */
body {
  background:url(wallpaperbetter_com_1920.jpg) top left no-repeat;
  background-size: cover;
  background-clip: border-box;
  margin:0;
  border:0px;
  text-align:left;
  color:#cccccc;
  font-family:Calibri, Candara, Segoe, Geneva, Tahoma, Arial, sans-serif;
  font-size:17px;
  line-height:140%;
}

/* Hidden menu */
header{
	display: none;
}

/* Cette div agit comme mon main */
#blog {
  width: 55%;
  padding-top: 5%;
  padding-left: 36%;
  padding-bottom: 310px;
}

#load_bg {
	display:none;
}

#load_3Dcube {
	display:none;
}

/* Some font elements */

h2 {
  margin:0 0 5px 0;
  font-size:24px;
  color:#a1aebb;
}

h3 {
  color:#d1c195;
  font-size: 16px;
  margin: 3px 0px 15px 0px;
}

p {
   text-align:justify;
   white-space:pre-wrap;
}

/* line elements layout - balises 'li' html */
li {
    list-style-type: none;
}

/* a elements layout - balises 'a' contenant par exemple les liens */
a {
  color:#97B7D1;
  text-decoration: none;
}
 /* Lorsqu'on passe la souris sur un lien, fonction hover */
a:hover {
  color: #617F99;
}

/* classe du menu seulement disponible en mode ordi */
.clear {
   clear:both;
}

/* Elements de la div avec l'id menu, et sous éléments */
ul#menu {
   display:inline-block;
   height:31px;
   width:830px;
   background-color:rgba(11,12,15,0.5);
   border-radius:5px;
   margin-left:-232px;
   box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}

ul#menu li {
   display:inline-table;
}

ul#menu li a {
   float:left;
   padding:5px 15px 5px 15px;
   transition:ease 0.8s 0.2s;
   border-bottom:1px solid transparent;
}

ul#menu li:first-child a {
   border-radius:5px 0px 0px 5px;
   margin-left:-40px;
}

ul#menu li:last-child {
   float:right;
   border-radius:0px 5px 5px 0px;
   margin: 5px 15px 0px 0px;
   margin-top:0px;
}

/* Fonction hover supplémentaire pour les éléments du menu */
ul#menu li a:hover {
   background-color:rgba(5,5,5,0.80);
   transition:ease 0.2s;
   border-bottom:1px solid skyblue;
}

/* Balises 'span' de couleur de texte */
span.red {
    color:#FF0004;
    font-weight:bold;
}
 
span.white,
strong {
    color:white;
    font-weight:bold;
    text-shadow:0px 2px 0px black;
}

/* Diverses balises d' ids et de classes */
#colleft {
    margin-left:-232px;
    float:left;
    width:400px;
    margin-right:40px;
}
 
#colright {
    float:left;
    width:0px;
    margin-bottom:50px;
}

.spacesFix {
	padding-top: 10px;
}

.encadre {
    width:400px;
    background-color:rgba(11,12,15,0.5);
    border:none;
    border-radius:5px;
    padding:15px;
    margin-bottom:10px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}

#encadrePic {
    width:400px;
    background-color:rgba(11,12,15,0.5);
    border:none;
    border-radius:5px;
    padding:15px;
    margin-bottom:10px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
 
.encadre2 {
    background-color:rgba(11,12,15,0.5);
    border:none;
    border-radius:5px;
    padding:3px;
    box-shadow:inset 1px 1px 3px rgba(0,0,0,.25);
}

/* Removed
#Sponsor { 
  margin: 0 12px;
  width: 65%;
  padding: 0;
}*/

/* Marges supplémentaires */
#grad{
  margin-top:2px;
}

/* right column adjust due to image size */
#cursus{
  margin-top:-5px;
}

/* Recentrons la photo de profil via cette classe */
.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#centeredPic {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

#logo{
	margin-bottom:7px;
	margin-left:-20px;
	float:left;
}

header .nav-item:last-child {
    /* animation: animcontactos 1s ease-out infinite; */
}

/* Burger menu at a fixed position. Only displayed in responsiveness (see end of page) */
#burger {
    position: absolute;
    right: 0px;
    top: 120px;
    display: none;
}

/* Revision date logo in the back */
#revision {
	display: inline-block;
	z-index: -1; /* -1 - 0 */
	position: absolute; /* absolute - none */
	top: 203px; /* 203 - 205 - 270 */
	left: 590px; /* 590 in the middle - 520 */
	width: 320px; /* 320 - 250 */
}

/* CSS text animation Google Fonts */
/*@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);*/

/* CSS text animation : Global */
/*html{
  min-height: 100%;
  overflow: hidden;
}*/

/*body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family: 'Anonymous Pro', monospace;  
  background-color: rgb(25,25,25);  
}*/

.line-1{
	color: #FF911E;
	/*font-family: 'Anonymous Pro', monospace;*/
	
    position: absolute; /* relative */
    top: 6%;
    width: 21em;
    margin: 0 auto;
	margin-left: 3%;
    border-right: rgba(255,255,255,.95); /* 2px solid to see cursor */
    font-size: 133%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

/* CSS Animation */
.anim-typewriter{
    animation: typewriter 3s steps(43) 1s 1 normal both,
    blinkTextCursor 500ms steps(43) normal;
}
@keyframes typewriter{
    from{width: 0;}
    to{width: 16em;}
}
@keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.95);}
    to{border-right-color: transparent;}
}

/* Responsiveness */
@media screen and (max-width: 460px){
	body{
		font-size:16px;
	}
	#blog{
		padding-top: 5%;
		padding-left: 36%;
		padding-bottom: 310px;
	}
	#logo{
		margin-bottom:7px;
		margin-left:-168px;
		float:left;
	}
	
	ul#menu{
		width: 0%;
	}
	#colleft{
		margin-left:-140px;
	}
	#colright{
		margin-left:-440px;
		margin-top:1435px;
	}
	
	/* Let's hide default menu on top of header */
	.clear{
		display:none;
	}

	/* .clear overrides this */
	/* Just in case they are displayed */
	#hideres1{
		margin-top:-18px;
		margin-left:260px;
		text-align:center;
	}
	#hideres2{
		margin-left:208px;
		text-align:center;
	}
	#hideres3{
		margin-left:208px;
		text-align:center;
	}
	.hideres{
		display: none;
	}
	/* Hiding one text line of the document */
	#hideresDetail{
		display: none;
	}
	
	/* Now we can display the burger button */
	/* Remember, its position is fixed !*/
	#burger {
        display: inline-block;
        z-index: 10; /* Stays on top of menu items */
		font-size: 25px;
    }
    #burger.open + ul {
        transform: translate(0px, 0px);
        transition: all .8s ease-out;
    }
	
	/* Displaying the menu and animate */
	header{
		display: flex;
		align-items: flex-end;
		/* and/or */
		padding: 40px 0 0 12px;
		width: 65%;
	}

	/* Layout of these hidden menu elements */
	nav {
		width: 100%;
	}

	header ul {
		display: flex;
		flex-direction: column;
        background-color: rgba(0,0,0,.88);
        position: absolute;
        margin: 0;
        left: 0; top: 160px; right: 0; bottom: 120px;
        transform: translate(-100vw, 0px);
        transition: all .8s ease-out;
		font-size:21px;
		line-height:210%;
		padding: 5px;
		justify-content: center;
		align-items: center;
		margin-left: 25%;
	}

	header .nav-item {
		width: 100%;
        padding: 0;
		list-style-type: none;
		text-align: center;
		transition: all .2s ease-in;
		cursor: pointer;
	}

	header .nav-item:hover {
		transform: scale(1.2, 1.2);
		transform: translate(0px, -10px);
		transition: all .2s ease-out;
	}
	
	#revision {
	display: inline-block;
	z-index: -1; /* -1 - 0 */
	position: absolute; /* absolute - none */
	top: 221px; /* 203 - 230 */
	left: 225px; /* 590 in the middle - 520 */
	width: 190px; /* 230 - 190 */
	}
	
	.line-1{
    top: 5em;
	margin-left: -25%;
    border-right: rgba(255,255,255,.95);
    font-size: 124%;
    transform: translateY(-50%);
	}
}