@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


*,
::before,
::after{
    padding: 0%;
    margin: 0%;
}
html{
    /* 1px = 1rem */
    font-size: 62.5%;
    overflow-x: hidden;
}

/* 
=========================
Colorn Schemes
=========================
*/
:root{
    /* Dark Shades of Primary Color */
    --clr-primary-1: hsl(240, 3.03%, 6.47%);
    --clr-primary-2: hsl(0, 0%, 9.02%);
    /* Color White */
    --clr-secomdary-1: hsl(0, 4%, 91%);
    --clr-secomdary-2: hsl(0, 2%, 78%);
    --clr-secomdary-Dark: hsl(0, 0%, 57%);
}


/* 
=========================
Utility Styles
=========================
*/
.flx{
    display: flex;
}
.fdc{
    flex-direction: column;
}
.grd{
    display: grid;
}
.grd_2{
    grid-template-columns: repeat(2, 1fr);
}
.grd_3{
    grid-template-columns: repeat(2, 1fr);
}
.grd_4{
    grid-template-columns: repeat(2, 1fr);
}

.aic{
    align-items: center;
}
.jcc{
    justify-content: center;
}
.jcsb{
    justify-content: space-between;
}
.jcsa{
    justify-content: space-around;
}

/* LIST ITEMS/LINKS */
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

input,
button{
    outline: transparent;
}

button,
a{
    cursor: default;
}
@media (Width > 768px){
button,
a{
    cursor: pointer;
}
}


/* TYPOGRAHPIES */
h1{
    font-size: 3.5rem;
    line-height: 4rem;
}
h2{
    font-size: 3.2rem;
    line-height: 3.7rem;
}
h3{
    font-size: 2.9rem;
    line-height: 3.4rem;
}
h4{
    font-size: 2.6rem;
    line-height: 3.1rem;
}
h5{
    font-size: 2.3rem;
    line-height: 2.8rem;
}
h6{
    font-size: 2rem;
    line-height: 2.5rem;
}

/* Desktop View for 'TYPOGRAHPIES' */
@media (width > 768px) {
h1 {
    font-size: 3.7rem;
    line-height: 4.2rem;
}
h2 {
    font-size: 3.4rem;
    line-height: 3.9rem;
}
h3 {
    font-size: 3.1rem;
    line-height: 3.6rem;
}
h4 {
    font-size: 2.8rem;
    line-height: 3.3rem;
}
h5 {
    font-size: 2.5rem;
    line-height: 3rem;
}
h6 {
    font-size: 2.2rem;
    line-height: 2.7rem;
}
}

/* 
=========================
Main Styles
=========================
*/
body{
    background: var(--clr-primary-1);
    color: var(--clr-secomdary-1);
    font-family: 'Montserrat';
    font-size: 1.8rem;
    overflow-x: hidden;
    overflow-x: hidden;
}
/* Desktop View for {Body} */
@media (width > 768px){
body {
    font-size: 2rem;
}
}



/* =============================
NAVBAR
=============================*/
.navbar{
    --navHeight: 10rem;
    background-color: var(--clr-primary-2);
    height: var(--navHeight);
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999999;
}
.navbarContainer{
    height: var(--navHeight);
}
.logo img{
    width: 150px;
}

/* NAVLIST */
.navListItems{
    background-color: hsl(0, 0%, 100%);
    bottom: 0;
    display: block;
    padding: 13rem 4rem;
    position: fixed;
    right: -100vh;
    top: 0;
    transition: .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.navListItems.active{
    right: 0;
}

.navListItems a{
    color: hsl(0, 0%, 0%);
    font-size: smaller;
    gap: 5rem;
    margin-top: 5rem;
}
.navListItems a.active,
.navListItems a:hover{
    color: hsl(240, 100%, 50%);
    opacity: 1;
}

/* TOGGLE BTN */
.harmburgerBtn{
    background: transparent;
    border: 0;
    height: 4rem;
    margin-bottom: 1rem;
    position: absolute;
    right: 3rem;
    width: 3rem;
    z-index: 999999999999999;
}

.line-harmburger{
    background: hsl(0, 0%, 100%);
    border-radius: .2rem;
    height: 3px;
    margin-top: 1rem;
    position: relative;
    transition: .1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    width: 100%;
}
.harmburgerBtn.active .line-harmburger{
    background: hsl(0, 0%, 0%);
    position: absolute;
}

.harmburgerBtn.active .firstLine{
    animation: anime 1s forwards;
    transform: rotate(-50deg);
}
/* SECOND LINE */
.harmburgerBtn.active .lastLine{
    animation: anime2 1s forwards;
    transform: rotate(50deg);
}
/* MIDDLE LINE */
.harmburgerBtn.active .middleLine{
    opacity: 0;
    position: absolute;
}

/* NAVBAR MEDIA QUERY FOR LARGE SCREENS */
@media (width > 850px){
/* HIDE HARMBURGER */
.harmburgerBtn {
    display: none;
}
/* NAVLIST */
.navListItems {
    background-color: transparent;
    color: hsl(0, 0%, 100%);
    display: flex;
    gap: 3rem;
    padding: 0;
    position: inherit;
}
.navListItems a {
    color: hsl(0, 0%, 100%);
    font-size: smaller;
    line-height: 3rem;
    margin-top: 0;
}
.navListItems a i{
    display: none;
}
.navbarContainer {
    justify-content: space-around;
}
}


/* =============================
BLOCK CHAIN NETWORKS
=============================*/
.blockchainNetworks{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/net-BGimg.webp);
    padding: 20rem 0 5rem 0;
}
.blockchainNetworks,
.networkContainer{
    width: 100%;
}
/* NETWORK CONTAINER */
.networkContainer{
    gap: 0;
    padding: 4rem 0;
    row-gap: 3rem;
}
.blockchainNetworks h1{
    font-size: 3.5rem;
    padding-bottom: 1rem;
    text-align: center;
}
/* NETWORK CARD */
.NetworkCard{
    background-color: var(--clr-secomdary-2);
    border-radius: 3rem;
    border: 0;
    color: var(--clr-primary-1);
    height: 160px;
    outline: transparent;
    padding: 1rem 2rem;
    transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 95%;
}
.NetworkCard:hover{
    background-color: var(--clr-secomdary-1);
}
.NetworkCard img{
    border-radius: 100%;
    margin-right: 2rem;
    position: relative;
    width: 80px;
}

/* MEDIA QUERY FOR DESKTOP NETWORK SECTION */
@media (width > 768px){
.blockchainNetworks{
    background-image: url(images/net-BGimg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 18rem 0 15rem 0;
}
/* NETWORK CONTAINER */
.networkContainer{
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
    width: 95%;
}
.blockchainNetworks h1 {
    font-size: 4.5rem;
    padding-bottom: 4rem;
}
}

/* LARGER SCREENS */
@media (width > 1000px){
.networkContainer {
    gap: 3rem;
    row-gap: 5rem;
    width: 75%;
}
}


/* =============================
POP-UP STYLES
=============================*/
/* CLOSE MODAL */
.closeModal {
    background-color: transparent;
    border-radius: 100%;
    border: 1px solid hsl(0, 0%, 0%);
    font-size: 2rem;
    height: 3.5rem;
    outline: transparent;
    padding-top: .5rem;
    position: absolute;
    right: 2rem;
    top: 1.7rem;
    width: 3.5rem;
}

/* Larger screens for close MODALS */
@media (width > 1000px) {
/* CLOSE BTN ICON */
.closeModal {
    border: 0;
    color: hsl(0, 0%, 100%);
    font-size: 4rem;
    height: fit-content;
    margin-bottom: 0;
    padding: 0;
    right: -5rem;
    top: .5rem;
    width: fit-content;
}    
}

.overlay {
    background-color: hsla(0, 0%, 0%, 0.994);
    min-height: 0dvh;
    overflow: hidden;
    position: fixed;
    transition: height cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    z-index: 99999999999999999999999999;
}
.overlay.active {
    min-height: 100dvh;
    inset: 0;
}

/* LOGIN MODAL */
.loginModal{
    background-color: hsl(0, 0%, 100%);
    border-radius: .5rem;
    padding: 8rem 3rem;
    position: relative;
}

.containerLoginModal{
    background-color: hsl(0, 0%, 100%);
    border-radius: 1rem;
    color: var(--clr-primary-1);
    padding: 5rem 1rem;
}

.containerLoginModal{
    box-shadow: 0 0 4px 2px hsla(0, 0%, 0%, 0.146);
    margin-top: 2rem;
}

.containerLoginModal > h1 {
    text-align: center;
}

/* Login MODAL BTNS */
.loginModalButtons{
    padding-top: 5rem;
    gap: 2.5rem;
}
.btnLoginModal{
    background-color: hsl(0, 0%, 100%);
    border: 0;
    box-shadow: 0 0 4px 2px hsla(0, 0%, 0%, 0.24);
    font-size: smaller;
    gap: 3rem;
    height: 10rem;
    padding: 1rem 2rem;
    width: 100%;
}


/* LOGIN MODAL MEDIA QUERY */
@media (width > 768px){
/* LOGIN MODAL */
.loginModal{
    height: 90vh;
    padding: 3rem 5rem;
    width: 700px;
}
.containerLoginModal{
    margin: 5rem 0;
    padding: 10rem 5rem;
}
}



/* =============================
MODAL STYLEs
=============================*/
/* MODALs */
.modalCamp,
.modalCamp2,
.modalCamp3,
.modalCamp4{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 0dvh;
    justify-content: center;
    position: fixed;
    scale: 0;
    transition: scale .4s;
    width: 100%;
}
/* ACTIVE MODAL STYLES */
.modalCamp.active,
.modalCamp2.active,
.modalCamp3.active,
.modalCamp4.active {
    height: 100dvh;
    inset: 0;
    overflow: hidden;
    scale: 1;
    z-index: 999999999999999999999999999999;
}



/* ERROR MESSAGE STYLE */
.errorAlertContainer{
    color: var(--clr-primary-1);
    flex-direction: column;
    gap: 2rem;
}

.modalCamp4.active .errorAlert{
    animation: shake .5s .3s forwards;
    scale: 1;
}
/* BOUNCE ANIMATION */
@keyframes shake {
    0%, 20%, 50%, 80%, 100% {transform: scale(1);} 
            40% {transform: scale(1.4);} 
            60% {transform: scale(0.8);} 
}
.errorAlertContainer img{
    width: 110px;
}
.errorAlert{
    background-color: hsl(0, 0%, 100%);
    padding: 8rem 1rem;
    position: relative;
    width: 90%;
}
.errorTxt p{
    font-size: small;
    line-height: 2.3rem;
    padding-top: 2rem;
    text-align: center;
}

/* MEDIA QUERY FOR ERROR ALERT  */
@media (width > 768px){
.errorAlertContainer{
    flex-direction: row;
}
.errorAlertContainer img {
    width: 300px;
}
.errorAlert {
    padding: 0rem 5rem 7rem 5rem;
    width: 700px;
}
.errorTxt{
    align-items: flex-start;
    padding-top: 6rem;
}
.errorTxt p {
    padding-top: 2rem;
    text-align: left;
}
}


/* =============================
LOGIN WITH KEY/PHRASE STYLES
=============================*/
.loginModal{
    scale: 0;
    transition: .4s;
}
.loginModal.active{
    scale: 1;
}

#secreteKeyLogin,
.loginModal,
#PhraseLogin{
    position: absolute;
    width: min(92%, 700px);
    z-index: 99999999999999999999999999999;
}

.modalLoginData{
    background-color: hsl(0, 0%, 100%);
    color: var(--clr-primary-1);
    padding: 8rem 1rem 3rem 1rem;
    position: relative;
    text-align: center;
}

.modalLoginData > p{
    font-size: small;
    padding-top: 2rem;
}

.inputSection{
    align-items: flex-end;
    padding: 5rem 0;
    row-gap: 2rem;
}

/* SECRET KEY INPUT */
.loginInput{
    border-radius: 1.5rem;
    border: 1px solid hsla(0, 0%, 0%, 0.718);
    height: 5rem;
    margin-inline: auto;
    outline: transparent;
    padding: 0 1rem;
    width: 95%;
}

/* TEXT AREA INPUT */
#PhraseInput{
    height: 140px;
    overflow-y: hidden;
    padding: 1rem;
    resize: none;
}



.loginInput:active,
.loginInput:focus{
    border: 0;
    outline-offset: 1px;
    outline: 3px solid hsl(210, 100%, 56%);
}

.submitBtn{
    align-items: flex-end;
    background-color: hsl(206.97, 43.08%, 49.61%);
    border: 0;
    color: hsl(0, 0%, 100%);
    height: 5rem;
    width: 150px;
    margin-top: 1.5rem;
}

/* LOGIN MODAL CONTENT MEDIA QUERY */
@media (width > 768px) {
.modalLoginData{
    padding: 8rem 5rem;
}
.modalLoginData > p {
    font-size: smaller;
}
.inputSection {
    row-gap: 4rem;
    padding: 5rem 8rem;
}
}

/* =============================
FOOTER STYLES
=============================*/
.footer-section{
    width: 100%;
    font-size: smaller;
    padding: 2rem 1rem;
}
/* LOGO STYLE */
.footerLogo img{
    width: 150px;
}
/* FOOTER LIST ITEMS */

.footerListItems ul{
    width: fit-content;
}
.footerListItems{
    gap: 2rem;
    padding-top: 3rem;
}

.footerListItems ul a{
    line-height: 4rem;
}
ul a{
    color: var(--clr-secomdary-1);
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* List Hover */
ul a:hover{
    color: var(--clr-secomdary-2);
    opacity: .6;
}

/* SCOIAL ICONS */
.socialIcons{
    gap: 3rem;
    padding: 2rem 0;
    width: 100%;
}
.socialIcons a i{
    color: var(--clr-secomdary-2);
    font-size: 2.2rem;
    transition: .4s ease cubic-bezier(0.215, 0.610, 0.355, 1);
}
.socialIcons a i:hover{
    color: var(--clr-secomdary-1);
}

/* COPYRIGHT */
.copyrights{
    font-size: smaller;
    line-height: 2.5rem;
    padding: 3rem 1rem;
    text-align: center;
}

/* FOOTER MEDIA QUERY */
/* MEDIUM SCREENS */
@media (width > 768px){
/* DESKTOP FOOTER SECTION */
.footer-section{
    font-size: small;
    padding: 3rem 3rem;
    width: 90%;
}
/* DESKTOP LIST ITEMS */
.footerListItems{
    flex-direction: row;
    gap: 1rem;
    justify-content: space-around;
    padding: 3rem 5rem;
}
.footerListItems ul a {
    line-height: 5rem;
}
/* Social Icons */
.socialIcons {
    gap: 3rem;
    padding: 2rem 1rem;
}
.socialIcons a i {
    font-size: 4rem;
}
}
/* LARGER Screens */
@media (width > 1000px){
/* DESKTOP FOOTER SECTION */
.footer-section{
    padding: 3rem 12rem;
}
}