html, body{
	margin:0;
	padding:0;
    font-family: CenturyGoth;
    font-size: 18px;
    height: 100%;
    width: 100%;
    background-image: url("../img/bgpage.png");
    background-attachment: fixed;
	background-size: cover;
    overflow-x: hidden;
}

/*Déclaration fonts*/
@font-face {
    font-family:"Forte";
    src: url(../fonts/FORTE.TTF);
}

@font-face {
    font-family:"Broadway";
    src: url(../fonts/BROADW.TTF);
}

@font-face {
    font-family:"CenturyGoth";
    src: url(../fonts/GOTHIC.TTF);
}

/*Balises*/
h1{
    opacity: 0%;
    flex: none;
	font-family: Broadway;
	font-size: 550%;
	color: white;
    text-align: center;
}

h2{
    font-weight: bold;
    font-family: Forte;
    font-size: 50px;
}

h3{
    font-family: Forte;
    font-size: 35px;
}

a{
    color: white;
    transition: 0.5s;
}

footer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 60%;
    text-align: center;
    background-color: black;
}

/*Tout devrait être par ordre d'apparition - normalement*/
/*Classes*/
.about{
    display: flex;
    align-items: center;
    background-image: url(../img/about.png);
    width: 100%;
    height: 80%;
}

.aboutmarg{
    margin-left: 50px;
    margin-right: 50px;
    height: 80%;
}

.competences{
    text-align: right;
    margin-bottom: 15%;
}

.btn{
    background-color: #9C9B99;
    color: white;
    border: 3px solid #9C9B99;
    width: 200px;
    height: 50px;
    transition:0.5s;
}

.work{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 120%;
    padding-top: 10%;
    padding-left: 10%;
    background-repeat: no-repeat;
    background-size: cover;
}

.un{
    z-index: 3;
    top: -150px;
    left: 0px;
    opacity: 0%;
}

.deux{
    z-index: 1;
    top: -500px;
    left: 50px;
    opacity: 0%;
}

.planetes{
    position:relative;
    width: 80%;
    height: 80%;
    z-index: 2;
}

.satellite{
    position:relative;
    width: 20%;
    height: 20%;
    opacity: 0;
}

/*Id*/
#flex{    
    display: flex;    
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    height: 100%;
}

#avatar{
    position: relative;
    /*top:0px;
    left:0px;*/
	border: 2px solid black;
	box-shadow:4px 4px 4px black;
	border-radius: 50%;
	width: 350px;
	height: 350px;
}

#textcontact{
    color: white;
    font-size: 80px;
    padding-top: 1%;
}

/*Enfants*/
#langues img{
    position: relative;
    height: 50px;
    width: 50px;
    left: 0px;
    display: initial;
}

/*Actions*/
.liencontact:hover{
    text-decoration: none;
    font-weight: bold;
    font-size:200%;
    color: #A1DBFF;
}

.btn:hover{
    width: 250px;
    height: 75px;
    text-align: center;
    background-color: #4F328A;
    border: 3px solid #4F328A;
    font-size: 200%;
    font-weight: bold;
}

/*Galaxy S9*/
@media all and (max-width: 400px) and (max-height: 800px) {
    h1{
        font-size: 340%;
        text-align: center;
    }
    .about{
        height: 200%;
        text-align: left;
    }
    
    .aboutmarg{
        margin-left: 0px;
        margin-right: 0px;
        height: 80%;
    }
    .competences{
        text-align: left;
    }
    
    .work{
        height: 110%;
        padding-left: 20%;
    }
}


/*iPhone 6/7/8*/
@media screen and (min-width: 400px) and (max-width: 992px) and (max-height: 800px){
    h1{
     font-size: 400%;   
    }
    #cvdetail{
        font-size: 340%;
        text-align: center;
    }
    
    .about{
        height: 220%;
        text-align: center;
    }
    
    .work{
        padding-left: 20%;
    }
}

/*iPhone X*/
@media screen and (max-width: 992px) and (min-height: 801px){
    h1{
        font-size: 340%;
    }
    
    #cvdetail{
        text-align: center;
    }
    
    .about{
        height: 170%;
    }
    
    .aboutmarg{
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .work{
        padding-left: 20%;
    }
}

/*Kindle Fire et grands écrans en général*/
@media screen and (min-width: 680px) and (max-width: 991px) and (min-height: 600px) and (max-height: 800px){
    .about{
        height: 180%;
    }
    
    .work{
        height: 190%;
        padding-top: 15%;
    }
}

/*Petits écrans larges*/
@media screen and (min-width: 993px) and (min-height: 500px) and (max-height: 820px)
{
    .about{
        height: 120%;
    }
}

/*empêcher la rotation*/
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/*petit écran
@media all and (max-width: 680px) and (min-height: 641px) and (max-height: 800px){
    h1{
        font-size: 340%;
    }
    .about{
        height: 160%;
        padding-top: 0%;
    }
    
    .work{
        height: 160%;
    }
}

@media all and (min-width: 993px) and (max-height: 820px)
{
    .about{
        height: 100%;
    }
}*/