@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Fascinate+Inline&family=Michroma&family=Playwrite+IT+Moderna:wght@100..400&family=Righteous&display=swap');

*{
    margin:0;
    padding:0;
    transition:all .6s ease-in-out;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "righteous";
}
:root{
    --item:rgb(43, 49, 57);
    --docs:rgb(71, 77, 87);
    --transpdoc:rgba(70, 81, 101, 0.444);
    --doctext:rgb(132, 142, 156);
    --textlarge:rgb(234, 236, 239);
    --gsmalltext:rgb(183, 189, 198);
    --back:rgb(24, 26, 32);
}

body{
    background:
    url(./img/icon-c.png),
    linear-gradient(25deg,var(--back),rgb(45, 47, 49));
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed,fixed;
    background-size: cover,cover;
    background-position: center,center;

}
 
a{
    text-decoration:none;

}
.footer{
    background:
    url(./img/icon-c.png) no-repeat,
    linear-gradient(25deg,var(--back),rgb(38, 39, 41));
    background-position:0% 70%;
    height: 610px;
    display: flex;
    background-position: 0% 44%, center;
    background-attachment: fixed,scroll;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;

}
.icons img{
    font-size: 10px;
}
.flinks{
    font-size: 10px;
    font-weight: 100;
    letter-spacing: 1.4px;
}
.paystack,.cloudflare,.media{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    height:15px;
    width: 15px;
    padding:3px;
    border-radius: 50%;
    background:rgba(255, 255, 255, 0.122);
   
}

.cloudflare{
    height:20px;
    width: 20px;
    border-radius: 50%;
 
}
.flinks{
    color:var(--gsmalltext);
    display: flex;
    justify-content:left;
    align-items: center;
    padding:5px;
    opacity: 0;
    animation:fades ease-in;
    animation-timeline: view(0% 10%);


}
h4{
    padding: 10px;
    color:var(--textlarge);
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top:10px;
    margin-bottom: 20px;
    padding:10px;
    border-radius: 10px;
        -webkit-backdrop-filter: blur(5rem);
    backdrop-filter: blur(5rem);
    animation:fades ease-in;
    animation-timeline: view(0% 10%);
}
.feet{
    list-style: none;
}

.start{
    height:100px;
    width:100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin:auto 0;
}
.head1{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

.headtext2,
    .headtext1{
    opacity: 0;
    position: absolute;
    transition: opacity .6s ease-in-out;
       background:linear-gradient(45deg,rgb(0, 90, 106) 20%,rgb(136, 0, 136) 90%);
    background-clip: text;
    color:transparent;
    text-shadow: 0px -10px 0px rgb(255, 255, 255);
    transform:rotateY(90deg);

}
.htextactive{
    opacity: 1;
    transition: opacity .6s ease-in-out;
    transform:rotateY(0deg);

}
    .headtext{
    font-size: 80px;
    color:var(--textlarge);
    font-weight: 600;
    transition: opacity .6s ease-in-out;
    display: flex;
    align-items: flex-end;
    position:relative;
    flex-direction: row;
    margin: 0 auto;
    height:60%;
    border-radius: 100px 0px 0px 100px;
    border-left:7px solid #00bbff;
    padding-left:50px;
    box-shadow:-5px 10px 5px rgba(0, 0, 0, 0.602);
    backdrop-filter: blur(4rem);
    padding-bottom: 20px;
    -webkit-backdrop-filter: blur(4rem);

    width:70%;
}
.headtexta{
     color:var(--textlarge);
    font-weight: 600;
    transition: opacity .6s ease-in-out;
    display: flex;
    align-items: flex-end;
    position:relative;
    flex-direction: row;
    margin: 0 auto;
 
    width:78%;
}
.getstarted:hover{
    box-shadow: 0px 0px 0px rgba(211, 211, 211, 0);
}
    .getstarted{

    background:var(--back);
    color:var(--gsmalltext);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.752);
    height:30px;
    font-weight: 600;
    width:300px;
    border-radius: 10px;
    padding:10px;
}
.sec{
    color:rgb(178, 186, 189);
    display: flex;
    justify-content:left;
    flex-direction: column;
    min-width: 10%;

}

.icon{
    margin-right:10px;
    ;
}
.poster{
    width: 200px;
    height: 100px;
    object-fit:cover;
    object-position:center;
}
.head{
    display: flex;
    flex-direction: column;
    height: 340px;
   
}
.htext{
    font-size: 12px;
    color: var(--gsmalltext);
    font-family:"michroma";
    border-radius: 30px;
    border:5px solid transparent;
    padding-bottom:10px;

}
.topic{
    font-weight: 500;
     font-size: 20px;
    padding:15px;
 
}
img{
    user-select: none;
}
.content{
    position:relative;
    margin:auto;
    width: 80%;
    padding:10px;
    overflow: hidden;
    border-radius: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    overflow-x:scroll;

    ;

}
*::-webkit-scrollbar{

    width: 1px;
    height: 1px;
}
    .shown{
    overflow: hidden;
display: flex;
 justify-content: space-around;
flex-direction: row;
width: fit-content;
flex-wrap: nowrap;
;

}
.item:hover{
    transform: scale(1.05);
}
    .item{
    border-radius: 15px;
    background:var(--item);
    height: 150px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    margin:10px;
    user-select: none;
    transition:all .6s ease-in-out
}

.imgbox{
    width:50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:2px;
    overflow: hidden;
}
.image{
    width:100%;
    border-radius: 10px;
}
.options{
    width:100%;
    display: flex;
    flex-direction: row;
    text-align: right;
    align-items:center;
    justify-content: flex-end;
}
.list{
    font-size: 12px;
    font-family: sans-serif;
    list-style:circle;
    line-height: 20px;
    color: rgb(151, 172, 188);
    padding-bottom: 10px;
}
.list li{
    padding:10px;
    letter-spacing: 1.3px;
    opacity: 0;
    animation:fades ease-in;
    animation-timeline: view(0% 10%);
}
.edit{
    padding:10px;
    width:min-content;
    -webkit-aspect-ratio: 1/1;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-clip: none;
    color:black;
    background:rgba(174, 221, 244, 0.1);
}
.quest{
    width:100%;
    display: flex;
    background:
    radial-gradient(rgba(0, 0, 0, 0.711) 10%,var(--item) 40%),
    repeating-conic-gradient(
    from 45deg, rgb(0, 0, 0) 0deg 45deg, rgb(103, 103, 103) 45deg 90deg);
    background-size: 180% 350%,1em 1em;
    background-position:0% 50%;
    background-attachment: fixed,fixed;
    flex-direction: row-reverse;
    padding-top: 20px;
    padding-bottom: 50px;
    flex-wrap: wrap;
    box-shadow:
     inset 0px -50px 300px rgba(0, 0, 0, 0.477);
    justify-content: flex-end;

}
.phone{
    width:500px;
}
.getst{display: flex;
padding: 20px;
cursor: pointer;
 border-radius: 200px;
height: 100px;
text-align: center;
justify-content: center;
align-items: center;
width: 100px;
text-shadow: none;
font-size: 20px;
background:var(--item);
color: var(--doctext);
align-self: center;
 border: .5px solid var(--back);
transition: all .4s ease-in-out;
opacity: 0;
animation:fades ease-in;
    animation-timeline: view(0% 10%);

}
.getst:hover{
         background:var(--item);

        color:var(--gsmalltext);
 border: .5px solid var(--transpdoc);

        box-shadow: 
        inset 0px 40px 0px var(--transpdoc), 
        inset 0px -40px 0px var(--transpdoc),
         inset -40px 0px 0px var(--transpdoc),
          inset 40px 0px 0px var(--transpdoc);
        filter: drop-shadow( 200px 0px 0px white, -200px 0px 0px white, 0px 200px 0px white, 0px 200px 0px white, );
}
.questa{
    display: flex;
    background:
    radial-gradient(rgba(0, 0, 0, 0.711) 10%,var(--back) 40%),
    repeating-conic-gradient(
    from 45deg, rgb(0, 0, 0) 0deg 45deg, rgb(103, 103, 103) 45deg 90deg);
    background-size: 180% 300%,1em 1em;
    box-shadow: inset 0px 40px 300px var(--back);
    background-position:0% 70%;
    background-attachment: fixed,fixed;
    padding-top: 100px;
    padding-bottom: 100px;
    justify-content: space-between;
     flex-wrap: wrap;
     padding:10px;
     flex-direction: row;
 
}

  .ui{
    position:absolute;
    width:300px;
     margin:5px;
     transition: all 1s ease-in-out;
    border-radius: 100px;
    background:conic-gradient(from var(--angle),transparent,gold,rgb(0, 0, 0), rgb(255, 213, 62),transparent);
    outline:10px double rgba(0, 0, 0, 0.51);
    outline-offset: -30px;
    border:10px double transparent;
    animation: spins 21s linear infinite;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes spins {
   
    3%,47%{
        transform:scale(1) translateY(0%);
        z-index:2;

    }
    0%{
        --angle:0deg;
        transform:scale(0) translateY(600px);
        z-index:0;
    }
    50%{
        --angle:2520deg;

    }
    49%,52%{
        transform:scale(0) translateY(-600px);
        z-index:0;

    }
    53%,100%{
        transform:scale(0) translateY(600px);
        z-index:0;

    }

}

    .ui:nth-child(1){
    top:2;
    left:10;
    transform:scale(0);
    z-index:0;
    animation-delay: 10.5s;
}
.ui:nth-child(1):hover,
.ui:nth-child(2):hover{
    transform: scale(1.04);
    border-radius: 0px;
     z-index: 1;

}
    .ui:nth-child(2){
    bottom:2;
    right: 10;
}
.para1{
    padding:10px;
     font-size: 12px;
    color:gold;
    background:rgba(0, 0, 0, 0.2);
    border-radius: 7px;
    width: fit-content;
    font-family: "michroma";

}
.para{
    padding:10px;
     font-size: 14px;
     background:rgba(0, 0, 0, 0.2);
    border-radius: 7px;
    width: fit-content;
    opacity: 0;
    animation:fades ease-in;
    animation-timeline: view(0% 10%);

}
.left{
    width:50%;
    padding:20px;
    border-radius: 10px;;
}
.right{
    width:45%;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    }

.gets{
    text-align: center;
    width: 100%;
    padding:20px;
    display: flex;
    padding-top: 50px;
    align-items: center;
    justify-content: center;
    height: fit-content;
}
.para2{
    padding:10px;
     font-size: 12px;
     color:cyan;
     background:rgba(0, 0, 0, 0.2);
     font-family: "michroma";
    border-radius: 7px;
    width: fit-content;

}
.para3{
    padding:10px;
     font-size: 12px;
     color:rgb(255, 0, 187);
     font-family: "michroma";
     background:rgba(0, 0, 0, 0.2);
    border-radius: 7px;
    width: fit-content;

}
.parat{
    padding:10px;
    opacity:0;
    color:transparent;
    background:linear-gradient(45deg,rgb(255, 255, 255) 40%,rgb(66, 74, 99) 20%,rgb(230, 248, 255) 90%);
    background-clip: text;
    transform:scale(0.4) translateY(100%) rotateY(90deg);
    animation:fades ease-in;
    animation-timeline: view(0% 10%);
}

@keyframes fades{
37%,100%{
        opacity:1;
        letter-spacing: 1px;
    transform:translateX(0px) scale(1) translateY(0px) rotateY(0deg);


    }
    20%{
        opacity:0.2;
        letter-spacing:3px;
        transform:translateX(200px);

    }
    0%{
        opacity:0;
        letter-spacing:3px;
        transform:translateX(100px) translateY(500px) rotateY(10deg);
    }
}
.qleft{
    width:40%;
    font-size: 40px;
    color:var(--textlarge);
    font-weight: 500;
    padding:30px;
 
}
.webbs{
    position: absolute;
}
 
.qright{
    width:50%;
    position: relative;
    height:600px;
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin:10px;
    overflow: hidden;
    filter:hue-rotate(245deg);
    background:
    radial-gradient(transparent 90%,gold 5%);
    background-size:10px 10px;
    background-repeat:repeat;
    background-position:center,center;
            animation:zooms ease-in;
    animation-timeline: view(0% -30%);
}
@keyframes zooms {
    50%, 100%{
        transform: scale(1) translateY(0%);
        opacity: 1;
    filter:hue-rotate(0deg)

    }
    
}
.docsvg{
padding-right: 5px;
height:18px;
padding:3px;
}
.more
{  
    margin:5px;
    width:70px;
    background:var(--docs);
    padding:5px;
    text-align: right;
    align-items: center;
    display: flex;
    font-size:14px;
    cursor: pointer;
    color:var(--doctext);
    flex-direction: row;
     border-radius: 10px;
    outline-offset: -7px;
    outline: 3px double var(--doctext);
}
.text{
    width:100%;
    height: 50px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding:5px;
    font-size: 13px;
    font-family: "michroma";
    font-weight: 500;
    color:rgb(178, 186, 189);
}