body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: start;
    background: #ddf8c5;
    background: linear-gradient(0deg, rgba(144, 246, 225, 1) 0%, rgba(221, 248, 197, 1) 100%);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;    
}
#stage {
    --r: 480 / 750;
    aspect-ratio: var(--r);
    width:min(100%, min(480px, 100vh*(var(--r))));
}
#active {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#pages {
    width: 100%;
    height: 200%;
    position: relative;
    top: 0;
    overflow: hidden; 
}
.step {
    width: 100%;
    height: 50%;
}
#header1 {
    width: 19.792%;
    height: 12.667%;   
    display: flex;
    float: left;     
    margin-top: 8%;
    margin-left: 4.3%;
}
.logo {
    width: 100%;
    height: 100%;  
    background-image: url("logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(90%);
}
#header2 {
    width: 9.792%;
    height: 12.667%;   
    display: flex;
    float: left;     
    margin-top: 8%;
    margin-left: 61.458%;
}
.menu {
    width: 100%;
    height: 100%;  
    background-image: url("i04.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(90%);
}
.m1 {
    margin-top: 65%;
}
#text {
    width: 90.833%;
    height: 67.734%;   
    display: flex;
    container-type: size;
    margin-left: 4.583%; 
    padding-top: 7.2%;
}
.r500 {
    margin-top: min(1.333vh, 10px);
    margin-left: -0.462%;
    font-weight: 500;
    font-size: 6.6cqh; /*9.737*/
    line-height: 7.85cqh; /*11.579*/
    color: rgba(0, 0, 0, 0.9);
}
.a1 {
    text-decoration: underline; 
    color: rgba(0, 0, 0, 0.9);
}
#footer1 {
    width: 8.542%;
    height: 4.667%;   
    display: flex;
    float: left;
    margin-top: 2.1%;
    margin-left: 4.375%;   
}
.seen {
    width: 100%;
    height: 100%;  
    background-image: url("i03.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(90%);
    margin-top: 15%;
}
#footer2 {
    width: 33.333%;
    height: 4.667%;   
    display: flex;
    float: left;
    container-type: size;
    margin-top: 2.1%; 
}
.r700 {
    margin-top: min(0.667vh, 5px);
    margin-left: 6.923%;
    font-weight: 700;
    font-size: 80cqh;
    line-height: 80cqh;
    color: rgba(0, 0, 0, 0.9);
}
#header3 {
    width: 9.792%;
    height: 9%;   
    display: flex;
    float: left;     
    margin-top: 9%; 
    margin-left: 4.3%;
   
}
.m2 {
    margin-top: 29%;
}
#header4 {
    width: 81.21%;
    height: 9%;   
    display: flex;
    float: left;     
    margin-top: 9%; 
  
}
.li1 {
    width: 3.958%;
    height: 8.2%;   
    display: flex;
    float: left;
    margin-left: 7.083%;   
}
.link {
    width: 100%;
    height: 100%;  
    background-image: url("i06.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(90%);
    margin-top: 80%;
}
.li2 {
    width: 84.167%;
    height: 8.2%;   
    display: flex;
    float: left;
    container-type: size;
    margin-top: 2.1%; 
}
.m3 {
    margin-top: 5%;
}
.r600 {
    margin-top: min(1.6vh, 12px);
    margin-left: 4.2%;
    font-weight: 700;
    font-size: 52cqh;
    color: rgba(0, 0, 0, 0.9);
}
.m4 {
    margin-top: 1%;
}
#header2:hover, #header3:hover, #header4:hover, .li1:hover, .li2:hover {
    cursor: pointer;
}