diff --git a/universal/game.css b/universal/game.css new file mode 100644 index 00000000..324358b2 --- /dev/null +++ b/universal/game.css @@ -0,0 +1,124 @@ + + body { + background-image: url('50725124510.jpeg'); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} + +.button { + background-image: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(0,242,255,1) 100%); + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 50px; + font-family: monospace; + font-size: 20px; + background-color: black; + color: black; + } + + .button { + transition-duration: 0.4s; + } + + +.button1 { + background-color: white; + background-image: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(0,242,255,1) 100%); + color: black; + border: 2px solid #4CAF50; +} + +.button:hover { + color: white; + background-image: linear-gradient(90deg, #00cfd6, #00cfd6); +font-size: 28px; + +.container { + display: flex; + justify-content: center; + align-items: center; + align-content: center; + flex-wrap: wrap; + width: 80vw; + margin: 0 auto; + min-height: 100vh; +} + +p { + font-family: vt323; + font-size: 20px; + color: #ffffff; + border: 2px solid black; + outline: #4CAF50 solid 10px; +} + +h1 { + font-family: vt323; + color: #ffffff; +} + +img { + border: double 2px transparent; + border-radius: 25px; + background-image: linear-gradient(black, black), + linear-gradient(to right, aqua, lime); + background-origin: border-box; + background-clip: content-box, border-box; +} + +a { + color: white; + padding: 10px 10px; + border: 4px solid linear-gradient(90deg, rgba(0,255,48,1) 0%, rgba(0,242,255,1) 100%); + font-family: monospace; +} + +img { + transition-duration: 0.8s; +} + +img:hover { + border-radius: 0px; + border-width: 0px; +} + + +.gradient-box { + + display: flex; + align-items: center; + //width: 50vw; + width: 90%; + margin: auto; + max-width: 22em; + + position: relative; + padding: 30% 2em; + box-sizing: border-box; + + $border: 5px; + color: #FFF; + background: #000; + background-clip: padding-box; /* !importanté */ + border: solid $border transparent; /* !importanté */ + border-radius: 1em; + + &:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: -1; + margin: -$border; /* !importanté */ + border-radius: inherit; /* !importanté */ + background: linear-gradient(to right, red, orange); + } +} + +html { height: 100%; background: #000; display: flex; } +body { margin: auto; }