html {
	--main-color: white;
	--second-color: #2333ad;
	background-color: var(--second-color);
	margin: 0%;
	padding: 0;
	color: var(--main-color);
	font-family: GTFlexa_thin;
	line-height: 135%;
	font-size: .7vmax;
}
body{
	margin: 0%;
	padding: 0;
}
a{
	color: var(--main-color);
	text-decoration: none;
}
a:link {
	color: var(--main-color);
	text-decoration: none;
}
a:visited {
	color: var(--main-color);
	text-decoration: none;
}
a:focus {
	color: var(--main-color);
	text-decoration: none;
}
a:active {
	color: var(--main-color);
	text-decoration: none;
}
/* Animation Intro */
#container-animation {
	position: fixed;
	width: 100%;
	height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 100;
}
#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px); /* Create a grid of boxes */
    grid-template-rows: repeat(auto-fill, 50px);
    position: relative;
    width: fit-content; /* Automatically adjust to fit all boxes */
    height: fit-content;
    margin: 0;
    padding: 0;
}
.box {
    width: 50px;
    height: 50px;
    background-color: var(--second-color);
    margin: 0; /* Avoid spacing between boxes */
}
#grid_back{
	background-color: var(--second-color);
	position: absolute;
	width: 100%;
	height: 100%;
}
/* Animation Intro */ 
#container_right{
	position: fixed;
	right: 2%;
	width: 24%;
	height: 20vh;
}
#profil-picture{
    width: 100%;
}
#footer-link-social-about{
    display: none;
}
/* NAV */
#nav{
	position: absolute;
	margin-top: 109%;
	flex: 1 1 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: .7vmax;
    line-height: 165%;
}
.nav_container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	#nav_first, #nav_second, #nav_third{
		width: 25%;
	}	
		.nav_text_animated{
			letter-spacing: 0.05em;
			transition: letter-spacing .3s ease-out;
		}
		.nav_text_animated:hover{
			letter-spacing: 0.15em;
			font-family: GTFlexa_bold;
			overflow: visible;
			white-space: nowrap;
		}
        #logo{
            position: absolute;
            width: 100%;
        }
        #space_bar{
            position: absolute;
            margin-top: 105%;
            width: 100%;
            border-top: 2px solid var(--main-color);
        
        }
/* NAV */
.follow-box {
	position: absolute;
	color: var(--main-color);
	padding: 3px 10px 0px 10px;
	transform: translate(+15%, +50%);
	font-family: GTFlexa_light;
	letter-spacing: 1px;
	font-size: .5vmax;
	white-space: nowrap;
	z-index: 10000;
	display: block;
	background-color: var(--second-color);
}
#container_total{
	padding: 2% 2% 2% 2%;
}

#container_1{
	width: 100%;
	display: flex;
	justify-content: space-between;

}

.in-line{
    margin: 0;
    display: inline-flex;
}
#container_left_about{
	width: 83%;
	display: flex;
	flex-direction: row;
    align-items: flex-end;
	position: relative;
    height: 92vh;
}
#left_text_service_soft{
    width: 30%;
}
#left_text_service_soft-mobile{
    display: none;
}
#left_text_service_soft_top{
    margin-bottom: 10%;
}
#left_text_service_soft_bottom{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
#left_text_service_soft_bottom_left{
    width: 60%;
}
#left_text_service_contact{
    width: 17%;
    margin-left: 10%;
}
#left_text_service_formation{

    margin-left: 10%;
}
.square-footer{
	background-color: white;
	height: .35vw;
	width: .35vw;
	border: none;
	outline: none;
	display: inline-flex;
	margin-right: 1vw;
    margin-block-end: 0;
    margin-block-start: 0;
}







@media screen and (max-width: 767px) { 
    html{
        font-size: 1vmax;
        font-family: GTFlexa_regular;
    }
    #container_left_about{
        width: 96%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        height: auto;
    }
    #left_text_service_soft{
        width: 50%;
        display: none;
    }
    #left_text_service_soft-mobile{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #left_text_service_soft_top-mobile{
        flex-direction: row-reverse;
        display: flex;
        margin-bottom: 6%;
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
        #left-text-picture-mobile{
            width: 55%;
        }
        #right-picture-mobile{
            width: 40%;
        }
    #left_text_service_soft_bottom-mobile{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    #left_text_service_soft_bottom_left{
        width: 60%;
    }
    #left_text_service_soft_bottom_right{
        margin-bottom: 6%;
        margin-left: 0;
    }
    #left_text_service_contact{
        width: 100%;
        margin-bottom: 6%;
        margin-left: 0;
    }
    #left_text_service_formation{
        width: 100%;  
        margin-left: 0;
        margin-bottom: 6%;
    }
    .square-footer{
        background-color: white;
        height: 1.1vw;
        width: 1.1vw;
        border: none;
        outline: none;
        display: inline-flex;
        margin-right: 5vw;
    }
    #container_right{
        display: none;
    }
    #footer-link-social-about{
        position: fixed;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        bottom: 1%;
    }
    .width-link-menu{
        width: 25%;
        line-height: 300%;
    }
    #nav{
        line-height: 165%;
        font-size: .7vmax;
    }
}