:root{
    --back: #252532;
    --text: #FAEBD7;
}

@font-face {
    font-family: Naipol;
    src: url(font/Naipol/Naipol_b.ttf);
}

@font-face {
    font-family: 'Garet';
    src: url(font/Garet/Garet.woff);
}

body{
    background: linear-gradient(180deg, rgba(30,30,40,1) 0%, rgba(61,62,83,1) 100%);;

    margin: 0;
}

h2{
    color: var(--text);
    font-family: Naipol;
}

h3{
    color: var(--text);
    font-family: Naipol;
}

p{
    color: var(--text);
    font-family: 'Garet';
}

/* In progress */

.in_progress{
    position: absolute;
    height: 100vh;
    width: 100%;
    transition: 1s;
}

.in_progress div{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.in_progress div p{
    font-size: 1.3rem;
}

.unset{
    display: none;
}

/* CSS Intro + container */

.intro{
    color: var(--text);
    font-family: Naipol, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    text-align: center;
    transition: 0.5s;
}

.intro h1{
    font-size: 3rem;
    
}

.intro .welcome{
    font-size: 2.6rem;
}

.loading{
    width: 10%;
    height: 20px;
    border: 2px solid var(--text);
    border-radius: 100px;
    position: relative;
    transition: 1s;
}

.point{
    height: 20px;
    width: 10%;
    background-color: white;
    border-radius: 20px;
    transition: 1s;
}

.complete{
    width: 100%;
}
.opacity{
    opacity: 0;
}

.welcome{
    opacity: 0;
    overflow: hidden;
    transition: 1s;
}

.welcome p{
    font-family: Naipol;
}

.welcome_after{
    opacity: 1;
}

.main_container{
    display: flex;
}

aside{
    width: 0%;
    opacity: 0;
    transition: 1s;
    display: flex;
    flex-direction: column;
}

.aside_after{
    width: 20%;
    opacity: 1;
}

main{
    width: 100%;
    transition: 1s;
    position: relative;
    overflow: hidden;
}

.main_after{
    width: 100%;
}

/* Fin intro + container */

nav{
    background-color: var(--text);
    color: var(--back);
    font-family: Naipol, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

nav a{
    text-decoration: none;
    font-size: 1.7rem;
    margin: 10px 0;
    padding: 10px 0;
}

.hover {
    position: relative;
    display: inline-block;
}
  
.hover::after,
.hover::before {
content: '';
position: absolute;
z-index: 10;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(181, 181, 255, 0.281), var(--back));
bottom: 0px;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.2s ease-out;
}

.hover::before {
top: 0px;
transform-origin: left;
}

.hover:hover::after,
.hover:hover::before {
transform: scaleX(1);
}

/* Gestion slide */

.slide{
    position: absolute;
    top: 0;
    right: -3000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transition: 1s;
}

.show{
    right: 0px;
}

.hide{
    opacity: 0;
}

h2{
    font-size: 2.8rem;
    font-family: Naipol, sans-serif;
}

/* About */

.flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    width: 80%;
}

.about div{
    width: 40%;

}

.about a{
    color: var(--back);
    background-color: var(--text);
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--text);
    text-decoration: none;
    font-family: 'Garet';
    transition: 0.3s;
}

.about a:hover{
    color: var(--text);
    background-color: transparent;
}

.about img{
    width: 100%;
}

/* Websites */

.card{
    width: 35%;
    background-color: white;
    margin-bottom: 50px;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 5px black;
    transition: 0.3s;
}

.card:hover{
    transform: scale(1.1);
}

.card_top{
    height: 150px;
    background-size: cover;
}

.lorenzetti{
    background-image: url(media/E_Lorenzetti.jpg);
    
}

.ark{
    background-image: url(media/ark_card.jpg);
    background-position: center;
}

.card img{
    width: 100%;
}

.card_main{
    padding: 0px 20px;
}

.card_main h3{
    margin-bottom: 0;
}

.card_main h3 a{
    text-decoration: none;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.411);
}

.card_main p{
    color: var(--back);
}

.card_main a{
    color: var(--back);
}

.tech{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    height: 100%;
    bottom: 0;
    left: -40px;
    width: 50px;
    text-align: center;
    box-shadow: 0px 2px 3px rgb(0, 0, 0);
}

.tech img{
    width: 25px;
    padding: 10px 5px;
}

/* Desc */

.desc{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

/* Description Lorenzetti*/

.desc .text{
    width: 45%;
    margin: 0 80px;
}

.desc .visit{
    color: var(--back);
    background-color: var(--text);
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Garet';
}

.desc .galerie{
    width: 35%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-right: 50px;
}

.lo_1{
    width: 80%;
    margin: 50px;
}

.lo_2{
    height: 400px;
    margin: 0 50px;
}

.lo_3{
    width: 200px;
}
/* Description Ark */

.ark_1{
    width: 100%;
}

.ark_2{
    width: 50%;
}
.ark_3{
    width: 50%;
}

.work{
    display: none;
}

.road_map{
    z-index: 10;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--text);
    padding: 10px 20px;
    text-decoration: none;
    color: #252532;
    cursor: pointer;
}

.road_map_section{
    font-family: 'Garet';
    font-size: 20px;
    color: var(--text);
}