.wrapper-nav{position:fixed;top:0;z-index:2;width:100%}.nav{position:absolute;top:5.2rem;left:-173px;transition:all .5s ease-in-out}.nav .btn-primary{background-color:#3a3a3c;border-color:#3a3a3c}.box{height:75px;width:75px;background:#f8f8f8;margin-left:5px;margin-right:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center;top:1px}.box,.contLigne{position:relative}.contLigne{width:22.5px;height:15.75px;cursor:pointer}.lignes{width:100%;height:2px;border-radius:5px;background:#000;position:absolute;transition:all .5s ease-in-out}.lignes:first-child{top:0}.lignes:nth-child(2){top:6.75px}.lignes:nth-child(3){top:13.5px}.btn1.active .lignes:first-child{top:4.5px;transform:rotate(135deg)}.btn1.active .lignes:nth-child(2){transform:translateX(-7px);opacity:0}.btn1.active .lignes:nth-child(3){top:4.5px;transform:rotate(-135deg)}.nav.active{transform:translateX(173px)}.to-scroll{margin-top:1rem}.btnnav{margin:5px}.btn-nav a,.btn-nav a:hover{color:#fff;text-decoration:none}.form{margin:0 auto}.form li .uppercase{text-transform:uppercase}.form-control{width:60%!important;margin:0 auto!important}.display-keyboard-letters ul{margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center}.display-keyboard-letters li{position:relative;display:inline-block;width:2.5rem;border:1px solid #fff;color:#fff;font-size:1.5em;background-color:#555;border-radius:.3rem;display:flex;justify-content:center;align-items:center}.display-keyboard-letters li.isActive{background-color:#222}.display-keyboard-letters li.isGoodPlaced{background-color:#e7002a}.display-keyboard-letters li.isBadPlaced{background-color:#ffbd00}.display-keyboard-letters li.isBadPlaced.isGoodPlaced{background-image:linear-gradient(45deg,#fd1d1d 50%,#ffbd00 0)}.wordle .display-keyboard-letters li.isGoodPlaced{background-color:#3eaa42}.wordle .display-keyboard-letters li.isBadPlaced{background-color:#d3952a}.wordle .display-keyboard-letters li.isBadPlaced.isGoodPlaced{background-image:linear-gradient(45deg,#3eaa42 50%,#d3952a 0)}.display-keyboard-letters li a{text-decoration:none;color:#fff;display:block;width:100%}.display-keyboard-letters li.maj{width:6rem;font-size:1.5em}.display-keyboard-letters li.backspace{width:6rem}.display-keyboard-letters li.exclude{width:50%;font-size:1.1em;background-color:#0077c7;line-height:1.3rem;height:60px}.display-keyboard-letters li.validate{width:50%;font-size:1.1em;background-color:#fff;line-height:40px;height:40px;border:2px solid #e7002a;margin:1rem 0 .5rem}.display-keyboard-letters li.validate a{color:#e7002a}.display-keyboard-letters li.validate:active{background-color:#e7002a;border:2px solid #fff}.display-keyboard-letters li.validate:active a{color:#fff}.wordle .display-keyboard-letters li.validate{background-color:#fff;border:2px solid #3eaa42}.wordle .display-keyboard-letters li.validate a{color:#3eaa42}.wordle .display-keyboard-letters li.validate:active{background-color:#3eaa42;border:2px solid #fff}.wordle .display-keyboard-letters li.validate:active a{color:#fff}.display-keyboard-letters li.excludeActive{background-color:#0077c7;opacity:1}.wordle .display-keyboard-letters li.excludeActive{background-color:#3a3a3c}.display-keyboard-letters li.notinword,.wordle .display-keyboard-letters li.notinword{opacity:.7}.display-keyboard-letters li.notinword a:before{content:"X";color:red;font-size:2rem;position:absolute;left:8px;top:-4px;opacity:.6}.display-keyboard-letters li.reset{width:50%;font-size:1.1em;line-height:1.3rem;height:60px}.display-control-letter{display:none;position:absolute;top:-4rem;left:.5rem;width:2.5rem;border:1px solid #fff;color:#555;font-size:1.5em;background-color:#fff;border:1px solid #555;border-radius:.3rem;z-index:1}.isActive .display-control-letter{display:block}.display-keyboard-letters li.notplaces{background-color:#e7002a;background-color:#555}.display-keyboard-letters li.goodplaces{background-color:#ffbd00}.input-letters ul{padding:0}.input-letters li{display:inline-block;width:2.3rem;border:1px solid #fff;color:#fff;font-size:1.5em}.possible-letters .nb-words{font-weight:700;font-size:1.2rem}.possible-letters .oneLengthWord,.possible-letters .oneLengthWord p{margin:1rem}.possible-letters .oneLengthWord span{font-size:1.1rem;text-transform:uppercase;margin:1rem;padding:.5rem;border-radius:.5rem;display:inline-block;box-shadow:0 1px 1px rgba(0,0,0,.07),0 2px 2px rgba(0,0,0,.07),0 4px 4px rgba(0,0,0,.07),0 8px 8px rgba(0,0,0,.07),0 16px 16px rgba(0,0,0,.07)}@font-face{font-family:"Arista 2.0";src:url(/sutom/fonts/Arista2.0.0d211bd1.ttf)}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem}.color-grid{background-color:#0077c7}.color-good-place{background-color:#e7002a}.color-bad-place{background-color:#0077c7}.bad-place,.color-bad-place span{background-color:#ffbd00}.color-bad-place span{border-radius:2rem;width:2.3rem;display:inline-block}.color-border{background-color:#fff}.wordle .input-letters li{border-radius:.5rem}.wordle .color-grid{background-color:#3a3a3c}.wordle .color-good-place{background-color:#3eaa42}.wordle .color-bad-place{background-color:#d3952a}.wordle .color-bad-place span{background-color:#d3952a;border-radius:0}.color-letter-nok{color:#0077c7}.color-letter-good-place{color:#e7002a}.color-letter-bad-place{color:#ffbd00;border-radius:2rem}.color-letter-nok{color:#3a3a3c}.wordle .color-letter-good-place{color:#3eaa42}.wordle .color-letter-bad-place{color:#d3952a;border-radius:none}.intro a{color:#e7002a}.header-top{z-index:0;top:0;background:#fff;width:100%;position:static}.h1,h1{text-align:center;text-transform:uppercase;margin:0;background-color:#f8f8f8;border:1px solid #ccc;box-shadow:0 2px 5px #ddd;text-shadow:0 2px 4px #000;color:#fff;font-size:1.5rem!important;font-family:"Arista 2.0";width:100%;position:fixed;top:0;z-index:1}h1>span{display:inline-block;width:2rem;border:1px solid #fff;background-color:#0077c7}.sound-element{position:fixed;top:26px;right:3%;z-index:2;display:block}.sound-element img{width:36px}.intro{margin-top:5.5rem}.intro p{text-align:center;padding:0 .5rem;margin:0}.wordle .intro a{color:#3eaa42}.intro img{width:20%;display:inline-block}.intro span{padding:.3rem}