@font-face {
    font-family:"Gotham Black" ;
    src: url(font/Gotham-Bold.otf);
}

@font-face {
    font-family:"Gotham Light" ;
    src: url(font/Gotham-Medium.otf);
}

h1 {

    font-family: "Gotham Black";
    text-align: center;
    color:white;
    text-shadow: #160207;    
    margin-top: 100px;

}

p {

    font-family: "Gotham Light";
    text-align: center;
    color:white;
    text-shadow: #160207;
    margin-bottom: 100px;
    font-size: 15px;
    padding: 17px;

}

header {

    display: flex;
    background-color: black;
    height: 90px;
   margin: auto;
   max-height: 100%;
   border-radius: 10px;
  

}

.welcome {

    background-color: #ffcf21;
    padding: 5px;
    border-radius: 10px;

}

.btn1 {

    background-color :#731291;
    font-family: "Gotham Light";
    color: white;
    padding: 14px;
    border-radius: 100%;
    border: 0;

}

.btn2 {

    background-color : #ec4f00;
    font-family: "Gotham Light";
    color: white;
    padding: 8px;
    border-radius: 100%;
    border: 0;

}

.btn3 {

    background-color :#ffcf21;
    font-family: "Gotham Light";
    color: white;
    padding: 9px;
    border-radius: 100%;
    border: 0;
}

.btn4 {

    background-color: white;
    font-family: "Gotham Light";
    color: #160207;
    padding: 10px;
    border-radius: 100%;
    border: 0;

}




body {

display: block;    
background-color: #2e2e2e;
max-width: 800px;
margin: 10px auto;

}

footer {

    display: flex;
    flex-wrap: wrap;
    background-color: #160207;
    height: auto;
    max-height: 100%;
    border-radius: 5px;
    margin: auto;
    align-self: flex-end;
    padding: 1rem;
    
}

h2 {

    color: white;
    font-family: "Gotham Black";
}

h3 {

    display: flex;
    color: white;
    font-family: "Gotham Light";
    font-size: 15px;
    text-align: left;
    margin-left: 20px;


}

a {

    color:#160207;


}

.welcome-title {

color: #731291;


}

.welcome-line {

    color:#ec4f00

}

.bio-title {

    
    text-align: right;



}

.bio {

    display: flex;
    margin: 50px auto;
    align-items: center;
    gap: 20px;
    max-width: 1000px;

}


.bio-text {


text-align: right;
font-size: 17px;


}

.projects-container {

    margin: 20px;


}

iframe {

    align-self: center;

}

.secret-access {

color: #2e2e2e;

}

.dbjr-drawing {

max-width: 400px;
height: auto;
display: block;
border-radius: 8px;
margin: auto;
margin-top: 20px;

}

.dbjr-logo {

width: auto;
height: auto;
max-width: 110px;
margin-right: auto;
padding: 10px;
border-radius: 10px;


}

.autres-pages {

display: flex;
margin-left: auto;
gap: 10px;
padding: 20px;
margin-right: 5px;

}

.satellite {

align-content: center;

}

video {

    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
   

}

hr {

    border-color: #160207;


}

.introduction {

    color: #ec4f00;
    margin: 20px;


}

.gallery-title {

text-align: center;

}

.bio-block {

    display: block;
    background-color: #160207;
    padding: 20px;
    border-radius: 8px;
    color: #731291;
    max-width: 80%;
    margin: auto;

}

.bio-body {

background-color: #731291;


}

.gallery-body {

    background-color: #ec4f00;

}

.projects-body {

    background-color: #ffcf21;

}

.contact-body{

    background-color: white;

}

.dpb-logo {


display: flex;
width: auto;
height: auto;
max-width: 10%;
margin-left: auto;
padding: 10px;
filter: invert(1);

}

.footer-text {

align-self: flex-end;
margin-left: 10px;

}