/*
Nicolas Fleurent
Laboratoire sur les formulaires
2022-11-11
*/

/*J'ai pris ma police sur squirrel : https://www.fontsquirrel.com/ */
@font-face{
    font-family: Kaushan;
    src: url(KaushanScript-Regular.otf);
}

body{
    background: pink;
}

h1{
    color: black;
    text-shadow: 2px 2px 5px purple;
    font-family: Kaushan;
    font-size: 50px;
    text-align: center;
    background-image: url(japBanniere.jpg);
    background-size: cover;
    padding: 50px;
}

fieldset{
    display: flex;
    flex-direction: column;
    border: 5px ridge red;
    margin: 0px 50px 15px 50px;
}

legend{
    color: white;
    text-shadow: 2px 2px 5px Black;
    font-family: Kaushan;
    font-size: 36px;
}

fieldset div, textarea{
    margin: 0px 50px 5px 50px;
}

#imgCollec{
    display: flex;
    flex-direction: column;
}

label{
    display: inline-block;
    width: 300px;
}

[type="checkbox"]{
    -webkit-appearance: none;
    background-color: white;
    border: 1px solid gray;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 4px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

[type="checkbox"]:focus{
    background-color: white;
    border: 1px solid gray;
}

[type="checkbox"]:checked{
    background-color: lightcoral;
    border: 2px ridge red;
}

[type="radio"]{
    -webkit-appearance: none;
    background-color: white;
    border: 1px solid gray;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 4px;
	border-radius: 12px;
	display: inline-block;
	position: relative;
}

[type="radio"]:checked{
    background-color: lightcoral;
    border: 2px ridge red;
	border-radius: 12px;
}

input:focus, select:focus, textarea:focus{
    outline: none;
    background: lightcoral;
    border: 2px ridge red;
}

input:active{
    background: lightcoral;
}

[type="submit"], [type="submit"]:focus, [type="reset"], [type="reset"]:focus{
    display: block;
    margin: auto;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
    border: 5px red outset;
    background: pink;
    border-radius: 5px;
    text-decoration-line: none;
    font-size: large;
}

[type="submit"]:hover, [type="reset"]:hover{
    border: 5px red outset;
    background: red;
    border-radius: 5px;
}

[type="submit"]:active, [type="reset"]:active{
    border: 5px red inset;
    background: red;
    border-radius: 5px;
}