@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Raleway&display=swap');

*{margin:0;padding:0;}

html{height:100vh;}
body{
    height:100%;
    
    
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


font-family: 'Raleway', sans-serif;
color: rgb(236, 236, 236);
}

#wrapper{
    width:1500px;
    height:100%;
    margin:auto;
    padding-left:20px;
   
    background: #200122;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #6f0000, #200122);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #6f0000, #200122); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border-right: 12px solid #5a0009;
    border-left: 12px solid #5a0009;
    box-shadow: 0px 0px 35px #000000ab;
}

h1{
    text-align: center;
    font-size:100px;
    font-family: 'Lobster', cursive;
}

h2{
    text-align: center;
    font-size:36px;
    color:#ff831e;
}

#conteneurRoue{
    position:relative;
    cursor:pointer;
    left:76px;
    margin-top:30px;
}
#roueDuDestin{
    position:absolute;
    top:25px;
    left:25px;
    width:800px;
    height:800px;
    clip-path:circle(50%);
    transition: transform 20s cubic-bezier(0, 0, 0.08, 1.01);
}

#roueDuDestin img{
    position:absolute;
    left:200px;
    transform-origin: center bottom;
}

#cercle{
    position:absolute;
}

#zoom{
    position:relative;
    left:1000px;
    top:80px;
    width:400px;
    padding:10px;
    transition:transform 0.8s cubic-bezier(0.39, 1.1, 0.75, 2.5);
}

.cadre{
    border-top: 10px solid #430114;
    border-right: 10px solid #6f0000;
    border-bottom: 10px solid #28011f;
    border-left: 10px solid #640005;
}

#titreImage{
    margin-top:16px;
    font-size:28px;
    font-weight: bold;
    text-align:center;
    height: 50px;
}

h1{
    text-shadow:#e7f6ff 0 -1px 0,
    #a80a02 1px 1px 0,
    #dd3705 2px 2px 0,
    #fd8e3a 3px 3px 0,
    #9b0102 4px 4px 0,
    #541402 5px 5px 0,
    #333 5px 5px 10px;color:#ffc800;
}


.btn{
    text-decoration: none;
    padding: 14px;
    font-size: 1.5em;
    color: #ff831e;
    background-color: #9b2721;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border: 3px outset #e26616;
    box-shadow: -2px 2px 12px #0000005e;
    -webkit-box-shadow: -2px 2px 12px #0000005e;
    -moz-box-shadow: -2px 2px 12px #0000005e;

    float:right;
    margin-right:232px;
    margin-top:160px;
    cursor:not-allowed;
    opacity: 0.1;
    transition:opacity 1s;
}
    
    
.btn:hover {
    padding: 14px;
    color: #ffc800;
    border: 3px solid #a54f16;
    box-shadow: 0 0 7px #0000005e;
    -webkit-box-shadow: 0 0 7px #0000005e;
    -moz-box-shadow: 0 0 7px #0000005e;
}

#resultats{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding:50px;
}

#message{
    font-size: 26px;
    text-align: center;
    line-height: 2em;
}

#message strong{
    font-style: italic;
    font-size: 32px;
}