@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geostar+Fill&family=Roboto+Mono:ital,wght@1,600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.total_page {
    position: absolute;
    width: 100%;
    height: 100%;
}

#page1 {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 76.9%;
    color: #fff;
}

#page1 h1 {
    font-family: sans-serif; 
    margin-right: 80px;
    margin-top: 400px;
    font-size: 80px;
    text-align: right;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
}

#page1 .img1 {
    position: absolute;
    width: 100%;
    height: 130%;
    z-index: -1;
    right: 0;
    top: 0;
    transition: 1s;
    cursor: pointer;
}

#page1 img:hover {
    transform: scale(0.9);
    cursor: pointer;
    border-radius: 50px;
}

#page2 {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 90%;
    color: #fff;
}

#page2 .bl {
    position: absolute;
    width: 100%;
    height: 111.1%;
    z-index: -1;
    right: 0;
    top: 0;
    transition: 1s;
}

#page2 .stonks {
    position: absolute;
    width: 25%;
    height: 25%;
    z-index: 99;
    right: 10%;
    top: 85%;
    opacity: 0.3;
    transition: 1s;
}

#page2 h2 {
    font-family: sans-serif; 
    margin-left: 45;
    margin-top: 350px;
    font-size: 26px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
    text-decoration: underline;    
}
#page2 h3 {
    font-family: sans-serif; 
    margin-left: 30px;
    margin-top: 1px;
    font-size: 26px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
}

#page2 h4 {
    position: absolute;
    font-family: sans-serif; 
    left: 100px;
    top: 800px;
    font-size: 26px;
    text-align: left;
    color: #9c9999;
    text-shadow: 2px 2px 5px #000000;
    z-index: 1;
}

#page3 {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 90%;
    color: #fff;
}

#page3 h1 {
    font-family: sans-serif; 
    margin-left: 50px;
    margin-top: 350px;
    font-size: 26px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
    text-decoration: underline;    
}

#page3 h2 {
    font-family: sans-serif; 
    margin-left: 50px;
    margin-top: auto;
    font-size: 26px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
}

#page3 h3 {
   font-family: sans-serif; 
    margin-left: 60%;
    margin-top: 40px;
    font-size: 26px;
    text-align: left;
    color: #ffec43;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99; 
}

#page3 h4 {
    position: absolute;
    font-family: sans-serif; 
    left: 100px;
    top: 800px;
    font-size: 26px;
    text-align: center;
    color: #9c9999;
    text-shadow: 2px 2px 5px #000000;
    z-index: 1;
}

#page3 .recapbnb {
    margin-left: 60%;
    margin-top: 35px;
    z-index: 99;
    right: 400px;
    top: 750;
    opacity: 0#8;
    transition: 1s;
    border-radius: 20px;
}

#page3 .bnb {
    position: absolute;
    width: 100%;
    height: 111.1%;
    z-index: -1;
    right: 0;
    top: 0;
    transition: 1s;
}

#page4 {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 90%;
    color: #fff;
}

#page4 h1 {
    font-family: sans-serif; 
    margin-left: 50px;
    margin-top: 350px;
    font-size: 26px;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
    text-decoration: underline;    
}

#page4 h2 {
    font-family: sans-serif; 
    margin-left: 50px;
    margin-top: auto;
    font-size: 26px;
    text-align: left;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
}

#page4 h4 {
    position: absolute;
    font-family: sans-serif; 
    left: 100px;
    top: 800px;
    font-size: 26px;
    text-align: center;
    color: #9c9999;
    text-shadow: 2px 2px 5px #000000;
    z-index: 99;
}

#page4 .twitter {
    position: absolute;
    width: 25%;
    height: 65%;
    z-index: 99;
    right: 6%;
    top: 40%;
    transition: 0.5s;
}

#page4 .twitter:hover {
    transform: scale(0.93);
    cursor: pointer;
    }

#page4 .btc {
    position: absolute;
    width: 100%;
    height: 111.1%;
    z-index: -1;
    right: 0;
    top: 0;
    transition: 1s;
}
#haut {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  filter: invert(60%);
}

#haut img {
  width: 40px;
}


.nav {
    width: 100%;
    height: 75px;
    background-color: #00000097;
    border-bottom: solid #004aad 2px;
}

.nav .nav-element {
    position: relative;
    margin-left: 25%;
    z-index: 99;
    width: 50%;
    height: 100%;

}

.nav .nav-element ul {
    display: flex;
    justify-content: space-around;
}

.nav a img {
    position: absolute;
    z-index: 99;
    right: 90%;
    top: 15px;
    transition: 1s;
}

.nav a {
    text-decoration: none;    
    color: #b1d4e5; 
    font-family: sans-serif; 
}
.nav .nav-element li {
    font-family: sans-serif;
    list-style: none;
    color: grey;
    font-size: 30px;
    margin-top: 15px;
    cursor: pointer;
    transition: 0.5s;
    padding: 10px;
}

.nav .nav-element li:hover {
    transform: scale(0.9);
    color: #ffffff;
    background-color: #00182c;
    padding: 10px;
    border-radius: 5px;
}