html {}
body
{
opacity:0;
animation: norm 1s forwards;
background-color: black;
font-family: 'Audiowide', cursive;
padding: 0;
margin: 0;
height :100%;
}
body#start
{
opacity:0;
animation: start 1s forwards;
background-color: black;
font-family: 'Audiowide', cursive;
padding: 0;
margin: 0;
height :100%;
}
body#lys
{
opacity:0;
animation: lys 5s forwards;
font-family:'Qwitcher Grypen', cursive;
background:linear-gradient(#FFb67F, #FFa437);
background-attachment :fixed;
min-height:100%;
padding: 0;
margin: 0;
font-size:30px;
}
body#lysform
{
animation: lys 3s forwards;
background:linear-gradient(#FFb67F, #FFa437);
padding: 0;
margin: 0;
font-family: 'Qwitcher Grypen', cursive;
font-weight: 400;
font-style: normal;
}
/*-----
@media (max-width: 600px) {
body#lysmedia {
font-size:70px;
animation: lys 4s forwards;
background-color: #FFE780;
padding: 0;
margin: 0;
font-family: 'Italianno', cursive;
font-weight: 400;
font-style: normal;
}
}
-----*/
#media { border-radius:50px;
display:flex;
}
.qwitcher-grypen-bold {
font-family: "Qwitcher Grypen", cursive;
font-weight: 700;
font-style: normal;
}
.italianno-regular {
font-family: "Italianno", cursive;
font-weight: 400;
font-style: normal;
}
@keyframes norm { 0% {opacity:0; }
100%{opacity:1;}
}
@keyframes start { 0% {opacity:0; }
50%{background-color:white;}
100%{opacity:1;}
}
@keyframes lys {from {opacity:0; }
to{opacity:1;}}
@keyframes gitou {from {opacity:0;}
to {opacity:1;}}
@keyframes piou { from {color:grey;}
to {color:white;}}
@keyframes zup {to {opacity: 0;}}
@keyframes zupii { from {opacity: 0;}
to {opacity: 1;}}
@keyframes zupiii { from {opacity: 0.5;}
to {opacity: 1;
color:#00E2D8;}}
@keyframes select { from {opacity: 0.5;}
to {opacity: 1;
color:#00E2D8;}}
@keyframes fouch {
10%{color: red;}
20%{color: yellow;}
30%{color: green;}
40%{color: orange;}
50%{color: #74FEEC;}
60%{color: #F7F6F6;}
70%{color: #DE16EC;}
80%{color: blue;}
90%{color: #108CEA;}
100%{color: white;}
}
@keyframes bug {
from{background-color: white;}
to {background-color: black;}
}
/*
@keyframes lien { from {transform: scale (1);}
to {transform: scale (3);}
}
*/
#audio {border-radius: 50%;
border-style: double;
border-color: #74FEEC ;}
section#intro section.picture img.studlog { margin-left:8px;
margin-top: 8px;
border-radius: 50%;
box-shadow: 0px 0px 35px #74FEEC;
animation: gitou 4s forwards;
width: 500px;
border:1px solid #74FEEC;
}
section#intro section.picture { margin-left: 30px;
width: 315px;
margin-bottom: 100px;
}
section#intro section.nav { align:right;
width: 60%;
margin-top: -350px;
Margin-left: 35%;
}
section#intro section {width: 40%;}
section#com { display:flex;
justify-content:right;
padding:30px;
}
section#infoboutik {
width: 60%;
margin:30px;
border-style: double animation: fouch 2s infinite ease;
border-radius: 5%;
border-color: #74FEEC;
border-width:15px;
padding:30px;
}
section#write {
width: 60%;
margin:30px;
border-style:;
border-radius: 5%;
border-color:black;
border-width:5px;
}
section#video {
display:center;
justify-content:center;
margin: 30px;
border-style: double;
border-radius: 20px;
border-color:#F88F30;
padding:30px;
vertical-align:text-top;
}
section#video2 {
display:flex;
margin:30px;
border-style: double ;
border-radius: 5%;
border-color:yellow;
padding:30px;
align-items:center;
justify-content:center;
}
section#videoinl {
display:flex;
justify-content:inline;
margin: 30px;
margin-left:20%;
border-style:;
border-radius: 50px;
border-color:;
padding:30px;
box-shadow:10px 5px 10px #584133;
background-color: rgba(237, 245, 12, 0.3);
}
section#inline {
display:flex;
justify-content:inline;
margin:30px;
border-style:;
border-radius: 20px;
padding:30px;
vertical-align:text-top;
box-shadow:10px 5px 10px #584133;
background:linear-gradient(#26B7EB, #FDFF1F);
}
section#synth { margin:30px;
padding:30px;
background: linear-gradient(rgba(255, 0, 251, 0.5), rgba(105, 0, 103, 0.5));
border-radius:50px;
box-shadow:0 0 30px white;
}
section#reg { position:relative;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin-left:20px;
margin-right:20px;
text-align:center;
float:center;
font-color:white;
padding:30px;
border-radius:10px; box-shadow:0 0 30px white;
z-index:2;
}
section#centerbox { display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
float:center;
}
section#alignboxc { display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin-left:20px;
margin-right:20px;
text-align:center;
float:center;
/*--
height:100vh;
--*/
}
section#alignboxr { display:flex;
justify-content:right;
align-items:right;
margin-left:20px;
margin-right:20px;
}
section#colboxr { display:flex;
justify-content:right;
align-items:right;
flex-direction:column;
float:right;
margin-left:20px;
margin-right:20px;
}
section#alignboxl { display:flex;
justify-content:left;
align-items:left;
margin-left:20px;
margin-right:20px;
}
section#alignboxlys {display:flex;
justify-content:right;
align-items:right;
padding:20px;
background:linear-gradient(#FFb67F, #FFa437);
border-radius:10px;
border-style:solid #FFb67F 5px ;
margin:30px;
}
section#gwd { display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin-left:30px;
margin-right:30px;
text-align:center;
float:center;
background:linear-gradient(#ABFF73, #FDFF1F);
padding:30px;
border-radius:50px;
}
section#terminal { display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin:30px;
text-align:center;
float:center;
/*background:linear-gradient(#0012AD, #C20099);*/
width:90%;
height:90vh;
box-shadow:0 0 50px blue;
/*padding:30px;*/
border-radius:50px;
position:relative;
overflow:hidden;
}
section#lys_forest { display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin:30px;
text-align:center;
float:center;
border-radius:50px;
position:relative;
overflow:hidden;
background-position:top;
}
section.row {display:row;}
section.img {display:row;}
section.inline { display:inline;
}
section#write2 {
width: 60%;
margin-top: 80px;
margin-left: 30%;
border-style: solid ;
border-radius: 5%;
border-bottom-color: #74FEEC;
border-right-color: #74FEEC;
}
section#write2 div.vidtext {
background-color:black;
}
section#logo img.logo {
margin-left: 30px;
margin-top: 40px;
border-radius: 50%;
box-shadow: -20px 15px 15px black;
flex-wrap: wrap;
transition: transform 6s;
border-style: double;
border-color: #74FEEC ;
}
section.end { text-align:center;
}
section#retour{ margin-top:50px;
margin-left:100px;}
section#lys { display:grid;
place-item:center; }
section.textdec { background-color: white;
border-radius: 50px;
align-content: center;
margin-left: 30px;
margin-right: 30px;
animation: gitou 4s forwards;
margin-top:70px;
padding:30px;
box-shadow: 10px 5px 10px #584133;
}
section.textdecleft { background-color: white;
border-radius: 5%;
margin-left: 30px;
margin-right: 30px;
animation: gitou 4s forwards;
margin-top:70px;
padding:30px;
}
section.textanim { background-color:;
border-radius: 5%;
animation:bug 4s forwards;
margin-left: 30px;
margin-right: 30px;
margin-top:70px;
padding:30px;
opacity:;
}
section.feuille { text-align:center;
border-radius:10%;
background-color: white;
padding:10px;
}
section.salut { background-color: #00E2D8 ;
height:100px;
border-bottom-left-radius:50%;
display: flex;
justify-content: flex-end;
align-items: center;
}
audio.balise { animation:norm 3s forwards;
animation-delay:20s;
opacity:0;
}
font.foutch { animation: foutch 1.5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
li.bonus:hover a.bonus{ animation: fouch 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;}
a.retour { font-family:'Audiowide', cursive;
font-size:30px;
color: #74FEEC;
}
a.retourlys { font-family:'Qwitcher Grypen', cursive;
font-weight:700;
font-size:70px;
color: #bf4300;
text-shadow:white 1px 0 10px;
}
a.retourflower { font-family: 'Fleur De Leah', cursive;
font-weight: 700;
font-style: normal;
font-size:55px;
color: #bf4300;
text-shadow: white 1px 0 10px;
}
a.retourlyspouet { font-size:30px;
color: #bf4300;
}
a.pouet { font-size:30px;
color: #74FEEC;
}
a#c { display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
}
a {font-size: 30px;
text-decoration: none;
text-underline-position:under;
color: #5200B0;
}
a.bonus{ font-size: 40px;
text-decoration: none;
width:10px;
border-style: solid;
margin-bottom: 50px;
border-radius: 10%;}
a.bitoni { opacity:0;
color: black;
animation: select 5s ease infinite;
}
a.bitounou { color: white;
/*----
border-style:solid;
border-radius:10%;
-----*/
}
a.navouli { border-left : 1px solid #74FEEC;
border-right : 3px solid #74FEEC;
padding:10px;
border-radius :15px;
}
a.navoulys { /*---
border-left : 1px solid #74FEEC;
border-right : 3px solid #74FEEC;
----*/
font-family:'Sour Gummy',cursive;
text-decoration:none;
white-space: nowrap;
border-style : solid;
border-color : #584133;
border-bottom-width: 3px;
border-right-width: 3px;
border-left-width:0px;
border-top-width:0px;
border-radius:15px;
padding:10px;
font-size:30px;
text-shadow:
-1px -1px 0 #584133,
1px -1px 0 #584133,
-1px -1px 0 #584133,
1px 1px 0 #584133;
}
a.lys { opacity:0;
color: black;
font-size: 80px;
animation: zupiii 2s ease infinite;
text-shadow:black 1px 0 10px;
font-weight:700;
}
a#lien img { transition: transform 1s ease;
transform-origin: center;
}
.bonus {
margin-top: 500px;
text-align: right;
list-style-type: none;}
a.biton:hover {animation: zup 1s infinite;}
a.bitoni:hover {animation: zupii 0.5s infinite;
color:#E68600;}
a.bitounou:hover {animation: zup 0.5s infinite;
color:white;}
a.navouli:hover {animation: piou 0.5s infinite;}
a.navoulys:hover {animation: piou 0.5s infinite;}
a.pouet:hover {animation: piou 0.5s infinite;}
a.retourlys:hover {animation: piou 0.5s infinite;}
a.retour:hover {animation: piou 0.5s infinite;}
a.retourflower:hover {animation: piou 0.5s infinite;}
a.retourlyspouet:hover {animation: piou 0.5s infinite;}
a.img:hover {animation: zupii 1s;
color:#00E2D8;}
a.test {animation: piou 0.5s infinite;}
/* color:#00E2D8 */
blink.bitoni { opacity:0;
color: black;
animation: zupii 0.5s ease infinite;
color:#00E2D8;
font-size:30px;
}
.logo:hover{transform:;
}
iframe.ilou {
margin-left: 100px;
margin-bottom: 100px;
border-radius: 10%;
overflow :width;
}
iframe.cloud {
margin-left: 10px;
}
iframe#infos { display:flex;
align-items:center;
text-align:center;
align-content:center;
border-radius:15px;
}
li.btn { list-style-type: none;
text-align: right;
position: relative;
padding-top:30px;
}
li.btni { list-style-type: none;
text-align:right;
position: relative;
padding :30px;
}
h1.title { color: #74FEEC;
padding:10px;
background-color: rgba(0, 0, 0, 0,5);
box-shadow:0 0 50px blue;
border-radius: 30px;
}
h1.terminal { color: #74FEEC;
padding:10px;
background-color: rgba(0, 0, 0, 0,5);
box-shadow:0 0 50px blue;
}
h2.terminal { color: #74FEEC;
animation: zupii 4s forwards ease;
}
h1.module { width:100%;
background-color: rgba(0, 0, 0, 0,5);
border-radius: 10%;
border-style: double;
opacity: 0.8;
color: red;
font-size: 50px;
text-align:center;
animation: zupii 4s forwards ease;
box-shadow:0 0 50px red;
}
h1 {width:100%;
background-color: rgba(0, 0, 0, 0,5);
border-radius: 30px;
border-style: double;
opacity: 0.8;
color: red;
font-size: 50px;
text-align:center;
animation: zupii 4s forwards ease;
box-shadow:0 0 50px red;
}
h1.lys {color:black;
background-color: #FFF4C3;
border-radius: 30px;
border-style:double;
opacity: 0.8;
font-size: 60px;
text-align:center;
animation: zupii 4s forwards ease;
box-shadow: 10px 5px 10px #584133;
}
h2.title { text-decoration: underline;
text-underline-position: under;
padding-right:30px;
}
p.salut{
color:yellow;
font-style: italic;
font-size: 40px;
padding-right: 40px;
}
p.text{ font-size: 20px;
font-family: cursive;
margin-left: 20px;
text-align-last: center;
}
p.textou{ font-size: 30px;
font-family:monospace;
font-style: normal;
margin-left: 20px;
text-align-last: center;
color: Black;
}
p.textouj{ font-size: 30px;
font-family:monospace;
font-style: normal;
margin-left: 20px;
text-align: justify;
color: black;
}
p.textouleft{ font-size: 30px;
font-family: monospace ;
font-style: normal;
margin-left: 20px;
text-align-last:;
color: Black;
}
p.textouright{ font-size: 40px;
font-family: 'Sour Gummy', cursive;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
font-variation-settings:"wdth" 100;
margin-left: 20px;
text-align:right;
color: Black;
}
p.textoucenter{ font-size: 40px;
font-family: 'Sour Gummy', monospace;
font-style: normal;
text-align:center;
color: Black;
}
p.textdigit { font-size:30px;
color: #74FEEC;
}
p.iloutext {flex-direction: row;
overflow: visible;
font-size:30px;
}
p {color: white;}
p.textoulys { font-family:'Qwitcher Grypen', cursive;
font-weight:700;
font-size:50px;
text-shadow: white 1px 0 10px;
}
p.textoulysflower { font-family: 'Fleur De Leah', cursive;
font-weight: 700;
font-style: normal;
font-size:55px;
text-shadow: white 1px 0 10px;
}
p.textoulysImperial { font-family: "Imperial Script", cursive;
font-weight: 700;
font-style: normal;
font-size:55px;
text-shadow: white 1px 0 10px;
}
p.lys {
color: black;
font-size: 80px;
text-shadow:black 1px 0 10px;
font-weight:700;
}
p.lysdesc {
font-size : 60px;
color:#730000;
text-shadow:-1px -1px 0 black,
1px -1px 0 black,
-1px -1px 0 black,
1px 1px 0 black;
}
p.synth { font-family:'Audiowide', cursive;
text-align-last: center;
font-size:35px;
color:white;
text-shadow: #00E6FC 1px 0 10px;
}
p.comm {font-size:30px;
color:#00E2D8;
}
u {text-decoration-thickness:1px;}
p.news {font-size: 35px;
margin-left: 20px;
text-align:center;
margin:15px;
font-family:'Sour Gummy',cursive;
text-shadow: black 1px 0 10px;
}
/* Les Img */
img.com { width:500px;
border-style: solid;
border-color:#8E31FF;
border-radius:15px;
animation:zupii 3s infinite;
}
img.synth { margin:50px;
width:800px;
border-radius:30px;
box-shadow :
#00E6FC 1px 0 10px,
#00E6FC 1px 0 10px,
#00E6FC 1px 0 10px,
#00E6FC 1px 0 10px;
}
img.qr {width:70%; Border-radius : 15%}
img.earth {
margin-top: 50px;
width: 100%;
opacity: 0.5;
}
p.bio{font-size: 50px;
margin-top: 20px;}
img.poupigif { width:300px;
border-radius:10%;
text-align:center;
}
img.gogo { width:500px;
border-radius:10%;
text-align:center;
}
/* annim reload*/
ul li.btn:hover a{color:#74FEEC;
transition: 0.7s}
@keyframes spiny {100% {transform: rotate(360deg);}}
/*---------*/
#reload {
position: fixed;
width: 80px;
height: 80px;
top: 7%;
left: 92%;
display:flex;
align-content: center;
justify-content:center;
}
.ext {
opacity: 0.5 ;
animation: spiny 1s linear infinite;
border-radius: 50%;
border-top: solid transparent 4px;
border-bottom: solid transparent 4px;
border-right: solid 4px #00F8FF;
border-left: solid 4px #00F8FF;
width: 30px;
height: 30px;
display:flex;
align-content: center;
justify-content: center;
position: absolute;
}
.int { margin-top:9px;
margin-right:0px;
animation: spiny 1s linear reverse infinite;
border-radius: 50%;
border-top: solid transparent 3px;
border-bottom: solid transparent 3px;
border-left: solid 3px #00D0D6;
border-right: solid 3px #00D0D6;
width: 14px;
height: 14px;}
div#loading {
position: fixed;
width: 80px;
height: 80px;
top: ;
left:;
display:flex;
align-content: center;
justify-content:center;
}
div.up {
opacity: 0.5 ;
animation: spiny 1s linear infinite;
border-radius: 50%;
border-top: solid transparent 4px;
border-bottom: solid transparent 4px;
border-right: solid 4px #74FEEC;
border-left: solid 4px #74FEEC;
width: 30px;
height: 30px;
display:flex;
align-content: center;
justify-content: center;
position: absolute;
}
div.center { animation: spiny 1s linear reverse infinite;
border-radius: 50%;
border-top: solid transparent 3px;
border-bottom: solid transparent 3px;
border-left: solid 3px #74FEEC;
border-right: solid 3px #74FEEC;
width: 14px;
height: 14px;}
/*_________*/
em{color: red;}
footer{ margin-top: 20px;
text-align: right;
padding: 30px;
color: #00E2D8;
text-shadow:black 1px 0 10px;
}