/*
 * @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap');
 */
 
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}

body {
    background-color: transparent;
    background-image: url("/assets/images/ipl___bg.jpg") !important;
    background-size: cover;
    background-position: center;    
    background-repeat: no-repeat;  
    display: flex;
    flex-direction: column;
}
/*
 *  F O N T
 *
@font-face {
    font-family: 'MinionPro-Regular';
    src: 
        url('./fonts/MinionPro-Regular.otf') format('truetype'),
    font-weight: 400;
    font-style: normal;
}
*/
/*
 * L A Y O U T
 */
.content{
    flex-grow: 1;
}
footer {
    border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;
    font-size: 13px;
    text-align: center;
    padding-bottom: 5px;
}
/*
 *
 */
.footer__inner {
    border-top: 1px solid #D5DCE5;
    padding: 15px 0;
}
a {
    text-decoration: none;
}
h1 {
    font-size:200%;
}
legend {
    padding:0 5px;
    text-align:right;
}
fieldset > div {
    margin:10px 0;
}
fieldset > legend + div {
    margin-top:0;
}
fieldset > div:last-child {
    margin-bottom:0;
}
label {
    display:inline-block;
}
input {
    width:200px;
}
input[type="number"] {
    width:30px;
}
div > input[type="submit"] {
    background: #ccc;
    border:1px solid #999;
    width:auto;
}
input:required {
    background:hsl(180, 50%, 90%);
    border:1px solid #999;
}
input:optional {
    background:hsl(300, 50%, 90%);
    border:1px dotted hsl(180, 50%, 90%);
}
input:valid,
input:in-range {
    background:hsl(120, 50%, 90%);
    border-color:hsl(120, 50%, 50%);
}

input:invalid,
input:out-of-range {
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 96%);
}
.help {
    display:none;
    font-size:90%;
}
input:focus + .help {
    display:inline-block;
}
div.submit {
    margin-left:100px;
}
/*
 *
 */
.bg-light {
    --bs-bg-opacity: 0.6 !important;
}
/*
 *--------------------
 * Effet goutte d'O
 *--------------------
 */
:root {
    --ripple-width: 200px;
    --ripple-height: 25px;
}
/*
body {
    background: lightcyan;
}*/
.effet {
/*    
    border: 2px solid red;
    width: 300px;
    height: 300px;
    margin: 4rem auto;
*/    
    display: flex;
    align-items: center;
    justify-content: center;
}
.ripple {
    width: var(--ripple-width);
    height: var(--ripple-height);
/*    position: relative;
*/    &:before,
    &:after {
        position: absolute;
        content: "";
        display: block;
        border: 6px solid cornflowerblue;
        border-radius: 50%;
        width: var(--ripple-width);
        height: var(--ripple-height);
        animation: ripple infinite ease-out 1.5s;
        opacity: 0;
    }
    &:after {
        animation-delay: 0.5s;
    }
}
@keyframes ripple {
    from {
        opacity: 1;
        transform: scalex(0) scaley(0);
    }
    to {
        opacity: 0;
        transform: scalex(1) scaley(1);
    }
}
/*
 *
 */