* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background-color: white;
}
nav {
color: red;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.3vh;
margin-top: 48.5vw;
width: 20vw;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 1vw;
z-index: 1000;
}
.footer {
width: 100%;
height: 6%;
position: fixed;
bottom: 0%;
background-color: white;
border-top: 1px black solid;
z-index: 2000;
display: flex;
flex: wrap;
}
.left{
width: 50%;
height: 100%;
background-color: white;
font-size: 2.3vh;
text-align: left;
padding: 0.2vw;
z-index: 2000;
}
.right{
color: white;
width: 50%;
height: 100%;
background-color: black;
font-size: 2.3vh;
text-align: left;
z-index: 2000;
padding: 0.2vw;
}
.left-text{
position: relative;
top: 25%;
margin-left: 1vw;
z-index: 2000;
}
@media (max-width:768px){
.left-text{
font-size: 2vh;
}
}
@media (max-width:425px){
.left-text{
font-size: 1.8vh;
}
}
@media (max-width:320px){
.left-text{
font-size: 1.5vh;
}
}
.right-text{
position: relative;
top: 25%;
margin-left: 1vw;
z-index: 2000;
}
@media (max-width:768px){
.right-text{
font-size: 2vh;
}
}
@media (max-width:425px){
.right-text{
font-size: 1.8vh;
}
}
@media (max-width:320px){
.right-text{
font-size: 1.5vh;
}
}
.nav:hover {
font-style: italic;
}
nav:hover + h3 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
@media (max-width:700,1000px) {
nav {
color: red;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.3vh;
margin-top: 700vw;
width: 100vh;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 1vw;
z-index: 1000;
}
}
@media (max-width:1000px) {
nav {
color: red;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: 142.5vw;
width: 100vh;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 1vw;
z-index: 1000;
}
}
@media (min-width:320px) {
nav {
color: red;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: 195.5vw;
width: 100vh;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 1vw;
z-index: 1000;
}
}
@media (min-width:375px) {
nav {
color: red;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: 166.5vw;
width: 100vh;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 1vw;
z-index: 1000;
}
}
/*
h10 {
color: black;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.3vh;
margin-top: 48.5vw;
width: 50vw;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: 10vw;
z-index: 500;
}
h10:hover {
font-style: italic;
}
h10:hover + h3 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
@media (max-width:1000px) {
h10 {
color: white;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: -1.5vw;
width: 60vw;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: -1vw;
z-index: 500;
}
}
@media (max-width:320px) {
h10 {
color: black;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: 112vw;
width: 80vw;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: -1vw;
z-index: 500;
}
}
@media (max-width:375px) {
h10 {
color: black;
cursor: pointer;
position: fixed;
text-align: left;
font-size: 2.1vh;
margin-top: 103vw;
width: 80vw;
background-color:none;
border-left: 2vh;
padding: 1.5vh;
height: 3vh;
margin-left: -1vw;
z-index: 500;
}
}
@media (max-width:1000px) {
h10:hover {
font-style: normal;
}
}
@media (max-width:1000px) {
h10:hover + h3 {
display: block;
width: 50vw;
height: 40vw;
margin-top: 106vw;
border-top: 1px solid black;
margin-left: 0vw;
font-size: 1.3vh;
transform: translateX(0px);
}
}
h9 { color: transparent;
background-color: white;
border-top : solid 1px black;
padding: 0;
font-style: italic;
font-family: Helvetica, sans-serif;
margin-top: 48vw;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 50vw;
margin-left: 0;
height: 4vw;
z-index: 500;
cursor: pointer;
}
@media (max-width:1000px) {
h9 { color: transparent;
background-color: white;
border : solid 1px black;
padding: 0;
margin-top: 143.5vw;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 50vw;
margin-left: 0;
height: 5.5vw;
z-index: 1000;
}
}
@media (max-width:320px) {
h9 { color: transparent;
background-color: white;
border : solid 1px black;
padding: 0;
margin-top: 196vw;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 50vw;
margin-left: 0;
height: 9vw;
z-index: 1000;
}
}
@media (max-width:375px) {
h9 { color: transparent;
background-color: white;
border : solid 1px black;
padding: 0;
margin-top: 166vw;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 50vw;
margin-left: 0;
height: 9vw;
z-index: 1000;
}
}
h2 { color: transparent;
background-color : black;
border : solid 1px black;
left: 9rem;
top: 0;
margin-top: 48vw;
padding: 0;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 50vw;
margin-left: 40vw;
height: 4vw;
z-index: 500;
cursor: pointer;
}
@media (max-width:1000px) {
h2 { color: transparent;
background-color : black;
border : solid 1px black;
left: 9rem;
top: 0;
margin-top: 143.5vw;
padding: 0;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 70vw;
margin-left: 4vw;
height: 5.5vw;
z-index: 500;
}
}
@media (max-width:320px) {
h2 { color: transparent;
background-color : black;
border : solid 1px black;
left: 9rem;
top: 0;
margin-top: 196vw;
padding: 0;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 70vw;
margin-left: 4vw;
height: 9vw;
z-index: 500;
}
}
@media (max-width:375px) {
h2 { color: transparent;
background-color : black;
border : solid 1px black;
left: 9rem;
top: 0;
margin-top: 166vw;
padding: 0;
position: fixed;
text-align: left;
font-size: 1.4vw;
border-left: 0;
width: 70vw;
margin-left: 4vw;
height: 9vw;
z-index: 500;
}
}
h5 { color:white;
background-color :none;
margin-top: 48.1vw;
top: 0;
padding: 1rem;
position: fixed;
text-align: left;
font-size: 2.3vh;
border-left: 1rem;
width: 50vw;
height: 4vw;
margin-left: 51vw;
z-index: 600;
cursor: pointer;
}
/*h5:hover {
font-style: italic;
}
h5:hover + h4 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
@media (max-width:1000px) {
h5 { color:white;
background-color :none;
margin-top:141.5vw;
top: 0;
padding: 1rem;
position: fixed;
text-align: left;
font-size: 2.1vh;
border-left: 1rem;
width: 50vw;
height: 4vw;
margin-left: 51vw;
z-index: 1000;
}
}
@media (max-width:320px) {
h5 { color:white;
background-color :none;
margin-top:193vw;
top: 0;
padding: 1rem;
position: fixed;
text-align: left;
font-size: 2.1vh;
border-left: 1rem;
width: 50vw;
height: 4vw;
margin-left: 49vw;
z-index: 1000;
}
}
@media (max-width:375px) {
h5 { color:white;
background-color :none;
margin-top:164.5vw;
top: 0;
padding: 1rem;
position: fixed;
text-align: left;
font-size: 2.1vh;
border-left: 1rem;
width: 50vw;
height: 4vw;
margin-left: 50vw;
z-index: 1000;
}
}*/
h4 { color: black;
background-color:gray;
padding: 1vw;
top: 0;
border-left: none;
position: fixed;
margin-top: 0vw;
margin-left: 99%;
text-align: left;
font-size: 4vh;
width: 50%;
height: 100%;
z-index: 1500;
transition: ease-in-out 2s;
}
h4:hover {
display: block;
transition: ease-in-out 2s;
transform: translateX(-98%);
}
@media (max-width:768px) {
h4 { color: black;
background-color:gray;
padding: 1rem;
top: 0;
border-left: none;
position: absolute;
margin-top: 100%;
margin-left: 50%;
text-align: left;
font-size: 1.7vh;
width: 50%;
height: 40%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:425px) {
h4 { color: black;
background-color:gray;
padding: 1rem;
top: 0;
border-left: none;
position: absolute;
margin-top: 110%;
margin-left: 50%;
text-align: left;
font-size: 1.7vh;
width: 50%;
height: 70%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:375px) {
h4 { color: black;
background-color:gray;
padding: 1rem;
top: 0;
border-left: none;
position: fixed;
margin-top: 0%;
margin-left: 97.5%;
text-align: left;
font-size: 1.7vh;
width: 50%;
height: 100%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:1000px) {
h4:hover {
display: block;
transition: ease-in-out 2s;
transform: translateX(-98%);
}
}
@media (max-width:768px) {
h4:hover {
display: block;
transition: ease-in-out 2s;
transform: none;
}
}
@media (max-width:375px) {
h4:hover {
display: block;
transition: ease-in-out 2s;
transform: translateX(-95%);
}
}
/*
@media (max-width:1000px) {
h4 { color: black;
background-color:gray;
padding: 0.5rem;
top: 0;
border-top: solid 1px black;
position: fixed;
margin-top: 0vw;
margin-left: 100vw;
text-align: left;
font-size: 1.3vh;
border-left: 1rem;
width: 50vw;
height: 48vw;
z-index: 0;
transition: ease-in-out 2s;
}
}
@media (max-width:320px) {
h4 { color: black;
background-color:gray;
padding: 0.5rem;
top: 0;
border-top: solid 1px black;
position: fixed;
margin-top: 0vw;
margin-left: 100vw;
text-align: left;
font-size: 1.3vh;
border-left: 1rem;
width: 50vw;
height: 90vw;
z-index: 0;
transition: ease-in-out 2s;
}
}
@media (max-width:375px) {
h4 { color: black;
background-color:gray;
padding: 0.5rem;
top: 0;
border-top: solid 1px black;
position: fixed;
margin-top: 0vw;
margin-left: 100vw;
text-align: left;
font-size: 1.3vh;
border-left: 1rem;
width: 50vw;
height: 90vw;
z-index: 0;
transition: ease-in-out 2s;
}
}*/
h5:hover + h4 {
display: block;
transition: ease-in-out 2s;
transform: translateX(-720px);
}
@media (max-width:1000px) {
h5:hover + h4 {
display: block;
transition: ease-in-out 2s;
transform: translateX(-720px);
}
}
h3 { color: black;
background-color:red;
padding: 1vw;
width: 50%;
border-right: solid 20px red;
position: fixed;
margin-left: -49%;
text-align: left;
font-size: 4vh;
height: 100%;
z-index: 1500;
transition: ease-in-out 2s;
}
h3:hover {
display: block;
transition: ease-in-out 2s;
transform: translateX(98%);
}
@media (max-width:768px) {
h3 { color: black;
background-color:red;
padding: 1rem;
width: 50%;
border-right: solid 20px red;
position: absolute;
margin-left: 0%;
margin-top: 100%;
text-align: left;
font-size: 1.7vh;
height: 40%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:425px) {
h3 { color: black;
background-color:red;
padding: 1rem;
width: 50%;
border-right: solid 20px red;
position: absolute;
margin-left: 0%;
margin-top: 110%;
text-align: left;
font-size: 1.7vh;
height: 70%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:375px) {
h3 { color: black;
background-color:red;
padding: 1rem;
width: 50%;
border-right: solid 20px red;
position: fixed;
margin-left: -48%;
margin-top: 0%;
text-align: left;
font-size: 1.7vh;
height: 100%;
z-index: 1500;
transition: ease-in-out 2s;
}
}
@media (max-width:768px) {
h3:hover {
display: block;
transition: ease-in-out 2s;
transform: none;
}
}
@media (max-width:375px) {
h3:hover {
display: block;
transition: ease-in-out 2s;
transform: translateX(96%);
}
}
/*
.left:hover + h3 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
@media (min-width:1000px) {
.left:hover + h3 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
}
@media (min-width:1000px) {
.left-text:hover + h3{
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
}
/*@media (max-width:1000px) {
h3 {
display: block;
width: 50vw;
height: 40vw;
margin-top: 0vw;
margin-left: 0vw;
border-top: 1px solid black;
font-size: 1.3vh;
padding: 0.5rem;
}
} */
/*
@media (max-width:320px) {
h3 {
display: block;
width: 50vw;
height: 90vw;
margin-top: 0vw;
margin-left: -50vw;
border-top: 1px solid black;
font-size: 1.3vh;
padding: 0.5rem;
}
}
@media (max-width:375px) {
h3 {
display: block;
width: 50vw;
height: 90vw;
margin-top: 0vw;
margin-left: -50vw;
border-top: 1px solid black;
font-size: 1.3vh;
padding: 0.5rem;
}
}
@media (max-width:1000px) {
.left-text + h3 {
display: block;
transition: ease-in-out 2s;
transform: translateX(720px);
}
}*/
.content10 {
position: relative;
z-index:00;
color: transparent;
background-color: black;
height: 4vw;
width: 50vw;
border: solid 1px black;
cursor: pointer;
}
@media (max-width:1000px) {
.content10 {
position: relative;
z-index:00;
color: transparent;
margin-top: -4vw;
background-color: black;
height: 4vw;
width: 50vw;
border: solid 1px black;
cursor: pointer;
}
}
@media (max-width:320px) {
.content10 {
position: relative;
z-index:00;
color: transparent;
margin-top: -1vw;
background-color: black;
height: 4vw;
width: 50vw;
border: solid 1px black;
cursor: pointer;
}
}
.content11 {
position: relative;
z-index:00;
color: transparent;
background-color: white;
height: 4vw;
width: 50vw;
margin-left: 50vw;
margin-top: -4vw;
border-top: solid 1px black;
border-bottom: solid 1px black;
cursor: pointer;
}
header {
position: fixed;
z-index: 1000;
top: 0;
}
.content1 {
display:block;
position: absolute;
z-index: 0;
margin-top: 3vw;
margin-left: 10vw;
align-content: center;
background-color: none;
max-width: 80%;
top: 1vw;
z-index: 500;
cursor: pointer;
transition: transform ease-in-out 100s;
}
@media (max-width:320px) {
.content1 {
display:block;
position: absolute;
z-index: 0;
margin-top: 3vw;
margin-left: 10vw;
align-content: center;
background-color: none;
width: 200vw;
top: 1vw;
z-index: 500;
cursor: pointer;
scale: 2;
}
}
.positif {
display:none;
position: absolute;
z-index: 0;
margin-top: 3vw;
margin-left: 10vw;
align-content: center;
background-color: none;
max-width: 80%;
top: 1vw;
cursor: pointer;
z-index: 50;
}
.container {
max-width: 64%;
margin-left: 270vw;
}
.shape {
position: sticky;
z-index: 100;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -30.5vw;
margin-left: -15vw;
width: 15vw;
transition: translate ease-in-out 10s;
}
@media (max-width:1000px) {
.shape {
position: sticky;
z-index: 1000;
display: block;
background-color: gray;
border-left: solid 1px black;
height: 50vw;
margin-top: -32vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:320px) {
.shape {
position: sticky;
z-index: 1000;
display: block;
background-color: gray;
border-left: gray 2px solid;
height: 51vw;
margin-top: -33vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:375px) {
.shape {
position: sticky;
z-index: 1000;
display: block;
background-color: gray;
border-left: gray 2px solid;
height: 51vw;
margin-top: -33vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
.shape2, .shape3, .shape4 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -15vw;
width: 15vw;
transition: translate ease-in-out 10s;
}
@media (max-width:1000px) {
.shape2, .shape3, .shape4 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:320px) {
.shape2, .shape3, .shape4 {
margin-top: -51vw;
}
}
@media (max-width:375px) {
.shape2, .shape3, .shape4 {
margin-top: -51vw;
height: 51vw;
border-left: gray 2px solid;
}
}
.shape5, .shape6, .shape7 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -15vw;
width: 15vw;
transition: translate ease-in-out 10s;
}
@media (max-width:1000px) {
.shape5, .shape6, .shape7 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:320px) {
.shape5, .shape6, .shape7 {
margin-top: -51vw;
}
}
@media (max-width:375px) {
.shape5, .shape6, .shape7 {
margin-top: -51vw;
height: 51vw;
border-left: gray 2px solid;
}
}
.shape8, .shape9, .shape10 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -15vw;
width: 15vw;
transition: translate ease-in-out 10s;
}
@media (max-width:1000px) {
.shape8, .shape9, .shape10 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:320px) {
.shape8, .shape9, .shape10 {
margin-top: -51vw;
}
}
@media (max-width:375px) {
.shape8, .shape9, .shape10 {
margin-top: -51vw;
height: 51vw;
border-left: gray 2px solid;
}
}
.shape11, .shape12, .shape13 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -15vw;
width: 15vw;
transition: translate ease-in-out 10s;
}
@media (max-width:1000px) {
.shape11, .shape12, .shape13 {
position: sticky;
z-index: 500;
display: block;
background-color: gray;
border: solid 1px black;
height: 50vw;
margin-top: -50vw;
margin-left: -50vw;
width: 50vw;
transition: translate ease-in-out 10s;
}
}
@media (max-width:320px) {
.shape11, .shape12, .shape13 {
margin-top: -51vw;
}
}
@media (max-width:375px) {
.shape11, .shape12, .shape13 {
margin-top: -51vw;
height: 51vw;
border-left: gray 2px solid;
}
}
.shape1 {
margin-left : 2vw;
margin-top: -1vw;
margin-right: 2vw;
}
@media (max-width:1000px) {
.shape1 {
margin-left : 1.5vw;
margin-top: 0vw;
margin-right: 2vw;
}
}
@media (max-width:768px) {
.shape1 {
margin-left : 1.5vw;
margin-top: 0vw;
margin-right: 2vw;
}
}
@media (max-width:375px) {
.shape1 {
margin-left : 2vw;
margin-top: 0vw;
margin-right: 2vw;
}
}
p {
background-color: none;
text-align: left;
font-size: 2vh;
color:black;
line-height: 1.2vw;
}
@media (max-width:1400px) {
p {
background-color: none;
text-align: left;
font-size: 1.7vh;
color:black;
line-height: 1.7vh;
}
}
@media (max-width:1000px) {
p {
background-color: none;
text-align: left;
font-size: 1.3vh;
color:black;
line-height: 1.3vh;
}
}
@media (max-width:768px) {
p {
background-color: none;
text-align: left;
font-size: 1.7vh;
color:black;
line-height: 1.7vh;
}
}
@media (max-width:425px) {
p {
background-color: none;
text-align: left;
font-size: 1.2vh;
color:black;
line-height: 1.2vh;
}
}
@media (max-width:320px) {
p {
background-color: none;
text-align: left;
font-size: 1vh;
color:black;
line-height: 1vh;
}
}
.p1 {
position: absolute;
height: 2vh;
width: 8vw;
display: block;
position: relative;
z-index: 400;
font-size: 2.5vh;
color :white;
margin-left: 65vw;
margin-top: 19vw;
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p1 {
position: absolute;
height: 2vh;
width: 22vw;
display: block;
position: relative;
z-index: 400;
font-size: 1.3vh;
color :white;
margin-left: 65vw;
margin-top: 19vw;
}
}
.p1:hover {
cursor: pointer;
font-size: 5vh;
transition: ease-in-out 2s;
width: 18vw;
}
@media (max-width:1000px) {
.p1:hover {
cursor: pointer;
font-size: 1.3vh;
color: red;
width: 22vw;
}
}
.p1:hover + .shape {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p1:hover + .shape {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p2 {
height: 2vw;
width: 10vw;
z-index: 400;
display: block;
position: relative;
color: white;
font-size: 2.5vh;
margin-left: 52vw;
margin-top: -45vw;
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p2 {
width: 22vw;
font-size: 1.3vh;
}
}
@media (max-width:320px) {
.p2 {
width: 22vw;
font-size: 1.3vh;
margin-top: -48vw;
}
}
.p2:hover {
cursor: pointer;
font-size: 5vh;
width: 18vw;
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p2:hover {
cursor: pointer;
color: red;
font-size: 1.3vh;
width: 22vw;
transition: ease-in-out 2s;
}
}
.p2:hover + .shape2 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p2:hover + .shape2 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p3 {
height: 2vh;
width: 10vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 49vw;
color: white;
margin-top: -27vw;
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p3 {
width: 22vw;
font-size: 1.3vh;
}
}
.p3:hover {
font-size: 5vh;
cursor: pointer;
width: 22vw;
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p3:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p3:hover + .shape3 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p3:hover + .shape3 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p4 {
height: 2vh;
width: 12vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 44vw;
margin-top: -22vw;
color: white;
}
@media (max-width:1000px) {
.p4 {
width: 22vw;
font-size: 1.3vh;
}
}
.p4:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 22vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p4:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p4:hover + .shape4 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p4:hover + .shape4 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p5 {
height: 2vh;
width: 12vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 56vw;
margin-top: -39vw;
color: white;
}
@media (max-width:1000px) {
.p5 {
width: 22vw;
font-size: 1.3vh;
}
}
.p5:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 22vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p5:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p5:hover + .shape5 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p5:hover + .shape5 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p6 {
height: 2vh;
width: 13vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 15vw;
margin-top: -27vw;
color: white;
}
@media (max-width:1000px) {
.p6 {
width: 22vw;
font-size: 1.3vh;
}
}
.p6:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 22vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p6:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p6:hover + .shape6 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p6:hover + .shape6 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p7 {
height: 2vh;
width: 9vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 45vw;
margin-top: -32vw;
color: white;
}
@media (max-width:1000px) {
.p7 {
width: 22vw;
font-size: 1.3vh;
}
}
.p7:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 18vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p7:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p7:hover + .shape7 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p7:hover + .shape7 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p8 {
height: 2vh;
width: 15vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 45vw;
margin-top: -35.5vw;
color: white;
}
@media (max-width:1000px) {
.p8 {
width: 22vw;
font-size: 1.3vh;
}
}
@media (max-width:320px) {
.p8 {
width: 22vw;
font-size: 1.3vh;
margin-top: -37vw;
}
}
@media (max-width:375px) {
.p8 {
width: 22vw;
font-size: 1.3vh;
margin-top: -38vw;
}
}
.p8:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 30vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p8:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p8:hover + .shape8 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p8:hover + .shape8 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p9 {
height: 2vh;
width: 15vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 15vw;
margin-top: -30vw;
color: white;
}
@media (max-width:1000px) {
.p9 {
width: 22vw;
font-size: 1.3vh;
}
}
@media (max-width:320px) {
.p9 {
width: 22vw;
font-size: 1.3vh;
margin-top: -33vw;
margin-left: 10vw;
}
}
@media (max-width:375px) {
.p9 {
width: 22vw;
font-size: 1.3vh;
margin-top: -33vw;
margin-left: 15vw;
}
}
.p9:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 30vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p9:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p9:hover + .shape9 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p9:hover + .shape9 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p10 {
height: 2vh;
width: 15vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 52vw;
margin-top: -14vw;
color: white;
}
@media (max-width:1000px) {
.p10 {
width: 22vw;
font-size: 1.3vh;
}
}
.p10:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 30vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p10:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p10:hover + .shape10 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p10:hover + .shape10 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p11 {
height: 2vh;
width: 10vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 78vw;
margin-top: -38vw;
color:white;
}
@media (max-width:1000px) {
.p11 {
width: 22vw;
font-size: 1.3vh;
}
}
.p11:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 20vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p11:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p11:hover + .shape11 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p11:hover + .shape11 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p12 {
height: 2vh;
width: 12vw;
z-index: 400;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 68vw;
margin-top: -43vw;
color: white;
}
@media (max-width:1000px) {
.p12 {
width: 22vw;
font-size: 1.3vh;
}
}
@media (max-width:320px) {
.p12 {
width: 22vw;
font-size: 1.3vh;
margin-top: -44vw;
}
}
.p12:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 30vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p12:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p12:hover + .shape12 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p12:hover + .shape12 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.p13 {
height: 2vh;
width: 12vh;
z-index: 400;
color: white;
display: block;
position: relative;
font-size: 2.5vh;
margin-left: 40vw;
margin-top: -45vw;
}
@media (max-width:1000px) {
.p13 {
width: 12vw;
font-size: 1.3vh;
}
}
@media (max-width:320px) {
.p13 {
width: 12vw;
font-size: 1.3vh;
margin-left: 37vw;
margin-top: -47vw;
}
}
.p13:hover {
transition: ease-in-out 2s;
font-size: 5vh;
width: 30vw;
cursor: pointer;
}
@media (max-width:1000px) {
.p13:hover {
font-size: 1.3vh;
color: red;
cursor: pointer;
width: 22vw;
}
}
.p13:hover + .shape13 {
transform: translate(15vw);
transition: ease-in-out 2s;
}
@media (max-width:1000px) {
.p13:hover + .shape13 {
transform: translate(50vw);
transition: ease-in-out 2s;
}
}
.grid1 {
display: grid;
z-index: 0;
}
.grid2 {
display: grid;
top :100%;
z-index: 0;
}
.content1 {
display:inline;
position: absolute;
z-index: 0;
margin-top: 3vw;
margin-left: 10vw;
align-content: center;
background-color: none;
max-width: 80%;
top: 1vw;
z-index: 0;
}
@media (max-width:320px) { .content1 {
display:inline;
position: absolute;
z-index: 0;
margin-top: 0.3vw;
margin-left: 2.7vw;
align-content: center;
background-color: none;
max-width: 95%;
top: 1vw;
z-index: 0;
}
}
.content4 {
position: relative;
width: 100%;
height: 100%;
background-color:rgb(153,153,153);
}
/*@media (max-width:1000px) {
.content4 {
margin-top: 0vw;
position: absolute;
width: 50vw;
height: 100%;
background-color:rgb(153,153,153);
}
}
@media (max-width:320px) {
.content4 {
margin-top: 0vw;
position: absolute;
width: 50vw;
height: 100%;
background-color:rgb(153,153,153);
}
}*/
.content-4-5{
width: 100%;
height: 100%;
display: flex;
flex: wrap;
flex-direction: row;
position: absolute;
}
@media (max-width:400px) {
.content-4-5{
width: 100%;
height: 100%;
display: flex;
flex: wrap;
flex-direction: column-reverse;
position: absolute;
}
}
.content5 {
position: relative;
width: 100%;
height: 100%;
background-color:lightgray;
}
/*@media (max-width:1000px) {
.content5 {
margin-top: 0vw;
margin-left: 50vw;
position: absolute;
width: 50vw;
height: 100%;
background-color:lightgray;
}
}
@media (max-width:320px) {
.content5 {
margin-top: 0vw;
margin-left: 50vw;
position: absolute;
width: 50vw;
height: 100%;
background-color:lightgray;
}
}*/
.sphereleft {
width: 100%;
height: 100%;
position: absolute;
}
.sphereright {
width: 100%;
height: 100%;
position: absolute;
}
.sphere1 {
position: absolute;
left: 4%;
top: 4%;
width: 90%;
height: 90%;
}
@media (max-width:375px){
.sphere1 {
position: absolute;
left: 15%;
top: 4%;
width: 70%;
height: 70%;
}
}
@media (max-width:320px){
.sphere1 {
position: absolute;
left: 15%;
top: 10%;
width: 70%;
height: 70%;
}
}
.sphere2 {
position: absolute;
left: 4%;
top: 4%;
width: 90%;
height: 90%;
}
@media (max-width:375px){
.sphere2 {
position: absolute;
left: 15%;
top: 8%;
width: 70%;
height: 70%;
}
}
@media (max-width:320px){
.sphere2 {
position: absolute;
left: 15%;
top: 10%;
width: 70%;
height: 70%;
}
}
.content6 {
position: absolute;
width: 50vw;
height: 50vw;
background-color: gray;
}
.content7 {
position: absolute;
width: 50vw;
height: 50vw;
margin-left: 50vw;
background-color:gray;
}
.pixelleft {
display: none;
position: absolute;
margin-top: 2vw;
z-index: 500;
width: 78vw;
margin-left: -15vw;
}
@media (max-width:375px) {
.pixelleft {
display: inline;
position: absolute;
margin-top: 4vw;
z-index: 500;
width: 120vw;
margin-left: -10vw;
fill: black;
transition: ease-in-out 5s;
}
}
@media (max-width:375px) {
.pixelleft:hover {
transition: ease-in-out 5s;
transform: rotate(180deg);
}
}
@media (max-width:320px) {
.pixelleft {
display: inline;
position: absolute;
margin-top: 12vw;
z-index: 500;
width: 120vw;
margin-left: -10vw;
fill: black;
transition: ease-in-out 5s;
}
}
.pixelright {
display: none;
position: absolute;
margin-top: 3vw;
z-index: 500;
width: 75vw;
margin-left: -12vw;
}
@media (max-width:375px) {
.pixelright {
display: block;
position: absolute;
margin-top: 8vw;
z-index: 500;
width: 120vw;
margin-left: -10vw;
transition: ease-in-out 5s;
}
}
@media (max-width:375px) {
.pixelright:hover {
transition: ease-in-out 5s;
transform: rotate(180deg);
}
}
@media (max-width:320px) {
.pixelright {
display: block;
position: absolute;
margin-top: 12vw;
z-index: 500;
width: 120vw;
margin-left: -10vw;
transition: ease-in-out 5s;
}
}
.allpixelright {
width: 100%;
height: 100%;
}
.allpixelleft {
width: 100%;
height: 100%;
top: 4%;
}
.hemisphere1 {
color: white;
position: absolute;
font-size: 2.3vh;
margin-top: 1vw;
margin-left: 2vw;
cursor: pointer;
}
.hemisphere1:hover {
color: black;
}
@media (max-width:1000px) {
.hemisphere1 {
color: white;
position: absolute;
font-size: 1.3vh;
margin-top: 1vw;
margin-left: 2vw;
cursor: pointer;
}
}
@media (max-width:375px) {
.hemisphere1 {
color: black;
position: absolute;
font-size: 1.3vh;
margin-top: 1vw;
margin-left: 3vw;
cursor: pointer;
}
}
.hemisphere2 {
color: black;
position: absolute;
font-size: 2.3vh;
margin-top: 1vw;
margin-left: 2vw;
cursor: pointer;
}
.hemisphere2:hover {
color: white;
}
@media (max-width:1000px) {
.hemisphere2 {
color: black;
position: absolute;
font-size: 1.3vh;
margin-top: 1vw;
margin-left: 2vw;
cursor: pointer;
}
}
@media (max-width:375px) {
.hemisphere2 {
color: black;
position: absolute;
font-size: 1.3vh;
margin-top: 1vw;
margin-left: 3vw;
cursor: pointer;
}
}
.star1, .star2, .star3, .star4, .star5, .star6 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
}
@media (max-width:1000px) {
.star1, .star2, .star3, .star4, .star5, .star6 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star1, .star2, .star3, .star4, .star5, .star6 {
font-size: 1.3vh;
width: 60vw;
font-style: italic;
margin-top: 4vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star1, .star2, .star3, .star4, .star5, .star6 {
font-size: 1.3vh;
width: 60vw;
font-style: italic;
margin-top: 4vw;
margin-left: 3vw;
}
}
.star7, .star8, .star9, .star10, .star11, .star12 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
}
@media (max-width:1000px) {
.star7, .star8, .star9, .star10, .star11, .star12 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star7, .star8, .star9, .star10, .star11, .star12 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star7, .star8, .star9, .star10, .star11, .star12 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
.star13, .star14, .star15, .star16, .star17, .star18 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
}
@media (max-width:1000px) {
.star13, .star14, .star15, .star16, .star17, .star18 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star13, .star14, .star15, .star16, .star17, .star18 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star13, .star14, .star15, .star16, .star17, .star18 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
.star19, .star20, .star21, .star22, .star23, .star24 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
}
@media (max-width:1000px) {
.star19, .star20, .star21, .star22, .star23, .star24 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star19, .star20, .star21, .star22, .star23, .star24 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star19, .star20, .star21, .star22, .star23, .star24 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
.star25, .star26, .star27, .star29, .star30, .star31 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 1vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
margin-left: 2vw;
}
@media (max-width:1000px) {
.star25, .star26, .star27, .star29, .star30, .star31 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star25, .star26, .star27, .star29, .star30, .star31 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star25, .star26, .star27, .star29, .star30, .star31 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
.star32, .star34, .star35 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
color: white;
font-style: italic;
}
@media (max-width:1000px) {
.star32, .star34, .star35 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star32, .star34, .star35 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star32, .star34, .star35 {
font-size: 1.3vh;
font-style: italic;
margin-top: 4vw;
width: 60vw;
margin-left: 3vw;
}
}
.star36, .star37, .star38, .star39, .star40, .star41 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star36, .star37, .star38, .star39, .star40, .star41 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star36, .star37, .star38, .star39, .star40, .star41 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star36, .star37, .star38, .star39, .star40, .star41 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.star42, .star43, .star44, .star45, .star46, .star47 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star42, .star43, .star44, .star45, .star46, .star47 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star42, .star43, .star44, .star45, .star46, .star47 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star42, .star43, .star44, .star45, .star46, .star47 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.star48, .star49, .star50, .star51, .star52, .star53 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star48, .star49, .star50, .star51, .star52, .star53 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star48, .star49, .star50, .star51, .star52, .star53 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star48, .star49, .star50, .star51, .star52, .star53 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.star54, .star55, .star56, .star57, .star58, .star59 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star54, .star55, .star56, .star57, .star58, .star59{
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star54, .star55, .star56, .star57, .star58, .star59{
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star54, .star55, .star56, .star57, .star58, .star59{
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.star60, .star61, .star62, .star63, .star64, .star65 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star60, .star61, .star62, .star63, .star64, .star65 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star60, .star61, .star62, .star63, .star64, .star65 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star60, .star61, .star62, .star63, .star64, .star65 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.star66, .star67, .star68, .star69 {
position: absolute;
display: none;
font-size: 2.3vh;
margin-top: 2.5vw;
margin-left: 2vw;
width: 20vw;
height: 2vw;
font-style: italic;
}
@media (max-width:1000px) {
.star66, .star67, .star68, .star69 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 2vw;
}
}
@media (max-width:320px) {
.star66, .star67, .star68, .star69 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
@media (max-width:375px) {
.star66, .star67, .star68, .star69 {
font-size: 1.3vh;
margin-top: 4vw;
font-style: italic;
width: 60vw;
margin-left: 3vw;
}
}
.pixel1 {
position: absolute;
z-index: 600;
width: 11vw;
margin-left: 24.5vw;
margin-top: 33.5vw;
transition: ease-in-out 1s;
color: black;
font-style: italic;
}
.pixel1:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px) scale(1.1);
fill: red;
}
.pixel1:hover + .star1 {
display: block;
}
@media (max-width:375px) {
.pixel1 {
display: none;
}
}
.pixel2 {
position: absolute;
z-index: 600;
width: 4vw;
margin-left:33vw;
margin-top: 29.5vw;
transition: ease-in-out 1s;
}
.pixel2:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel2:hover + .star2 {
display: block;
}
@media (max-width:375px) {
.pixel2 {
display: none;
}
}
.pixel3 {
position: absolute;
z-index: 600;
width: 4vw;
margin-left:27.5vw;
margin-top: 27.5vw;
transition: ease-in-out 1s;
}
.pixel3:hover + .star3 {
display: block;
}
.pixel3:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
@media (max-width:375px) {
.pixel3 {
display: none;
}
}
.pixel4 {
position: absolute;
z-index: 600;
width: 4vw;
margin-left:24vw;
margin-top: 30vw;
transition: ease-in-out 1s;
}
.pixel4:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel4:hover + .star4 {
display: block;
}
@media (max-width:375px) {
.pixel4 {
display: none;
}
}
.pixel5 {
position: absolute;
z-index: 600;
width: 7vw;
margin-left:21vw;
margin-top: 25vw;
transition: ease-in-out 1s;
}
.pixel5:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel5:hover + .star5 {
display: block;
}
@media (max-width:375px) {
.pixel5 {
display: none;
}
}
.pixel6 {
position: absolute;
z-index: 600;
width: 5vw;
margin-left:19vw;
margin-top: 33vw;
transition: ease-in-out 1s;
}
.pixel6:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel6:hover + .star6 {
display: block;
}
@media (max-width:375px) {
.pixel6 {
display: none;
}
}
.pixel7 {
position: absolute;
z-index: 600;
width: 6vw;
margin-left:26vw;
margin-top: 13vw;
transition: ease-in-out 1s;
}
.pixel7:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel7:hover + .star7 {
display: block;
}
@media (max-width:375px) {
.pixel7 {
display: none;
}
}
.pixel8 {
position: absolute;
z-index: 600;
width: 2vw;
margin-left:13vw;
margin-top: 25vw;
transition: ease-in-out 1s;
}
.pixel8:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel8:hover + .star8 {
display: block;
}
@media (max-width:375px) {
.pixel8 {
display: none;
}
}
.pixel9 {
position: absolute;
z-index: 600;
width: 2.5vw;
margin-left:21vw;
margin-top: 29vw;
transition: ease-in-out 1s;
}
.pixel9:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel9:hover + .star9 {
display: block;
}
@media (max-width:375px) {
.pixel9 {
display: none;
}
}
.pixel10{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:11vw;
margin-top: 19vw;
transition: ease-in-out 1s;
}
.pixel10:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel10:hover + .star10 {
display: block;
}
@media (max-width:375px) {
.pixel10 {
display: none;
}
}
.pixel11{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:17vw;
margin-top: 13vw;
transition: ease-in-out 1s;
}
.pixel11:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel11:hover + .star11 {
display: block;
}
@media (max-width:375px) {
.pixel11 {
display: none;
}
}
.pixel12{
position: absolute;
z-index: 600;
width: 6.5vw;
margin-left:11vw;
margin-top: 14.5vw;
transition: ease-in-out 1s;
}
.pixel12:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel12:hover + .star12 {
display: block;
}
@media (max-width:375px) {
.pixel12 {
display: none;
}
}
.pixel13{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:18vw;
margin-top: 9vw;
transition: ease-in-out 1s;
}
.pixel13:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel13:hover + .star13 {
display: block;
}
@media (max-width:375px) {
.pixel13 {
display: none;
}
}
.pixel14{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:6vw;
margin-top: 14.5vw;
transition: ease-in-out 1s;
}
.pixel14:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel14:hover + .star14 {
display: block;
}
@media (max-width:375px) {
.pixel14 {
display: none;
}
}
.pixel15{
position: absolute;
z-index: 600;
width: 5vw;
margin-left:8vw;
margin-top: 26vw;
transition: ease-in-out 1s;
}
.pixel15:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel15:hover + .star15 {
display: block;
}
@media (max-width:375px) {
.pixel15 {
display: none;
}
}
.pixel16{
position: absolute;
z-index: 600;
width: 5vw;
margin-left:12vw;
margin-top:33vw;
transition: ease-in-out 1s;
}
.pixel16:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel16:hover + .star16 {
display: block;
}
@media (max-width:375px) {
.pixel16 {
display: none;
}
}
.pixel17{
position: absolute;
z-index: 600;
width: 5vw;
margin-left:16vw;
margin-top: 21vw;
transition: ease-in-out 1s;
}
.pixel17:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel17:hover + .star17 {
display: block;
}
@media (max-width:375px) {
.pixel17 {
display: none;
}
}
.pixel18{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:16vw;
margin-top: 27vw;
transition: ease-in-out 1s;
}
.pixel18:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel18:hover + .star18 {
display: block;
}
@media (max-width:375px) {
.pixel18 {
display: none;
}
}
.pixel19{
position: absolute;
z-index: 600;
width: 7vw;
margin-left:23vw;
margin-top: 38vw;
transition: ease-in-out 1s;
}
.pixel19:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel19:hover + .star19 {
display: block;
}
@media (max-width:375px) {
.pixel19 {
display: none;
}
}
.pixel20{
position: absolute;
z-index: 600;
width: 5vw;
margin-left:20vw;
margin-top: 16vw;
transition: ease-in-out 1s;
}
.pixel20:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel20:hover + .star20 {
display: block;
}
@media (max-width:375px) {
.pixel20 {
display: none;
}
}
.pixel21{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:35.5vw;
margin-top: 34vw;
transition: ease-in-out 1s;
}
.pixel21:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-2px);
fill: red;
}
.pixel21:hover + .star21 {
display: block;
}
@media (max-width:375px) {
.pixel21 {
display: none;
}
}
.pixel22{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:36vw;
margin-top: 26vw;
transition: ease-in-out 1s;
}
.pixel22:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel22:hover + .star22 {
display: block;
}
@media (max-width:375px) {
.pixel22 {
display: none;
}
}
.pixel23{
position: absolute;
z-index: 600;
width: 10vw;
margin-left:15vw;
margin-top: 6vw;
transition: ease-in-out 1s;
}
.pixel23:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel23:hover + .star23 {
display: block;
}
@media (max-width:375px) {
.pixel23 {
display: none;
}
}
.pixel24{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:23vw;
margin-top: 6vw;
transition: ease-in-out 1s;
}
.pixel24:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel24:hover + .star24 {
display: block;
}
@media (max-width:375px) {
.pixel24 {
display: none;
}
}
.pixel25{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:24vw;
margin-top: 9vw;
transition: ease-in-out 1s;
}
.pixel25:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel25:hover + .star25 {
display: block;
}
@media (max-width:375px) {
.pixel25 {
display: none;
}
}
.pixel26{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:24vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel26:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel26:hover + .star26 {
display: block;
}
@media (max-width:375px) {
.pixel26 {
display: none;
}
}
.pixel27{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:29vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel27:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel27:hover + .star27 {
display: block;
}
@media (max-width:375px) {
.pixel27 {
display: none;
}
}
.pixel29{
position: absolute;
z-index: 600;
width: 2.5vw;
margin-left:28vw;
margin-top: 22vw;
transition: ease-in-out 1s;
}
.pixel29:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel29:hover + .star29 {
display: block;
}
@media (max-width:375px) {
.pixel29 {
display: none;
}
}
.pixel30{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:30vw;
margin-top: 20vw;
transition: ease-in-out 1s;
}
.pixel30:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel30:hover + .star30 {
display: block;
}
@media (max-width:375px) {
.pixel30 {
display: none;
}
}
.pixel31{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:32vw;
margin-top: 9vw;
transition: ease-in-out 1s;
}
.pixel31:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel31:hover + .star31 {
display: block;
}
@media (max-width:375px) {
.pixel31 {
display: none;
}
}
.pixel32{
position: absolute;
z-index: 600;
width: 6.5vw;
margin-left:27vw;
margin-top: 7vw;
transition: ease-in-out 1s;
}
.pixel32:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-2px);
fill: red;
}
.pixel32:hover + .star32 {
display: block;
}
@media (max-width:375px) {
.pixel32 {
display: none;
}
}
.pixel34{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:23vw;
margin-top: 20vw;
transition: ease-in-out 1s;
}
.pixel34:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel34:hover + .star34 {
display: block;
}
@media (max-width:375px) {
.pixel34 {
display: none;
}
}
.pixel35{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:33vw;
margin-top: 14.5vw;
transition: ease-in-out 1s;
}
.pixel35:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel35:hover + .star35 {
display: block;
}
@media (max-width:375px) {
.pixel35 {
display: none;
}
}
.pixel36{
position: absolute;
z-index: 600;
width: 10%;
margin-left:9vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel36:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel36:hover + .star36 {
display: block;
}
@media (max-width:375px) {
.pixel36 {
display: none;
}
}
.pixel37{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:7vw;
margin-top: 20vw;
transition: ease-in-out 1s;
}
.pixel37:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel37:hover + .star37 {
display: block;
}
@media (max-width:375px) {
.pixel37 {
display: none;
}
}
.pixel38{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:14vw;
margin-top: 35vw;
transition: ease-in-out 1s;
}
.pixel38:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel38:hover + .star38 {
display: block;
}
@media (max-width:375px) {
.pixel38 {
display: none;
}
}
.pixel39{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:15vw;
margin-top: 17vw;
transition: ease-in-out 1s;
}
.pixel39:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel39:hover + .star39 {
display: block;
}
@media (max-width:375px) {
.pixel39 {
display: none;
}
}
.pixel40{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:30vw;
margin-top: 34vw;
transition: ease-in-out 1s;
}
.pixel40:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-2px);
fill: red;
}
.pixel40:hover + .star40 {
display: block;
}
@media (max-width:375px) {
.pixel40 {
display: none;
}
}
.pixel41{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:15vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel41:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel41:hover + .star41 {
display: block;
}
@media (max-width:375px) {
.pixel41 {
display: none;
}
}
.pixel42{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:37vw;
margin-top: 24vw;
transition: ease-in-out 1s;
}
.pixel42:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel42:hover + .star42 {
display: block;
}
@media (max-width:375px) {
.pixel42 {
display: none;
}
}
.pixel43{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:23vw;
margin-top: 14.5vw;
transition: ease-in-out 1s;
}
.pixel43:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel43:hover + .star43 {
display: block;
}
@media (max-width:375px) {
.pixel43 {
display: none;
}
}
.pixel44{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:21vw;
margin-top: 18vw;
transition: ease-in-out 1s;
}
.pixel44:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel44:hover + .star44 {
display: block;
}
@media (max-width:375px) {
.pixel44 {
display: none;
}
}
.pixel45{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:39vw;
margin-top: 29vw;
transition: ease-in-out 1s;
}
.pixel45:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel45:hover + .star45 {
display: block;
}
@media (max-width:375px) {
.pixel45 {
display: none;
}
}
.pixel46{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:17vw;
margin-top: 23vw;
transition: ease-in-out 1s;
}
.pixel46:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-2px);
fill: red;
}
.pixel46:hover + .star46 {
display: block;
}
@media (max-width:375px) {
.pixel46 {
display: none;
}
}
.pixel47{
position: absolute;
z-index: 600;
width: 2.5vw;
margin-left:15vw;
margin-top: 25vw;
transition: ease-in-out 1s;
}
.pixel47:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel47:hover + .star47 {
display: block;
}
@media (max-width:375px) {
.pixel47 {
display: none;
}
}
.pixel48{
position: absolute;
z-index: 600;
width: 1.5vw;
margin-left:14vw;
margin-top: 22vw;
transition: ease-in-out 1s;
}
.pixel48:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel48:hover + .star48 {
display: block;
}
@media (max-width:375px) {
.pixel48 {
display: none;
}
}
.pixel49{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:15vw;
margin-top: 29vw;
transition: ease-in-out 1s;
}
.pixel49:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel49:hover + .star49 {
display: block;
}
@media (max-width:375px) {
.pixel49 {
display: none;
}
}
.pixel50{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:19vw;
margin-top: 25vw;
transition: ease-in-out 1s;
}
.pixel50:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel50:hover + .star50 {
display: block;
}
@media (max-width:375px) {
.pixel50 {
display: none;
}
}
.pixel51{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:21vw;
margin-top: 22vw;
transition: ease-in-out 1s;
}
.pixel51:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel51:hover + .star51 {
display: block;
}
@media (max-width:375px) {
.pixel51 {
display: none;
}
}
.pixel52{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:34vw;
margin-top: 18vw;
transition: ease-in-out 1s;
}
.pixel52:hover {
transition: ease-in-out 1s;
transform: rotate(-10deg) translateY(2px);
fill: red;
}
.pixel52:hover + .star52 {
display: block;
}
@media (max-width:375px) {
.pixel52 {
display: none;
}
}
.pixel53{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:20vw;
margin-top: 11vw;
transition: ease-in-out 1s;
}
.pixel53:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel53:hover + .star53 {
display: block;
}
@media (max-width:375px) {
.pixel53 {
display: none;
}
}
.pixel54{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:26vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel54:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel54:hover + .star54 {
display: block;
}
@media (max-width:375px) {
.pixel54 {
display: none;
}
}
.pixel55{
position: absolute;
z-index: 600;
width: 2vw;
margin-left:27vw;
margin-top: 17vw;
transition: ease-in-out 1s;
}
.pixel55:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(20px);
fill: red;
}
.pixel55:hover + .star55 {
display: block;
}
@media (max-width:375px) {
.pixel55 {
display: none;
}
}
.pixel56{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:29vw;
margin-top: 19vw;
transition: ease-in-out 1s;
}
.pixel56:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel56:hover + .star56 {
display: block;
}
@media (max-width:375px) {
.pixel56 {
display: none;
}
}
.pixel57{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:21vw;
margin-top: 38vw;
transition: ease-in-out 1s;
}
.pixel57:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel57:hover + .star57 {
display: block;
}
@media (max-width:375px) {
.pixel57 {
display: none;
}
}
.pixel58{
position: absolute;
z-index: 600;
width: 7vw;
margin-left:26vw;
margin-top: 26vw;
transition: ease-in-out 1s;
}
.pixel58:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel58:hover + .star58 {
display: block;
}
@media (max-width:375px) {
.pixel58 {
display: none;
}
}
.pixel59{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:29vw;
margin-top: 15vw;
transition: ease-in-out 1s;
}
.pixel59:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel59:hover + .star59 {
display: block;
}
@media (max-width:375px) {
.pixel59 {
display: none;
}
}
.pixel60{
position: absolute;
z-index: 600;
width: 3vw;
margin-left:26vw;
margin-top: 34vw;
transition: ease-in-out 1s;
}
.pixel60:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(20px);
fill: red;
}
.pixel60:hover + .star60 {
display: block;
}
@media (max-width:375px) {
.pixel60 {
display: none;
}
}
.pixel61{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:8vw;
margin-top: 24vw;
transition: ease-in-out 1s;
}
.pixel61:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel61:hover + .star61 {
display: block;
}
@media (max-width:375px) {
.pixel61 {
display: none;
}
}
.pixel62{
position: absolute;
z-index: 600;
width: 8vw;
margin-left:26vw;
margin-top: 38vw;
transition: ease-in-out 1s;
}
.pixel62:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel62:hover + .star62 {
display: block;
}
@media (max-width:375px) {
.pixel62 {
display: none;
}
}
.pixel63{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:21vw;
margin-top: 35vw;
transition: ease-in-out 1s;
}
.pixel63:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(2px);
fill: red;
}
.pixel63:hover + .star63 {
display: block;
}
@media (max-width:375px) {
.pixel63 {
display: none;
}
}
.pixel64{
position: absolute;
z-index: 600;
width: 4vw;
margin-left:22vw;
margin-top: 32vw;
transition: ease-in-out 1s;
}
.pixel64:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel64:hover + .star64 {
display: block;
}
@media (max-width:375px) {
.pixel64 {
display: none;
}
}
.pixel65{
position: absolute;
z-index: 600;
width: 7vw;
margin-left:14vw;
margin-top: 33vw;
transition: ease-in-out 1s;
}
.pixel65:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(2px);
fill: red;
}
.pixel65:hover + .star65 {
display: block;
}
@media (max-width:375px) {
.pixel65 {
display: none;
}
}
.pixel66{
position: absolute;
z-index: 600;
width: 5vw;
margin-left:33vw;
margin-top: 12vw;
transition: ease-in-out 1s;
}
.pixel66:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel66:hover + .star66 {
display: block;
}
@media (max-width:375px) {
.pixel66 {
display: none;
}
}
.pixel67{
position: absolute;
z-index: 600;
width: 8vw;
margin-left:17vw;
margin-top: 6vw;
transition: ease-in-out 1s;
}
.pixel67:hover {
transition: ease-in-out 1s;
transform: rotate(-25deg) translateY(-20px);
fill: red;
}
.pixel67:hover + .star67 {
display: block;
}
@media (max-width:375px) {
.pixel67 {
display: none;
}
}
.pixel68{
position: absolute;
z-index: 600;
width: 7vw;
margin-left:28vw;
margin-top: 8vw;
transition: ease-in-out 1s;
}
.pixel68:hover {
transition: ease-in-out 1s;
transform: rotate(25deg) translateY(-20px);
fill: red;
}
.pixel68:hover + .star68 {
display: block;
}
@media (max-width:375px) {
.pixel68 {
display: none;
}
}
.pixel69{
position: absolute;
z-index: 600;
width: 6vw;
margin-left:36vw;
margin-top: 14vw;
transition: ease-in-out 1s;
}
.pixel69:hover {
transition: ease-in-out 1s;
transform: rotate(17deg) translateY(-20px);
fill: red;
}
.pixel69:hover + .star69 {
display: block;
}
@media (max-width:375px) {
.pixel69 {
display: none;
}
}
.image {
padding: 2rem;
margin-bottom: 0rem;
/* background-color: grey; */
min-height: 1rem;
max-width: 100%;
background-color: gray;
}
img {
max-width: 100%;
height: auto;
}
.content100 {
background-color:none;
height: 50vw;
}
.image1 {
padding: 2vw;
}
@media (max-width:1000px) {
.image1 {
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image1 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image1 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image1 {
padding: 2vw;
width: 50%;
}
}
.image2 {
padding: 2vw;
}
@media (max-width:1000px) {
.image2 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image2 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image2 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image2 {
padding: 2vw;
width: 50%;
}
}
.image3 {
padding: 2vw;
}
@media (max-width:1000px) {
.image3 {
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image3 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image3 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image3 {
padding: 2vw;
width: 50%;
}
}
.image4 {
padding: 2vw;
}
@media (max-width:1000px) {
.image4 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image4 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image4 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image4 {
padding: 2vw;
width: 50%;
}
}
.image5 {
padding: 2vw;
}
@media (max-width:1000px) {
.image5 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image5 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image5 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image5 {
padding: 2vw;
width: 50%;
}
}
.image6 {
padding: 2vw;
}
@media (max-width:1000px) {
.image6 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image6 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image6 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image6 {
padding: 2vw;
width: 50%;
}
}
.image7 {
padding: 2vw;
}
@media (max-width:1000px) {
.image7 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image7 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image7 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image7 {
padding: 2vw;
width: 50%;
}
}
.image8 {
padding: 2vw;
}
@media (max-width:1000px) {
.image8 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image8 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image8 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image8 {
padding: 2vw;
width: 50%;
}
}
.image9 {
padding: 2vw;
}
@media (max-width:1000px) {
.image9 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image9 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image9 {
margin-top: -0vw;
margin-left: -0.5vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image9 {
padding: 2vw;
width: 50%;
}
}
.image10 {
padding: 2vw;
}
@media (max-width:1000px) {
.image10 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image10 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image10 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image10 {
padding: 2vw;
width: 50%;
}
}
.image11 {
padding: 2vw;
}
@media (max-width:1000px) {
.image11 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image11 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image11 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image11 {
padding: 2vw;
width: 50%;
}
}
.image12 {
padding: 2vw;
}
@media (max-width:1000px) {
.image12 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image12 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image12 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image12 {
padding: 2vw;
width: 50%;
}
}
.image13 {
padding: 2vw;
}
@media (max-width:1000px) {
.image13 {
margin-top: -0.5vw;
margin-left: -0.5vw;
padding: 2vw;
width: 70%;
}
}
@media (max-width:768px) {
.image13 {
margin-top: 1vw;
padding: 2vw;
width: 60%;
}
}
@media (max-width:375px) {
.image13 {
padding: 2vw;
width: 60%;
}
}
@media (max-width:320px) {
.image13 {
padding: 2vw;
width: 50%;
}
}
.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8 {
display: none;
color: chartreuse;
background-color: none;
position: absolute;
margin-left: -15vw;
margin-top: -13vw;
text-align: center;
justify-content: center;
font-family: Helvetica, sans-serif;
font-size: 2.2vh;
z-index: 1000;
}
.text9, .text10, .text11, .text12, .text13, .text14, .text15, .text16, .text17, .text18, .text19 {
color: chartreuse;
background-color: none;
position: absolute;
margin-left: -15vw;
margin-top: -13vw;
text-align: center;
justify-content: center;
font-family: Helvetica, sans-serif;
font-size: 2.2vh;
z-index: 1000;
}
.d1 {
width :100vw;
height: 10vw;
background-size: contain;
animation: fondu 15s ease-in-out infinite both;
}
.d2 {
width: 100vw;
height: 50vw;
padding-top: 75%;
background-size: contain;
animation: fondu 15s ease-in-out infinite both;
}
.conteneur {
max-width: 100vw;
height: 50vw;
}
@keyframes fondu {
0% {background-image: url(1-2.png);}
33%{background-image: url(9-2.png);}
66%{background-image: url(10-2.png);}
100%{background-image: url(6-2.png);}
}
.constellation {
position: absolute;
color: red;
font-size: 2.3vh;
margin-left: 39vw;
margin-top:1.1vw;
cursor: pointer;
}
.constellation:hover {
color: white;
}
@media (min-width:1440px) {
.constellation {
position: absolute;
color: red;
font-size: 2.4vh;
margin-left: 37vw;
margin-top:1vw;
cursor: pointer;
}
}
@media (max-width:1000px) {
.constellation {
position: absolute;
color: red;
font-size: 2.1vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 47vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:768px) {
.constellation {
position: absolute;
color: red;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 47vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:375px) {
.constellation {
position: absolute;
color: red;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 95vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:320px) {
.constellation {
position: absolute;
color: red;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 94vw;
margin-top:2vw;
cursor: pointer;
}
}
.satellite{
position: absolute;
color: black;
font-size: 2.3vh;
margin-left: 91.5vw;
margin-top:1.1vw;
cursor: pointer;
}
@media (min-width:1440px) {
.satellite{
position: absolute;
color: black;
font-size: 2.4vh;
margin-left: 90vw;
margin-top:1vw;
cursor: pointer;
}
}
@media (max-width:1000px) {
.satellite{
position: absolute;
color: black;
font-size: 2.1vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 97vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:768px) {
.satellite{
position: absolute;
color: black;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 97vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:375px) {
.satellite{
position: absolute;
color: black;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 95vw;
margin-top:2vw;
cursor: pointer;
}
}
@media (max-width:320px) {
.satellite{
position: absolute;
color: black;
font-size: 1.3vh;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-left: 94vw;
margin-top:2vw;
cursor: pointer;
}
}
.satellite:hover {
color: white;
}