@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap'); 

@font-face {
    src: url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap');
    font-family:'Roboto Mono';
    font-style: bold;
    font-weight: 400;
  }

  @font-face {
    src: url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
    font-family:'Roboto Mono';
    font-style: normal;
    font-weight: 200;
  }
  

@media (min-width: 1000px) {
    body {
        grid-template-columns: 10% 1fr !important;
    }
/* sidebar nav*/
    div#section.c1 {
        padding: 40px 12px 0px 12px;
    }
}

@media (max-width: 1000px) {

     /*content5*/
 
 div#content.s5 {
    grid-gap: 1em;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    display: grid;
    grid-template-columns: unset !important;
    grid-template-rows: 1fr auto !important;
    border: 0px !important;
}

#gif {
    right: 0% !important;
    overflow: visible !important;
    height: 50%;
    max-width: 100% !important;

}

#infostick {
    z-index: 0 !important;
    grid-gap: 1em !important;
    border-radius: 100px;
    position: unset !important;
    display: grid;
    grid-template-rows: auto auto;
    max-width: 100% !important;
}

main {
    margin: 0em !important;
}

.sidebar {
    margin: 0em 0em 0em 0.5em !important;
}


}

@media (max-width: 768px) {

     /*font*/


     #btn {
        font-size: 120%;
        line-height: 120%;
     }


    body {
        font-size: 80% !important;
    line-height: 18px !important;
    }
    
    h3 {
        min-width: 90%;
    
    text-align: left;
        padding: 12px !important;
        margin: 0px !important;
        font-size: 120% !important;
    }

    #p1 {
        width: 40%;
        : 60% !important;
        line-height: 10px !important
    }

    .c0 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #p1b {
        max-width: 100% !important ;
    }


    h4 {
        margin: 2px !important;
        font-size: 120% !important;
    }
    
    p {
        font-size: 120% !important;
        margin: 0px 4px 8px 4px !important;
    }
    
    #prj {
    
        margin: 2px !important;
    }

 /*sidebar nav*/


    #section {
        font-weight: 500;
        font-size: 80% !important;
        line-height: 14px !important;
    }

     /*content 1*/


    div#content.s1 {

        display: grid;
        grid-template-columns: 1fr 50% auto !important;
        grid-template-rows: 1fr auto !important;
    }

    div#cs1.c8 {
        grid-column: span 3 !important;
        padding: 20px 20px 38px 20px !important;
    }

/*content3*/

div#content.s3 {
    display: unset !important;
 }
 
 #social {
 justify-content: space-evenly !important;
 display: flex !important;
 align-items: center !important;
 padding: 0px !important;
 grid-gap: 0px !important;
 
 }
 
 div#lxonl.method {
     grid-template-columns: unset !important;
 }
 
 /*content4*/
 #p4 {
     margin: 32px 24px 24px 32px !important;
     font-size: 14px !important;
     line-height: 20px !important;
 }


 
 

}


@media (max-width: 560px) {

    /* drop-down btn*/
    main {
        margin: 0.5em !important;
        padding-bottom: 80px !important;
     }

    body {
        height: 100vh !important;
    }

    .btn-name {
        padding: 0px 0px 0px 6px !important;
        font-size: 14px !important;

    }

    .btn-options a {
        font-size: 14px !important;
    }

    .btn-dropdown {
        min-width: unset !important;
    }

 /* sidebar nav*/

    .sidebar {
        padding-bottom: 80px !important;
        z-index: 1 !important;
    }

    nav {
        max-width: 70% !important;
    }

    #section {
        padding: 12px 12px 0px 12px !important;
    }

    div#section.c2 {
        margin-top: 90px !important;
    }

    div#section.c3 {
         margin-top: 150px !important;
    }

    div#section.c4 {
        margin-top: 240px !important;
    }

    div#section.c5 {
        margin-top: 300px !important;
    }

    footer {
        grid-gap: 4px;
        font-size: 12px !important;
        line-height: 16px !important;
        max-width: 70% !important;
    }
a#idfoot {
    display: grid;
    padding: 8px 0px;
 
}

 /*content 1*/


    div#content.s1 {
        display: grid;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }

    div#cs1.c8 {
    grid-column: unset !important;
    grid-row: unset !important;
    padding: 60px 20px 38px 20px !important;
    }

/*content2*/

div#content.s2 {
    grid-template-columns: none !important;
    border: 0px;
    padding: 2em;
    grid-gap: 2em;
}

#socialall {
    padding: unset !important;
}

#content2{
    padding: unset !important;
}

#social {
justify-content: space-evenly !important;
display: flex !important;
align-items: center !important;
padding: 0px !important;
grid-gap: 0px !important;
}

#p5{
    font-size: 14px !important;
}

#p6{
    font-size: 14px !important;
}


.infostyle {
    width: unset !important;
    
}

}

@media (max-width: 300px) {

    nav {
        max-width: 60% !important;
    }

    footer {
        font-size: 12px !important;
        line-height: 14px !important;
        max-width: 60% !important;
    }

    h3 {
        font-size: 120% !important;
    }

    .infostyle {
        grid-gap: unset !important;
        display: grid !important;
    grid-template-rows: auto 60px !important;
    justify-self: unset !important;
    grid-template-columns: unset !important;
    }

    #section {
        font-size: 70% !important;
    }

}









img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Main Css here*/


html {
    user-select: none;
    font-family: 'Roboto Mono', monospace;
    height: 100vh;
    width: 100%;
    margin: 0px;
    overflow: hidden;
  }

body {
    margin: 0px;
    font-size: 14px;
    line-height: 20px;
    height:100vh;
    width: 100%;

    box-sizing: border-box;
    overflow-x: hidden;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 20% 1fr;
    grid-template-rows: 1fr;
    
    overflow-y: scroll;
   
}


.sidebar {
    z-index: 1;
    margin: 0em 0em 0em 1em;
    border: 1px #00bef200;
    position: sticky;
    grid-row: span 1;
   
    display: grid; 
    grid-template-rows: 50px auto 100px ;
    grid-gap: 8px;
}



main {
    
    overflow-x: hidden;
    border-radius: 100px;
    overflow-y: scroll;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    background-color: unset;

}

html ::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

body ::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

main ::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

header {
    background-color: unset;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
}

nav {
    background-color: unset;
    position: relative;
    overflow: hidden;
    text-align: center;
    z-index: -1;
    max-width: 92%;
    border-radius: 0px 0px 120px 120px;
}

footer {
  
    width: 100%;
    height: 80%;
display: grid;

z-index: 1;
font-weight: 200;
    font-style: bold;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    align-items: center;
    background-color: unset;

}

a#idfoot{
    
    filter: drop-shadow(2px 2px 2px #fa73ff21);
    text-align: center;
    box-shadow: 2px 2px 4px 0px  #fae5fb2c;
display: flex;
justify-content: center;
  text-align: center;
    align-items: center;
    transition: all .2s ease;
    padding: 8px;
    margin: 0px;
    color: rgb(255, 0, 204);
    background-color: rgba(255, 255, 255, 0.926);
    text-decoration: none;
    border-radius: 20px;
}
a#idfoot:hover {
    filter: drop-shadow(2px 2px 2px #fa73ff00) !important;
    align-items: center;
    background-color: #fffdbc;
    color: rgb(255, 0, 204);
    padding: 9px;

}

/* Sidebar nav*/

a{
    color: rgb(255, 0, 204);
}

#section {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border-radius: 120px;
    padding: 40px 14px 24px 14px;
}

div#section.c1 {
    background-color: #f7f370;
    position: absolute;
    height: 20%;
    width: -webkit-fill-available;
    z-index: -5;
}

div#section.c2 {
    background-color: #f7fdffe5;
    position: absolute;
    height: 20%;
    width: -webkit-fill-available;
    z-index: -4;
    margin-top: 120px;
}

div#section.c3 {
    background-color: #9cfe2ce2;
    position: absolute;
    height: 20%;
    width: -webkit-fill-available;
    z-index: -3;
    margin-top: 240px;
}

div#section.c4 {
    background-color: #ffffffee;
    position: absolute;
    height: 20%;
    width: -webkit-fill-available;
    z-index: -2;
    margin-top: 360px;
}

div#section.c5 {
    background-color:#ffe2f8;
    position: absolute;
    height: 100%;
    width: -webkit-fill-available;
    z-index: -1;
    margin-top: 480px;
}






/* Content section*/


#content {
   /* border: solid 1px #c715931f;*/
    position: relative;
    height: 100%;
    background-color: white;
    border-radius: 100px;
}

/* Image Setting*/

#img1 {
    max-width: 100%;
    justify-self: center;
}

/* Content 1*/

div#content.s1 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 1fr ;
}

/* Content chu btn*/

div#cs1.c8 {
    
    grid-row: span 2;
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 1fr auto;
    padding: 40px 0px 38px 60px;
}

#btn {
    box-shadow: 2px 2px 4px 0px  #f66eff47;
    filter: drop-shadow(2px 2px 2px #fa73ff5c);
    position: relative;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    text-align: center;
    
}

.btn1{
    background-color: #fffdb0;
    color: #fc22c9;
    width: 100%;
    max-width: 260px;
    min-width: 20px;
    height: 100%;
    min-height: 24px;
    padding: 4px 18px; 
    transition: all ease 0.5s;
    filter: drop-shadow(2px 2px 6px #fa73ff5c);
}
@media (hover: hover) and (pointer: fine) {
.btn1:hover {
    background-color: #fbf439;
    color: #fc22c9;
    padding: 5px 18px; 
  
}

#btn:hover {
    transition: all .3s ease;
    border-radius: 60px;
    filter: drop-shadow(2px 2px 6px #fa73ff00) !important;
    box-shadow: 2px 2px 4px 0px  #f56eff00 !important;
    cursor: pointer;
}

#btn:active {
   
    border-color: #2ade33dd;
    box-shadow: 2px 3px 0px 0px #ff19c91f;
    transition: all ease-in-out 0.05s;
}
}

/* Content box hinh*/

.c0 {
    text-align: center;
    justify-self: center;
    display: grid;
    grid-template-rows: 1fr auto;
    max-width: 200px;
    border: solid 1px #c715931f;
    border-radius: 100px;
}

#p1 {
    justify-self: center;
    max-width: 60%;
    margin: 0px 0px 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 12px !important;
    line-height: 14px !important;
}

#p1b {
  
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 160px;
    border: solid 1px #f7f37096;
    border-radius: 100px;
    margin: 16px 16px 10px 16px;

}

/* Text Setting*/

h4 {
    font-weight: 400 !important;
    margin: 10px 0px;
}

p {
    font-weight: 300;
    margin: 0px 10px 20px 10px;
}




#prj {

    margin: 8px;
}


/* Content 2*/

div#content.s2 {
    display: grid;
    grid-template-columns: auto 1fr;
    /* border: solid 1px #4d00f22b; */
}


#img7{
    justify-self: center;
    max-width: 40px;
    
    height: auto !important;
}

#img2 {
    height: auto !important;
    height: fit-content;
    justify-self: center;
    max-width: 40px;
    

}

.btn2{
    max-height: 48px;
    height: 100%;
    max-width: 260px;
    min-width: 20px;
    min-height: 24px;
    padding: 0px 2em; 
    margin: 8px;
 
    background-color: #ffe2f8;
    color: #00db52;
   
    transition: all ease 0.5s;
    filter: drop-shadow(2px 2px 2px #73ff8a5c) ;
}



.btn2:hover {
    background-color: #fc22c9;
    color: #9cfe2c;
    padding: 1px 2em; 
}

#social {
    padding: 20px;
    display: grid;
    grid-gap: 24px;
    grid-template-columns: auto auto auto;
    grid-template-rows: 60px 60px ;
}

#so3 {
    grid-column: span 2;
}

#wrapcenter {
    display: flex;
    justify-content: center;
    align-items: center;


}
#socialall {
    gap: 1em;
    padding: 40px 12px 60px 40px;
    display: grid;
        grid-template-rows: 1fr auto;
}

#content2{
    padding: 40px 40px 38px 0px;
}

/* Content 3*/

#lxonl {
    display: grid;

}

div#content.s3 {
    background: unset;
    display: grid;
    grid-template-columns: 20% auto;
}

div#gathertown.g1 {
    background: white;
    border: solid 1px #9df77096;
    padding: 1em;
    border-radius: 100px;
    display: grid;
}

div#gathertown.g2 {
    background: white;
   /* border: solid 1px #9df77096; */
    padding: 1em;
    border-radius: 100px;
    display: grid;
    grid-gap: 10px;
}

div#lxonl.method {
   /* border: solid 1px #f200942b; */
    padding: 1em;
    border-radius: 100px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 1em;
    background: rgba(255, 255, 255, 0.91);
}

.c9 {
    text-align: center;
    justify-self: center;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 100px;
    grid-gap: 12px;
}

#p2 {
    font-weight: 400;
    margin: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
    font-size: 12px !important;
    line-height: 14px !important;
}

#p3 {
    margin: 1em 1em 0em 1em;
    display: flex;
    justify-content: center;
    font-size: 10px !important;
    line-height: 14px !important;
}

#p2b {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #9df77096;
    border-radius: 100px;
    background: white;
}

.btn3{
    margin: 0em 1em 0em 1em;
    width: 100%;
    max-width: 260px;
    min-width: 20px;
    background-color: #fffdb0;
    color: #fc22c9;
    min-height: 24px;
    padding: 4px 18px; 
    grid-column: span 2;
   
    transition: all ease 0.5s;
    padding: 8px 2px 8px 2px;
    
}


.btn3:hover {
    background-color: #fbf439;
    color: #fc22c9;
    padding: 9px 2px 9px 2px;
}

.btn4{
    max-height: 100%;
    max-width: 260px;
    min-width: 20px;
    min-height: 24px;
    padding: 8px 18px;
    margin: 10px;
    background-color: #ffe2f8;
    color: #00db52;
    transition: all ease 0.5s;
}



.btn4:hover {
    background-color: #fc22c9;
    color: #9cfe2c;
    padding: 9px 18px;
}



a#p2b.border {
    border: solid 1px #f200942b;
    
}


/* Content 4*/
div#content.s4 {
    
    text-align: center;
    display: grid;
    grid-template-rows: 1fr auto;
}

#video1{
    border-radius: 100px;
    width: 100%;
  height: 100%;
  object-fit: cover;
}

#videocon {
    height: 100%;
    border-radius: 100px;
    text-align: center;
        width: 100%;
        overflow: hidden;
        border-radius: 100px;
}

video {
    border-radius: 100px;
    height: 100%;
    width: 100%;
    max-width: 100%;
  }

#p4{
    margin: 24px 6em 24px 6em;
    display: flex;
    justify-content: center;
    font-size: 14px ;
    line-height: 16px ;
    font-weight: 400;

}

/* Content 5*/

div#content.s5 {
    height: 100vh;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    display: grid;
    gap: 1em;
    grid-template-columns: auto 1fr;

}


#gif {
    right: 5%;
    position: relative;
        transform: scale(0.9);
        overflow: visible !important;
        height: 100%;
        max-width: 100% !important;
    justify-self: center;
    z-index: 0;
    transition: all ease-in-out .3s;
}

#gif:hover {
    
    transform: scale(1.02);
z-index: 2;
}

.infostyle {
    grid-gap: 1em ;
  
    display: grid;
    grid-template-columns: auto auto;
   
    border-radius: 100px;


}

#p5{
    display: flex;
    border-radius: 100px;
    margin: 0px !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0em 1em;
    font-size: 16px;
    background-color: #ffffff;
    
}

#infostick {
    background-color: white;
padding: 2em;
grid-gap: 1em;
z-index: 1;
    border-radius: 100px;
    position: absolute;
    display: grid;
    grid-template-rows: auto auto;
    bottom: 40px;
    right: 5%;
    max-width: 300px;
    transition: all ease 0.5s;
}
@media (hover: hover) and (pointer: fine) {
#infostick:hover {
    z-index: 3;
    right: 6%;
    bottom: 44px;
}
}
#p6 {
   
 
padding: 0.5em;
    row-gap: 4px;
    display: grid;
    border-radius: 100px;
    margin: 0px !important;
   

  
}

.infostyle h3 {
    font-size: 14px;
}

 span#p6 {
    align-items: center;
    padding: 0px !important;
    border: solid 0px #f200942b;
 }

#info {

    border-radius: 120px;

    display: grid;
   
}

.btn5{
    font-weight: bold !important;
    margin: 0em 1em 0em 1em;
    width: 100%;
    max-width: 260px;
    min-width: 20px;
    background-color: #fffdb0;
    color: #fc22c9;
    min-height: 24px;
    grid-column: span 2;
    padding: 12px 2px 12px 2px;
    transition: all ease 0.5s;
    
}



.btn5:hover {
    background-color: #fbf439;
    color: #fc22c9;
    padding: 8px 18px; 
}


/* backgroundg*/

#center {
    top: 0;
    height: 100%;
    width: 100%;
  padding: 0;
  position: absolute;
  z-index: -9;
  margin: 0;
  place-items: center;
}

#animate {
    place-items: center;
    background: linear-gradient(to bottom right,#ff9ddb 0%, #ff9ddb 7.41%, #efffed 13.72%, #efffed 25.23%,#ff9ddb 34.56%, #ff9ddb 40.76%, #ff9ddb 30%) bottom right, linear-gradient(to bottom left, #ff9ddb 0%, #ff9ddb 7.41%, #efffed 13.72%, #efffed 25.23%, #ff9ddb 34.56%, #bbf774 40.76%, #baf774 30%) bottom left, linear-gradient(to top left, #ff9ddb 0%, #ff9ddb 7.41%, #efffed 13.72%, #efffed 25.23%, #a7fd4e 34.56%, #a7fd4e 40.76%, #ff9ddb 30%) top left, linear-gradient(to top right, #ff9ddb 0%, #bbf774 7.41%, #efffed 13.72%, #efffed 25.23%, #bbf774 34.56%, #a7fd4e 40.76%, #baf774 30%) top right;
   background-size:50% 50%;
 border-radius: 20px;
   background-repeat:no-repeat;
   height: 100%;
   max-height: 100%;
   width: 100%;
    max-width: 100%;
    filter: blur(50px);}


    /* btn dropdown*/

    .btn-dropdown {
        display: flex ;
    align-items: center;
    justify-content: center;
    margin-right: 12px ;
    padding: 0px ;
    position: relative ;
    border-radius: 60px ;
    min-width: 100%;
    width: 100%;

    }

    .btn-icon {
        justify-content: space-between;
        display: flex;
        border-radius: 60px;
        background-color: white;
        width: 100% ;
        box-shadow: 2px 2px 0px 0px #fcb1ea25;
        width: 100%;
max-height: 30px;
    }

    .btn-name {
        font-size: 14px ;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-style: normal;
        line-height: 24px;
        float: left;
        color: #E565A6;
        padding: 8px 4px ;
    }

    .icon-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 24px;
        width: 24px;
        margin: 4px;
        border-radius: 60px ;
        padding: 0px ;
    }

    .btn-options {
        transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
  transform: translateY(-2px);
  pointer-events: none;
        opacity: 0;
        position: absolute;
        margin-top: 100px;
        background-color: rgba(255, 255, 255, 0) ;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: none;
        border-radius: 24px;
        width: 100% !important;
    }

    .btn-options a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: white;
       
        margin-bottom: 2px;
        font-style: normal;
        font-size: 14px ;
        line-height: 16px;
        color: #E565A6;
        border-radius: 24px;
        height: 30px;
        text-decoration: none;
    }

    .icon{
        align-self: center;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid #E565A6;
    }

    .btn-dropdown > .btn-icon:focus,
.btn-icon:hover{
    border-radius: 60px;
   outline: 1px solid #fcff4b91;
    box-shadow: 2px 2px 0px 0px #b0f9c04c;
    cursor: pointer;
}

.btn-icon:focus{
  
    box-shadow: 2px 2px 0px 0px #fcb1ea5c;
    cursor: pointer;
}

.btn-icon:hover > .icon-bg {
    background-color: #fff309e2;

    cursor: pointer;
}

  /* logo*/

#logoimg:hover {
    border-radius: 60px;
    background-color: #9cfe2ce2;
    cursor: pointer;
}

 /* language*/

#nn:hover { 
background-color: #fff309e2;
cursor: pointer;}

#nn:active {
    
    background-color: #E565A6;
}

.btn-icon:focus + .btn-options {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
}