@font-face {
font-family: 'Roboto';
src: url('../font/Roboto/Roboto-Regular.ttf');
}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto/Roboto-Italic.ttf');
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto/Roboto-Medium.ttf');
font-weight: bold;
}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto/Roboto-Medium.ttf');
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: 'Assistant';
src: url('../font/Assistant/Assistant-Regular.ttf');
}
@font-face {
font-family: 'Poppins';
src: url('../font/Poppins/Poppins-Medium.ttf');
}
body{
background-color: #292929;
font-family: 'Assistant', 'Roboto' !important;
color: white;
}
.btn-warning{
background-color: #cd0000;
border: #cd0000;
color:white;
}
.btn-warning:hover{
background-color: #e71616;
border: #e71616;
color: white;
}
.error{
color: red;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.block{
    display: block;
}
.titre{
    font-family: 'Poppins';
    font-size: 55px;
    margin-top: 15px;
    text-align: center;
}
.fc{
    width: auto;
    margin-left: 15px;
}

body::-webkit-scrollbar {
    width: 10px;   
}

body::-webkit-scrollbar-track {
    background-color: #383838;
    border-radius: 7px;
}

body::-webkit-scrollbar-thumb {
    background-color: #525252;
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #fdfdfd;
}

/*COVER ------------------------------------------------*/
.cover{
background-image: url('../img/Cover.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 89vh;
display: flex;
align-items: center;
justify-content: center;
}
.covercol{
padding: 10px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
}
.covercol img{
width: 50%;
}
.covercol h1{
font-family: 'Poppins';
font-size: 70px;
}
.covercol p{
font-family: 'Assistant';
font-size: 20px;
}
.btn-conneximg{
background-color: #cd0000;
border: #cd0000;
color:white;
font-size: 15px;
padding: 6px 10px;
border-radius: 5px;
}
.btn-conneximg:hover{
background-color: #e71616;
border: #e71616;
color: white;
}
/*FIN COVER -------------------------------------------------------------*/
/*LOGIN -----------------------------------------------------------------*/
.login{
height: 89vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../img/Cover.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.login form{
color: white;
padding: 50px;
border-radius: 15px;
box-shadow: black;
margin: 50px 100px;
height: 80%;
width: 80%;
backdrop-filter: blur(15px);
background-color: rgba(182, 182, 182, 0.2);
}
.logincol{
padding: 10px;
color: black;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
}
.logincol h1{
font-family: 'Poppins';
font-size: 70px;
}
.logincol p{
font-family: 'Assistant';
font-size: 20px;
}
.logincol input{
padding: 6px 10px;
border-radius: 10px;
border: none;
}
.logincol input:focus{
outline:none;
}
/*FIN LOGIN -------------------------------------------------------------*/
/*DOWNLOAD --------------------------------------------------------------*/
.download{
    text-align: center;
    margin-top: 15px;
}
.download h1{
    font-family: 'Poppins';
    font-size: 70px;
    margin-bottom: 15px;
}
/*FIN DOWNLOAD ----------------------------------------------------------*/
/*GALLERY ---------------------------------------------------------------*/
.rowgallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.columngallery {
flex: 25%;
max-width: 25%;
padding: 0 4px;
text-align: center;
}
.columngallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 15px;
cursor: pointer;
}
.columngallery a{
    text-decoration: none;
    color: white;
    font-size: 25px;
}
/*FIN GALLERY -----------------------------------------------------------*/
/*TAG -------------------------------------------------------------------*/
.tag{
height: 89vh;
align-items: center;
justify-content: center;
background-image: url('../img/Cover2.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.tagrow {
color: white;
padding: 50px;
border-radius: 15px;
box-shadow: black;
margin: 50px auto;
height: 80%;
width: 80%;
backdrop-filter: blur(15px);
background-color: rgba(182, 182, 182, 0.2);
}
.coltag{
padding: 10px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
height: 100%;
}
.tag a{
text-decoration: none;
}
.tag a:first-child{
border-radius: 10px 10px 0 0;
}
.tag a:last-child{
border-radius: 0 0 10px 10px;
}
.btn-tag{
    color:#cd0000;
}
.btn-tag:hover{
    color:#e71616;
}
.inner-tag {
    display: inline-block;
    max-height: 100%;
    height: 100%;
    padding: 3px;
    overflow: auto; 
}
/*FIN TAG ---------------------------------------------------------------*/
/*SHOW PIC --------------------------------------------------------------*/
.titreshow{
    margin: 0;
    padding-top: 15px;
}
.show{
text-align: center;
height: 89vh;
color: white;
align-items: center;
justify-content: center;
background-image: url('../img/Cover2.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.showrow {
color: white;
padding: 50px;
border-radius: 15px;
box-shadow: black;
margin: 25px auto;
height: 80%;
width: 80%;
backdrop-filter: blur(15px);
background-color: rgba(182, 182, 182, 0.2);
}
.colshow{
padding: 10px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
height: 100%;
}
.colshow img{
max-height: 100%;
object-fit: contain;
}
.show p{
text-decoration: none;
padding-top: 10px;
padding: 0 10px;
}
.showfolder {
    margin: 0 auto;
}
.showfolderdiv{
    flex-direction: column;
    margin: auto 10px;
}
.showfolderdiv button:first-child {
    margin-bottom: 10px;
}
.inner-right {
    display: inline-block;
    max-height: 200px;
    height: 100%;
    width: 100%;
    vertical-align: top;
    padding: 3px;
    overflow: auto; 
    margin-bottom: 10px;
}
/*FIN SHOW PIC ----------------------------------------------------------*/
/*NUAGE -----------------------------------------------------------------*/
.fleximgnuage{
margin-top: 10px;
display:flex;
width: 100%;
flex-wrap: wrap;
}
.fleximgnuage img{
margin-left:10px;
border-radius: 10px;
max-width: 150px;
}
.fleximgnuage img:first{
margin-left: 0;
}
.imagenuage {
display: block;
max-width: 100%;
max-height: 100%;
padding: 0px;
margin: 0px;
object-fit: cover;
}
.wrapper {
display: grid;
width: 100%;
grid-auto-rows: 150px;
}
.imagenuage {
display: block;
max-width: 100%;
max-height: 100%;
padding: 0px;
margin: 0px;
object-fit: cover;
}
.nuage_base {
margin-top : 50px;
display : flex;
flex-direction : column;
width : 100%;
}
.box1 {
z-index: 100;
border: 1px solid red;
grid-column-start: 3;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 6;
}
.box1 .imagenuage {
width: 500%;
height: 300%;
}
.box2 {
z-index: 50;
border: 1px solid black;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 5;
}
.box2 .imagenuage {
width: 200%;
height: 200%;
}
.box3 {
border: 1px solid black;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 6;
grid-row-end: 8;
}
.box3 .imagenuage {
width: 200%;
height: 200%;
}
.box4 {
z-index: 50;
border: 1px solid black;
grid-column-start: 6;
grid-column-end: 9;
grid-row-start: 5;
grid-row-end: 7;
}
.box4 .imagenuage {
width: 200%;
height: 300%;
}
.box5 {
border: 1px solid black;
grid-column-start: 8;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 3;
}
.box5 .imagenuage {
width: 200%;
height: 200%;
}
.box6 {
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 5;
}
.box6 .imagenuage {
width: 100%;
height: 300%;
}
.box7 {
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.box7 .imagenuage {
width: 300%;
height: 100%;
}
.box8 {
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.box8 .imagenuage {
width: 200%;
height: 100%;
}
.box9 {
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 6;
grid-row-end: 8;
}
.box9 .imagenuage {
width: 200%;
height: 300%;
}
.box10 {
border: 1px solid black;
grid-column-start: 6;
grid-column-end: 8;
grid-row-start: 7;
grid-row-end: 8;
}
.box10 .imagenuage {
width: 100%;
height: 200%;
}
.box11 {
z-index: 1;
border: 1px solid black;
grid-column-start: 8;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 6;
}
.box11 .imagenuage {
width: 200%;
height: 300%;
}
.box12 {
border: 1px solid black;
grid-column-start: 4;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 3;
}
.box12 .imagenuage {
width: 400%;
height: 200%;
}
.box13 {
border: 1px solid black;
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
grid-row-end: 8;
}
.box13 .imagenuage {
width: 200%;
height: 200%;
}
.box14 {
z-index: 10;
border: 1px solid black;
grid-column-start: 8;
grid-column-end: 10;
grid-row-start: 6;
grid-row-end: 8;
}
.box14 .imagenuage {
width: 200%;
height: 200%;
}
/*FIN NUAGE -------------------------------------------------------------*/
/*USER ------------------------------------------------------------------*/
.tableuser{
color: white;
}
.btnadduser{
    margin-top: 10px;
    display: flex;
}
/*FIN USER --------------------------------------------------------------*/
/*SEARCH ----------------------------------------------------------------*/
.rowsearch{
    height: auto;
    width: fit-content;
}
.input-search{
    display:inline;
    width: auto;
}
.form-search{
    display: block;
    margin: 10px auto;
    text-align: center;
}
/*FIN SEARCH ------------------------------------------------------------*/
/*FOLDER ----------------------------------------------------------------*/
.sizefolder{
    max-width: 150px;
}
.columnfoldersix {
    width: 16.66%;
    max-width: 16.66%;
}
/*FIN FOLDER ------------------------------------------------------------*/
/*CSS TO LITTLE SCREEN --------------------------------------------------*/
@media screen and (max-width: 800px) {
.flex{
display: block;
}
.titre{
    font-size: 40px;
}
/*COVER*/
.cover{
display: block;
height: auto;
}
.covercol{
height: auto;
display: block;
}
.covercol button{
margin-bottom: 15px;
}
.covercol img{
width: 70%;
}
.covercol h1{
font-size: 48px;
}
/*LOGIN*/
.login form{
height: auto;
width: auto;
padding: 10px;
}
.logincol{
display: block;
width: auto;
height: auto;
}
.logincol h1{
font-size: 48px;
}
/*DOWNLOAD*/
.download h1{
    font-size: 40px;
}
/*GALLERY*/
.columngallery {
flex: 50%;
max-width: 50%;
}
/*SHOW PIC*/
.show{
    height: auto;
    padding-bottom:15px;
    background-position-x: center;
}
.showrow{
    padding: 10px;
    height: auto;
}
.colshow{
    width: 100%;
    height: auto;
    padding:0;
    padding-top: 10px;
}
.showfolderdiv{
    display: blocks;
}
.showfolderdiv button:first-child {
    margin-top: 10px;
}
/*TAG*/
.tag{
    background-position-x: center;
}
.tagrow{
    padding: 10px;
    height: auto;
}
.coltag{
    height: auto;
    display: block;
    width: auto;
    padding: 0;
}
.tagrow form{
    margin-top: 10px;
}
.inner-tag {
    max-height: 300px;
}
/*SEARCH*/
.input-search{
    margin-bottom: 5px;
}
/*FOLDER*/
.columnfoldersix {
    flex: 50%;
    max-width: 50%;
}
}
@media screen and (max-width: 700px) {
.columngallery {
flex: 100%;
max-width: 100%;
}
/*FOLDER*/
.columnfoldersix {
    flex: 100%;
    max-width: 100%;
}
}
/* FIN CSS TO LITTLE SCREEN ---------------------------------------------*/