@import 'fonts.css';
@import 'button.css';
*{
    margin: 0;
    padding: 0;
    font-family: 'Rubik', sans-serif;
}
body{
    background-color: #fff;
}
h1{
    font-size: clamp(50px, calc(100vw * 0.06), 80px);
}
h2,h4{
    color: whitesmoke;
}
h4{
    font-size: 20px;
}
h3{
    font-size: clamp(40px, calc(100vw * 0.04), 60px);
}
p{
    font-size: clamp(10px, calc(100vw * 0.013), 20px);;
}
a{
    text-decoration: none;
}
/*Commun au page*/
header{
    height: 90px;
    background-color: #fb8500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
}
header div{
    text-align: left;
    text-transform: capitalize;
}
header a{
    text-decoration: none;
}
.alert{
    background-color: #8ac926;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    height: 0px;
    width: 80%;
    border-radius: 0 0 30px 30px;
    animation: alert-hidden 2s linear forwards ;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 10;
}
@keyframes alert-hidden {
    0%{    height: 0px;    }
    10%{   height: 40px;   }
    90%{    height: 40px;   }
    100%{   height: 0;      }
}

.alert p{
    color: white;
}
.return {
    margin-left: 20px;
    text-decoration: none;
    font-size: 22px;
    color: #888;
}
input, textarea{
    border: none;
    background-color: #ffffff00;
    border-bottom: 1px solid gray;
    margin-bottom: 2px;
    padding: 10px;
    outline:none;
}
input:focus-visible,
textarea:focus-visible {
    border-bottom: 3px solid #fb8500;
    margin-bottom: 0px;
    border-radius: 3px;
}

@media only screen and (max-width: 600px) {
    h1, h3{
        font-size: calc(100vw * 0.1);
    }
    p{
        font-size: calc(100vw * 0.03);
    }

}