@font-face {
  font-family: "Pokemon Classic";
  src: url("Pokemon Classic.ttf") format("truetype");
  font-weight: bolder;
  font-style: normal;
}

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:"Pokemon Classic", sans-serif;
    font-weight:bolder;
}


#wrapper {
    background-color:black;
    
}

.page {
    position:absolute;
}


html, body{
    height:100%;
    margin:0;
    background-color:rgb(0, 0, 0);
    cursor:none;
}


.screenone {
    width: 100vw;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    background: url("Images/GradientIntro.jpg");
    background-size:cover;
    opacity:1;
    visibility:visible;


}


.screenone.hide, .screentwo.hide ,.screenthree.hide ,.abt__me.hide, .profile.hide ,.project1.hide, .project2.hide, .project3.hide, .project4.hide, .project5.hide, .project6.hide{
    opacity:0;
    z-index:0;
    visibility:hidden;
    transition:opacity 1s ease, visibility 1s 0s;
}

.screenone.show, .screentwo.show ,.screenthree.show ,.abt__me.show , .profile.show, .project1.show, .project2.show, .project3.show, .project4.show, .project5.show, .project6.show {
    opacity:1;
    z-index:1;
    visibility:visible;
    transition:opacity 1s ease 1s, visibility 1s 1s;
}


.intro{
    display:flex;
    flex-direction:column;
    justify-content: center;
    border:transparent;
    align-items: center;
    gap:12px;
   
}


.intro img {
    border:transparent;
    display:block;
    max-width:(70vw, 800px);
    height:auto;
    max-height: 60svh;
}


.intro h2 {
    margin-top:0;
    font-weight:bold;
    color:brown;
    background-color:transparent;
    text-align:center;
    font-size:30px;
}


.screentwo {
    display:flex;
    background-color:black;
    height:100vh;
    width:100%;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 10px;
    align-items:center;
    opacity:0;
    visibility: hidden;
}


.dialogue {
    height:35vh;
    width: 100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    position:relative;
    background-color:transparent;


}


.dialogue img {
    width:100%;
    height:100%;
}


.words {
    inset:17% 2%;
    line-height: 1.75;
    position:absolute;
    color:white;
    background-color:transparent;
    justify-content:flex-start;
    font-size: clamp(14px, 1.5cqw, 30px);
}


.typevalue {
    display:none;
}


.screenthree {
    width: 100%;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    height:100vh;
    opacity:0;
    visibility: hidden;
    padding:0 10px;
}


.outter__suitcase {
    height:65%;
    width:50%;


    display:flex;
    position:relative;
    justify-content:center;
    align-items:center;
 
}


#sc {
    height: 100%;
    width:80%;
}


.triangle__selector__down {
    position:absolute;
    top:54%;
    left:42%;
    height:0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid rgb(208, 0, 0);
   
}


.triangle__selector__right {
    position:absolute;
    top:45.75%;
    right:5%;
    height:0;
    width:0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 70px solid rgb(126, 0, 0);
    visibility:visible;
    z-index:1;
}


.triangle__selector__left {
    position:absolute;
    top:45.75%;
    left:5%;
    height:0;
    width:0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 70px solid rgb(126, 0, 0);
    visibility:hidden;
    z-index:1;
}

.abt__me  {
    display:flex;
    height:100vh;
    width:100vw;
    justify-content:flex-start;
    align-items:center;
    opacity:0;
    visibility:hidden;
    background: repeating-linear-gradient(
        to bottom, 
        rgb(94, 121, 69) 0,
        rgb(94, 121, 69) .75%,
        rgb(111, 133, 90) .75%,
        rgb(111, 133, 90) 1.5%
    );
    background-size:cover;
    flex-direction:column;
    gap:15px;
    padding: 5px 0;
}


.proj__holder {
    flex:1;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(3,auto);
    gap:1%;
    padding: 1%;
    width:100%;
    height:100%;
   
}


.proj__box {
    height:95%;
    width:100%;
}


.pbox {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform:scale(1);
    transition: filter .2s ease, transform .2s ease;
}


.pbox.selected {
    filter:
    drop-shadow(0 0 20px rgb(4, 134, 255))
    drop-shadow(0 0 40px rgba(4, 134, 255, 0.808));
  transform: scale(1.01);
}


.abt__me__heading {
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    width:100%;
    height:9%;
}


.abt__me h2 {
    background-image:linear-gradient(rgb(165, 165, 165),white,rgb(165, 165, 165));
    border-radius: 15px;
    border:3px solid rgb(82, 82, 82);
    width:70%;
    height:100%;
    padding:10px 15px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}


.project1, .project2, .project3, .project4, .project5, .project6 {
    display:flex;
    height: 100vh;
    width:100%;
    justify-content:flex-start;
    align-items:flex-start;
    background-color:rgba(241, 255, 230, 0.926);
    flex-direction:column;
    opacity:0;
    visibility:hidden;

   
}


.project__heading{
    display:flex;
    background-color:blue;
    color:white;
    height:10%;
    width:100%;
    font-size:3em;
    text-align:center;
    padding: 0 30px;


}


.project__body {
    height:90%;
    width:100%;
    display:flex;
    justify-content:flex-start;
}


.left__half {
    height: 100%;
    width: 45%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:20px;


}


.name {
    margin-top:2em;
    border-radius:20px;
    height:15%;
    width:90%;
    background-image:linear-gradient(to bottom, rgb(255, 253, 112) 0%,rgb(255, 253, 112) 50%, white 50%, white 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding-left:2.5%;

   


}


.tophalfbox{
    display:flex;
    width:100%;
    height:100%;
    justify-content:flex-start;
    gap: 12px;
}


.name img {
    height:100%;
    width: 8%;
   
}


.name h2 {
    height:100%;
    width:80%;
    display:flex;
    align-items:center;
   
}


.icon__container{
    border-radius:20px;
    height:55%;
    width:65%;
    background: repeating-linear-gradient(
    to bottom,
    rgb(246,255,239) 0 4px,
    rgb(224, 224, 255) 4px 8px
);
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 8px;
    gap: 20px;


}


.inner__icon__container {
    border-radius:20px;
    height:80%;
    width:80%;
    background: repeating-linear-gradient(
    to bottom,
    rgb(246,255,239) 0 4px,
    rgb(201, 201, 255) 4px 8px
);    
    display:flex;
    align-items:center;
    justify-content:center;


}


#FAVICON {
    width:80%;
    height:90%;
}


.bottom__box{
    height:23%;
    width:100%;
    background:linear-gradient(to bottom,  rgb(255, 253, 112) 0%,rgb(255, 253, 112) 50%, white 50%, white 100%);
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:flex-start;
    padding-left:1.5%;
}


.bottom__box h2{
    height:100%;
    width:80%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}


.right__half {
    height:100%;
    width:55%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-direction:column;
    position:relative;
}


.stat__box {
    background: repeating-linear-gradient(
        to bottom,
        rgb(65, 175, 65) 0%,
        rgb(65, 175, 65) 10%,
        rgb(138, 228, 142) 10%,
        rgb(138, 228, 142) 20%
    );    
    height: 92%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    position:absolute;
    display: flex;
    z-index:0;
    border:2px solid black;
    
}


.stat__names {
    height: 100%;
    width: 45%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 0;
    font-size: 2em;
    color: white;
}


.stat__names ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}


.stat__names li {
    display: flex;
    align-items: center;
    height: 10%; 
    width: 100%;
    padding-left: 10%;
}


.stat__numbers {
    background: repeating-linear-gradient(
        to bottom,
        rgb(247, 247, 180) 0%,
        rgb(247, 247, 180) 20%,
        white 20%,
        white 40%
    );
    height: 50%;
    width: 90%;
    display: flex;
    color: rgb(0, 0, 0);
    justify-content: center;
    border-radius: 20px;
    position:absolute;
    top:10%;
    
}


.stat__numbers ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    
}


.item {
    -webkit-text-stroke: .75px rgb(87, 87, 87);
    height: 20%; 
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size:1.75em;
}


.username {
    color: rgb(65, 65, 255);
    -webkit-text-stroke: 1px rgb(170, 170, 252);
}


.type {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction:row;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 2.5%;
}


.js, .css , .java{
    height: 90%;
    width: 45%;
    border-radius: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-text-stroke:0;
    
}


.js {
    background-color: rgb(194, 46, 40);
    border-top:4px solid rgb(236, 71, 65);
    
}


.css {
    background-color: rgb(183, 183, 206);
    border-top:4px solid rgb(209, 209, 224);
}


.java {
    background-color: rgb(238, 108, 48);
    border-top:4px solid rgb(255, 126, 66);
}


.stat__numbers__box {
    width:55%;
    height:100%;
    position:relative;
}


.exp__bar {
    height:4%;
    width:90%;
    border:2px solid black;
    position:absolute;
    top:73%;
    border-radius:20px;
}


.bar0 {
    background:linear-gradient(to right, rgb(132, 221, 206) 0%, rgb(132, 221, 206) 80%, white 80%, white 100%);
}


.bar1 {
    background:linear-gradient(to right, rgb(132, 221, 206) 0%, rgb(132, 221, 206) 60%, white 60%, white 100%);
}


.bar2 {
    background:linear-gradient(to right, rgb(132, 221, 206) 0%, rgb(132, 221, 206) 30%, white 30%, white 100%);
}

.navbar {
    height:8.25%;
    width:100%;
    z-index:2;
    display:flex;
    justify-content:flex-start;
    padding-left:4%;
    position:absolute;
    top:0;
    left:0;
    
}


.navbar__main {
    height:100%;
    width:10%;
    background-color:rgb(65, 175, 65);
    border:2px solid black;
    border-bottom:none;
    border-radius: 5px 5px 0 0;
    z-index:1;
    border-right:none;
}


.navbar__skills{
    height:100%;
    width:10%;
    background-color:rgb(255, 103, 103);
    border:2px solid black;
    border-bottom:2px solid black;
    border-radius:5px 5px 0 0;
    

}


.skill__box {
    background: repeating-linear-gradient(
        to bottom,
        rgb(255, 103, 103) 0%,
        rgb(255, 103, 103) 10%,
        rgb(255, 165, 165) 10%,
        rgb(255, 165, 165) 20%
    );    
    height: 92%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    position:absolute;
    display: flex;
    z-index:1;
    border:2px solid black;
    visibility: hidden;
    justify-content:center;
    align-items:flex-start;
}


.skills {
    height:100%;
    width:80%;
    position:relative;
    left:8%;
    
}


.skill__names {
    height:100%;
    width:100%;
}


.skill1, .skill2, .skill3, .skill4 {
    height:10%;
    width:100%;
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    color:white;
    font-size:1.5em;
    gap:3%;
}


.skill2{ 
    top:10%;
}


.skill3{
    top:20%;
}


.skill4 {
    top:30%;
}

.js__skill, .css__skill, .html__skill, .java__skill, .normal__skill {
    display:flex;
    align-items:center;
    justify-content:center;
    height:90%;
    width:25%;
    border-radius:10px;
    position:relative;
    font-size:.9em;
}


.js__skill {
    background-color: rgb(194, 46, 40);
    border-top:4px solid rgb(236, 71, 65);
}


.css__skill {
    background-color: rgb(183, 183, 206);
    border-top:4px solid rgb(209, 209, 224);
}


.html__skill { 
    background-color: rgb(111, 53, 252);
    border-top:4px solid rgb(146, 103, 255);
}


.java__skill {
    background-color: rgb(238, 108, 48);
    border-top:4px solid rgb(255, 126, 66);

}


.normal__skill {
    background-color: rgb(206, 206, 190);
    border-top:4px solid rgb(220, 220, 192);
}


.no__skill {
    display:flex;
    align-items:center;
    justify-content:center;
    height:90%;
    width:25%;
    border-radius:10px;
    position:relative;
}


.pp {
    height:100%;
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    position:absolute;
    top:0;
    

}


.pp1, .pp2, .pp3, .pp4{
    height:9%;
    width:40%;
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    color:rgb(0, 0, 0);
    font-size:1.5em;
    gap:3%;
    background-color:white;
    border-radius:10px;
    gap:20%;
}


.pp1 {
    top:10.5%;
}


.pp2 {
    top:30.5%;
}


.pp3 {
    top:50.5%;
}


.pp4 {
    top:70.5%;
}


.pos {
    height:7%;
    width:25%;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    border:2px solid rgb(255, 103, 103);
    position:absolute;
    left:0;
}


.pos1 {
    top:11.5%;
}


.pos2 {
    top:31.5%;
}


.pos3  {
    top: 51.5%;
}


.pos4 {
    top:71.5%;
}


.pos > div {
    background:transparent;
    border:1px solid rgb(255, 103, 103);
}


.pos1 > div:nth-child(1) {
    background-color:rgb(255, 103, 103);
}


.pos2 > div:nth-child(2) {
    background-color:rgb(255, 103, 103);
}


.pos3 > div:nth-child(3) {
    background-color:rgb(255, 103, 103);
}


.pos4 > div:nth-child(4) {
    background-color:rgb(255, 103, 103);
}


.profile {
    opacity:0;
    visibility:hidden;
    display:flex;
    height:100%;
    width:100%;
    justify-content:flex-start;
    align-items:center;
    flex-direction:column;
    background-color:rgb(254, 255, 186);
    position:absolute;
}



.profile__main {
    top:2%;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    height:90%;
    width:95%;
    position:relative;
    background-color:rgb(255, 103, 103);
    border-radius:20px;
    border:3px solid rgb(0, 0, 0);
    padding:0 1%;
    visibility:visible;
}

.profile__stats {
    display:flex;
    flex-direction:column;
    height:100%;
    width:98%;
    justify-content:flex-start;
    align-items:flex-start;
    position:absolute;
}

.line1, .line2, .line3, .line4, .line5, .line6, .line7{
    position:absolute;
    height:9%;
    width:60%;
    background-color:rgba(255,255,255,.4);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 1%;
    font-size:1.5em;
    -webkit-text-stroke: 1px rgb(88, 88, 88);
}

.line1 {
    top:10%;
}


.line2 {
    top:20%;
}


.line3 {
    top:34%;
}


.line4 {
    top:48%;
}

.line5 {
    top:62%;
}
 

.line6  {
    width:100%;
    top:78%;
}


.line7 {
    width:100%;
    top:88%;
}

.trait {
    left:2%;
    display:flex;
    justify-content:flex-end;
    position:absolute;
}


.value {
    right:2%;
    display:flex;
    justify-content:flex-end;
    position:absolute;
}
.character {
    height:70%;
    width:40%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    left:60%;
    top:11%;
}

.characterimg{ 
    background-color:rgba(255,255,255,.4);
    height:70%;
    width:50%;
    border-radius:20px;
    border-right:3px solid rgb(255, 50, 50);
    border-bottom:3px solid rgb(255, 50, 50);
    border-top:3px solid rgb(214, 0, 0);
}


.characterimg img {
    height:50%;
}


.profile__stats h1 {
    width:60%;
    text-align:center;
    padding-top:1%;
    color:white;
}


.gameboy__button {
    height:6%;
    width:3%;
    background-color:rgb(159, 160, 85);
    position:absolute;
    top:93%;
    display:flex;
    border-radius:5px;
    justify-content:center;
    align-items:flex-end;
}

.innerbutton {
    height:80%;
    width:80%;
    background-color: rgb(209, 211, 115);
    margin-bottom:7%;
    border-radius:2px;
}

.secondary__page {
    top:2%;
    height:90%;
    width:95%;
    display:flex;
    flex-direction:column;
    place-items:center, flex-start;
    position:absolute;
    border-radius:20px;
    border:4px solid rgb(0, 0, 0);
    visibility:hidden;
    background-color: rgb(209, 211, 115);
}


.achievements {
    height:89%;
    width:100%;
    display:grid;
    place-items:center;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows:repeat(2,1fr);
    border-radius:20px;
}


.achieve1 {
    height:70%;
    width:80%;
    display:flex;
    background-color:rgb(182, 182, 182);
    align-items:center;
    justify-content:center;
    border-radius:20px;
    border:3px rgb(102, 102, 102) solid;
}


.achieve1 > img {
    width:50%;
    height:80%;
}

.secondary__page h2 {
    margin-top:1%;
    height:10%;
    width:100%;
    display:flex;
    padding-left:3%;
    align-items:center;
    font-size:3em;
    color:rgb(56, 56, 56);
}

.achievements > div:nth-child(1) {
    background-color:rgb(255, 222, 161);
    border:rgb(143, 76, 0) 3px solid;
}


.achievements > div:nth-child(2) {
    background-color:rgb(200, 213, 255);
    border:rgb(39, 49, 109) 3px solid;
}


.achievements > div:nth-child(3) {
    background-color:rgb(193, 255, 191);
    border:rgb(32, 94, 40) 3px solid;
}


.achievements > div:nth-child(4) {
    background-color:rgb(168, 255, 243);
    border:rgb(24, 83, 80) 3px solid;
}

.achievements > div:nth-child(5) {
    background-color:rgb(255, 196, 196);
    border:rgb(77, 0, 0) 3px solid;
}


.achievements > div:nth-child(6) {
    background-color:rgb(211, 211, 211);
    border:rgb(0, 0, 0) 3px solid;
}

.third__page {
    top:2%;
    height:90%;
    width:95%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    position:absolute;
    border-radius:20px;
    border:4px solid rgb(0, 0, 0);
    visibility:hidden;
        background-color:rgb(255, 103, 103);
    font-size:1.75em;
    color:rgb(255, 255, 255);
}


.contacts {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    height:100%;
    width:100%;
    gap:2.5%;
}

.social {
    height:22%;
    width:97%;
    background-color:rgb(171, 253, 145);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}


.cbox {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform:scale(1);
    transition: filter .2s ease, transform .2s ease;
}

.instagram.cbox.selected {
    filter:
    drop-shadow(0 0 20px rgb(255, 36, 36))
    drop-shadow(0 0 40px rgba(255, 108, 108, 0.808));
  transform: scale(1.02);
}


.github.cbox.selected {
    filter:
    drop-shadow(0 0 20px rgb(90, 90, 90))
    drop-shadow(0 0 40px rgba(122, 122, 122, 0.808));
  transform: scale(1.02);
}


.spotify.cbox.selected {
    filter:
    drop-shadow(0 0 20px rgb(0, 78, 0))
    drop-shadow(0 0 40px rgba(146, 255, 152, 0.808));
  transform: scale(1.02);
}


.linkedin.cbox.selected {
    filter:
    drop-shadow(0 0 20px rgb(72, 115, 255))
    drop-shadow(0 0 40px rgba(132, 173, 248, 0.808));
  transform: scale(1.02);
}


.instagram {
    background-color:rgb(255, 142, 161);
    border:4px solid rgb(255, 0, 0);
}

.github {
    background-color:rgb(92, 92, 92);
    border:4px solid black;
}


.spotify {
    background-color:rgb(89, 179, 89);
    border: 4px solid green;
}


.linkedin {
    background-color:rgb(100, 100, 255);
    border:4px solid blue;
}