@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

@font-face {
    font-family: 'walt-disney';
    src: url(./file/New\ Walt\ Disney.ttf);
}
@font-face {
  font-family: 'Akkurat';
  src: url(./file/FontsFree-Net-Akkurat.ttf);
}
:root{
    --primary : #202020;
    --yellow_s : #ffff00;
    --secondary : #707070;
    --primary_font : "Montserrat";
    --pri_grad : radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
    --font-sans: "Rubik", sans-serif;
    --font-serif: "Cardo", serif;
  }
html{

    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    font-size: 10px;
    font-family: 'Montserrat', sans-serif ;
    scroll-behavior: smooth; 
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.stars {
  background: transparent;
}

#stars1, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

section {
    position: relative;
    z-index: 1;
}

#stars1 {
  width: 1px;
  height: 1px;
  animation: animStar 50s linear infinite;
}
#stars1:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1369px 923px #FFF , 739px 1349px #FFF , 1339px 27px #FFF , 1966px 1972px #FFF , 986px 1315px #FFF , 1181px 681px #FFF , 1809px 862px #FFF , 913px 1662px #FFF , 270px 1017px #FFF , 1377px 78px #FFF , 858px 724px #FFF , 787px 645px #FFF , 1357px 747px #FFF , 1224px 826px #FFF , 1742px 1960px #FFF , 725px 176px #FFF , 1237px 806px #FFF , 1604px 118px #FFF , 798px 1369px #FFF , 761px 71px #FFF , 909px 360px #FFF , 1824px 946px #FFF , 1323px 124px #FFF , 1752px 1719px #FFF , 761px 734px #FFF , 976px 932px #FFF , 1124px 1323px #FFF , 1505px 1271px #FFF , 761px 1136px #FFF , 1078px 605px #FFF , 45px 677px #FFF , 848px 1545px #FFF , 225px 1198px #FFF , 618px 1113px #FFF , 1198px 1671px #FFF , 182px 1972px #FFF , 1187px 1529px #FFF , 1699px 332px #FFF , 1980px 234px #FFF , 1550px 1143px #FFF , 226px 864px #FFF , 1277px 891px #FFF , 625px 1684px #FFF , 761px 1793px #FFF , 506px 66px #FFF , 1819px 1897px #FFF , 435px 1541px #FFF , 91px 977px #FFF , 200px 1883px #FFF , 948px 171px #FFF , 1526px 1703px #FFF , 1166px 1098px #FFF , 503px 94px #FFF , 1637px 952px #FFF , 1282px 423px #FFF , 814px 42px #FFF , 369px 476px #FFF , 1157px 830px #FFF , 968px 1336px #FFF , 476px 1963px #FFF , 1734px 775px #FFF , 359px 1440px #FFF , 1584px 1298px #FFF , 1654px 607px #FFF , 1555px 1857px #FFF , 1170px 1815px #FFF , 206px 1992px #FFF , 1916px 1235px #FFF , 104px 461px #FFF , 1971px 1024px #FFF , 128px 994px #FFF , 1302px 1405px #FFF , 1212px 1962px #FFF , 1378px 493px #FFF , 291px 1300px #FFF , 100px 167px #FFF , 175px 1931px #FFF , 1760px 1463px #FFF , 637px 1397px #FFF , 1768px 1577px #FFF , 1191px 1424px #FFF , 1249px 1258px #FFF , 87px 970px #FFF , 1471px 36px #FFF , 1569px 1570px #FFF , 652px 1445px #FFF , 591px 1463px #FFF , 723px 166px #FFF , 1856px 595px #FFF , 1805px 1397px #FFF , 1674px 1586px #FFF , 642px 32px #FFF , 1702px 1956px #FFF , 1659px 284px #FFF , 1553px 1868px #FFF , 618px 744px #FFF , 714px 346px #FFF , 258px 1968px #FFF , 24px 734px #FFF , 875px 1600px #FFF , 241px 1836px #FFF , 1808px 1775px #FFF , 1672px 1533px #FFF , 841px 343px #FFF , 1909px 1277px #FFF , 1173px 1957px #FFF , 1749px 546px #FFF , 77px 176px #FFF , 1381px 1210px #FFF , 120px 893px #FFF , 1572px 1604px #FFF , 83px 773px #FFF , 753px 1296px #FFF , 587px 1571px #FFF , 617px 1271px #FFF , 194px 476px #FFF , 966px 1044px #FFF , 1902px 1491px #FFF , 1628px 428px #FFF , 1544px 38px #FFF , 1744px 1893px #FFF , 228px 1900px #FFF , 422px 1068px #FFF , 128px 150px #FFF , 1100px 588px #FFF , 128px 1167px #FFF , 491px 808px #FFF , 679px 1682px #FFF , 1107px 828px #FFF , 318px 1153px #FFF , 1954px 909px #FFF , 549px 1213px #FFF , 1351px 385px #FFF , 452px 1072px #FFF , 1910px 1514px #FFF , 191px 1909px #FFF , 1653px 1084px #FFF , 485px 1156px #FFF , 722px 1235px #FFF , 1915px 607px #FFF , 1019px 532px #FFF , 1230px 1298px #FFF , 1351px 1998px #FFF , 456px 304px #FFF , 449px 1524px #FFF , 1233px 920px #FFF , 1632px 42px #FFF , 304px 315px #FFF , 489px 378px #FFF , 455px 1893px #FFF , 414px 794px #FFF , 1440px 527px #FFF , 886px 176px #FFF , 1692px 1132px #FFF , 1980px 17px #FFF , 1241px 1892px #FFF , 762px 1419px #FFF , 757px 199px #FFF , 743px 1478px #FFF , 1709px 1341px #FFF , 364px 863px #FFF , 1726px 1622px #FFF , 1624px 19px #FFF , 205px 1470px #FFF , 1729px 636px #FFF , 1474px 292px #FFF , 1674px 1025px #FFF , 353px 605px #FFF , 818px 849px #FFF , 41px 1424px #FFF , 799px 1397px #FFF , 747px 1789px #FFF , 1387px 295px #FFF , 947px 20px #FFF , 1205px 1694px #FFF , 1866px 1945px #FFF , 835px 561px #FFF , 382px 42px #FFF , 1686px 1203px #FFF , 1387px 1986px #FFF , 117px 712px #FFF , 1528px 1685px #FFF , 185px 306px #FFF , 1189px 1028px #FFF , 845px 1513px #FFF , 1677px 1981px #FFF , 489px 1912px #FFF , 1230px 730px #FFF , 679px 1363px #FFF , 1023px 1371px #FFF , 435px 330px #FFF , 515px 80px #FFF , 1767px 263px #FFF , 834px 201px #FFF , 1552px 1075px #FFF , 490px 1528px #FFF , 1279px 342px #FFF , 537px 1335px #FFF , 805px 75px #FFF , 1337px 565px #FFF , 1504px 223px #FFF , 544px 1005px #FFF , 1577px 1111px #FFF , 404px 691px #FFF , 676px 21px #FFF , 658px 1345px #FFF , 842px 1053px #FFF , 1107px 1855px #FFF , 1848px 572px #FFF , 391px 1179px #FFF , 1268px 1777px #FFF , 1802px 438px #FFF , 1662px 1146px #FFF , 995px 1323px #FFF , 942px 17px #FFF , 52px 575px #FFF , 1834px 907px #FFF , 1607px 592px #FFF , 1127px 98px #FFF , 722px 1097px #FFF , 1748px 1750px #FFF , 46px 1902px #FFF , 1451px 792px #FFF , 1346px 491px #FFF , 1840px 710px #FFF , 729px 158px #FFF , 553px 684px #FFF , 776px 720px #FFF , 227px 1414px #FFF , 421px 58px #FFF , 943px 1611px #FFF , 1484px 1707px #FFF , 1875px 201px #FFF , 865px 1884px #FFF , 1886px 227px #FFF , 1780px 160px #FFF , 803px 100px #FFF , 1758px 136px #FFF , 1622px 993px #FFF , 1152px 64px #FFF , 594px 1461px #FFF , 1257px 974px #FFF , 749px 725px #FFF , 1127px 269px #FFF , 643px 1646px #FFF , 621px 1174px #FFF , 437px 1116px #FFF , 228px 161px #FFF , 361px 1477px #FFF , 1737px 1223px #FFF , 1780px 642px #FFF , 1338px 1809px #FFF , 1924px 125px #FFF , 1451px 840px #FFF , 244px 856px #FFF , 1100px 1123px #FFF , 135px 1649px #FFF , 1579px 533px #FFF , 559px 506px #FFF , 1862px 879px #FFF , 24px 1008px #FFF , 1581px 953px #FFF , 491px 1654px #FFF , 262px 1803px #FFF , 1076px 239px #FFF , 1290px 1199px #FFF , 1230px 1326px #FFF , 1834px 1701px #FFF , 876px 685px #FFF , 1124px 1672px #FFF , 883px 369px #FFF , 1154px 1111px #FFF , 832px 1179px #FFF , 1688px 963px #FFF , 1135px 763px #FFF , 110px 214px #FFF , 915px 1359px #FFF , 149px 975px #FFF , 1620px 755px #FFF , 683px 1758px #FFF , 885px 396px #FFF , 1892px 886px #FFF , 36px 1941px #FFF , 1986px 1457px #FFF , 1591px 70px #FFF , 1292px 1441px #FFF , 51px 902px #FFF , 1228px 1113px #FFF , 433px 481px #FFF , 1669px 665px #FFF , 1899px 1047px #FFF , 1057px 1978px #FFF , 227px 1708px #FFF , 1161px 237px #FFF , 442px 1126px #FFF , 1997px 1644px #FFF , 947px 52px #FFF , 1595px 178px #FFF , 1256px 456px #FFF , 1647px 1187px #FFF , 1463px 1318px #FFF , 596px 1159px #FFF , 287px 1682px #FFF , 1282px 1178px #FFF , 766px 934px #FFF , 1678px 1658px #FFF , 1464px 389px #FFF , 834px 1356px #FFF , 1631px 622px #FFF , 353px 1987px #FFF , 1689px 451px #FFF , 1293px 1039px #FFF , 1439px 595px #FFF , 945px 1918px #FFF , 668px 1100px #FFF , 268px 430px #FFF , 5px 1596px #FFF , 503px 1205px #FFF , 1453px 797px #FFF , 1201px 332px #FFF , 777px 1415px #FFF , 426px 223px #FFF , 608px 252px #FFF , 447px 904px #FFF , 868px 287px #FFF , 174px 660px #FFF , 949px 1138px #FFF , 129px 1994px #FFF , 1681px 1227px #FFF , 781px 1559px #FFF , 91px 1821px #FFF , 971px 1735px #FFF , 41px 33px #FFF , 1828px 1411px #FFF , 1052px 1853px #FFF , 1090px 1316px #FFF , 1223px 1792px #FFF , 1359px 586px #FFF , 781px 876px #FFF , 726px 1796px #FFF , 1876px 645px #FFF , 1715px 1673px #FFF , 76px 176px #FFF , 476px 806px #FFF , 1860px 693px #FFF , 218px 1112px #FFF , 618px 732px #FFF , 810px 1127px #FFF , 1635px 1568px #FFF , 1417px 1299px #FFF , 526px 669px #FFF , 29px 1761px #FFF , 1932px 1327px #FFF , 569px 1133px #FFF , 1862px 1688px #FFF , 1682px 1620px #FFF , 960px 632px #FFF , 1554px 1025px #FFF , 560px 1233px #FFF , 1773px 1966px #FFF , 719px 967px #FFF , 99px 1084px #FFF , 1299px 291px #FFF , 914px 238px #FFF , 1608px 31px #FFF , 1300px 1227px #FFF , 925px 556px #FFF , 1728px 1061px #FFF , 1799px 1230px #FFF , 848px 1717px #FFF , 290px 1135px #FFF , 1114px 419px #FFF , 1435px 1483px #FFF , 581px 314px #FFF , 146px 1571px #FFF , 1780px 1933px #FFF , 93px 92px #FFF , 398px 36px #FFF , 543px 844px #FFF , 547px 202px #FFF , 647px 1310px #FFF , 1742px 1927px #FFF , 656px 1135px #FFF , 1000px 1008px #FFF , 1453px 396px #FFF , 1489px 1230px #FFF , 511px 1191px #FFF , 1251px 784px #FFF , 218px 583px #FFF , 690px 1710px #FFF , 612px 1719px #FFF , 1020px 529px #FFF , 1568px 573px #FFF , 1812px 22px #FFF , 1701px 1869px #FFF , 903px 1118px #FFF , 664px 1505px #FFF , 982px 954px #FFF , 1701px 1154px #FFF , 650px 943px #FFF , 166px 311px #FFF , 1844px 866px #FFF , 905px 140px #FFF , 125px 690px #FFF , 1301px 31px #FFF , 1513px 1278px #FFF , 524px 1346px #FFF , 1341px 404px #FFF , 592px 1750px #FFF , 1281px 1886px #FFF , 1636px 1768px #FFF , 1372px 921px #FFF , 1445px 832px #FFF , 968px 1525px #FFF , 739px 692px #FFF , 1617px 1690px #FFF , 1408px 1065px #FFF , 1028px 1168px #FFF , 1108px 454px #FFF , 1811px 1117px #FFF , 121px 808px #FFF , 1327px 1792px #FFF , 308px 1230px #FFF , 1407px 728px #FFF , 1502px 1438px #FFF , 1291px 1122px #FFF , 1328px 546px #FFF , 1054px 881px #FFF , 1892px 117px #FFF , 1599px 475px #FFF , 364px 1807px #FFF , 1522px 1486px #FFF , 1743px 819px #FFF , 740px 1072px #FFF , 1101px 477px #FFF , 455px 1843px #FFF , 1486px 301px #FFF , 1443px 957px #FFF , 505px 1141px #FFF , 1591px 55px #FFF , 191px 269px #FFF , 719px 1213px #FFF , 79px 491px #FFF , 1749px 1630px #FFF , 349px 1934px #FFF , 1296px 212px #FFF , 553px 996px #FFF , 975px 641px #FFF , 149px 995px #FFF , 1254px 1378px #FFF , 891px 1716px #FFF , 1212px 342px #FFF , 1295px 473px #FFF , 1065px 110px #FFF , 1515px 1770px #FFF , 720px 922px #FFF , 305px 293px #FFF , 676px 1997px #FFF , 607px 1711px #FFF , 510px 776px #FFF , 467px 1556px #FFF , 61px 825px #FFF , 30px 940px #FFF , 447px 650px #FFF , 598px 733px #FFF , 559px 1016px #FFF , 1384px 1820px #FFF , 430px 626px #FFF , 1360px 1311px #FFF , 1531px 104px #FFF , 939px 1240px #FFF , 1394px 1176px #FFF , 230px 29px #FFF , 1105px 696px #FFF , 1056px 1179px #FFF , 1026px 408px #FFF , 367px 198px #FFF , 828px 1830px #FFF , 214px 1522px #FFF , 1691px 670px #FFF , 948px 1132px #FFF , 112px 624px #FFF , 794px 444px #FFF , 497px 59px #FFF , 1949px 477px #FFF , 1400px 345px #FFF , 1189px 30px #FFF , 8px 414px #FFF , 1396px 1919px #FFF , 379px 25px #FFF , 85px 1250px #FFF , 1580px 336px #FFF , 1275px 185px #FFF , 1102px 812px #FFF , 180px 341px #FFF , 609px 39px #FFF , 1623px 1326px #FFF , 1682px 1412px #FFF , 831px 1578px #FFF , 926px 1268px #FFF , 1400px 1583px #FFF , 496px 1195px #FFF , 254px 1018px #FFF , 1571px 461px #FFF , 282px 1316px #FFF , 1377px 134px #FFF , 1704px 1262px #FFF , 1184px 318px #FFF , 296px 950px #FFF , 220px 934px #FFF , 1169px 1198px #FFF , 1321px 372px #FFF , 728px 1051px #FFF , 1041px 1981px #FFF , 739px 1851px #FFF , 1323px 1096px #FFF , 1409px 176px #FFF , 1400px 101px #FFF , 1133px 489px #FFF , 1369px 349px #FFF , 353px 1113px #FFF , 1481px 705px #FFF , 1986px 847px #FFF , 365px 1761px #FFF , 1840px 355px #FFF , 931px 1570px #FFF , 1825px 395px #FFF , 987px 819px #FFF , 967px 1492px #FFF , 1607px 1843px #FFF , 1103px 450px #FFF , 1643px 705px #FFF , 380px 93px #FFF , 1801px 1700px #FFF , 1227px 1508px #FFF , 617px 1409px #FFF , 1935px 778px #FFF , 355px 1825px #FFF , 1359px 1268px #FFF , 894px 589px #FFF , 378px 1107px #FFF , 1187px 1931px #FFF , 365px 791px #FFF , 1180px 1500px #FFF , 1734px 518px #FFF , 252px 1317px #FFF , 1993px 1929px #FFF , 1424px 964px #FFF , 1893px 121px #FFF , 701px 61px #FFF , 254px 352px #FFF , 1887px 1388px #FFF , 264px 1737px #FFF , 427px 1327px #FFF , 143px 345px #FFF , 869px 1665px #FFF , 1608px 1164px #FFF , 532px 1112px #FFF , 49px 1175px #FFF , 811px 625px #FFF , 99px 1320px #FFF , 62px 1106px #FFF , 280px 453px #FFF , 423px 1694px #FFF , 200px 1850px #FFF , 1257px 801px #FFF , 1653px 446px #FFF , 618px 279px #FFF , 56px 1843px #FFF , 949px 592px #FFF , 1758px 787px #FFF , 587px 1629px #FFF , 1792px 643px #FFF , 218px 1810px #FFF , 988px 407px #FFF , 1420px 558px #FFF , 773px 1643px #FFF , 115px 998px #FFF , 1360px 201px #FFF , 586px 1013px #FFF , 1107px 1444px #FFF , 1434px 1268px #FFF , 1496px 1831px #FFF , 460px 1857px #FFF , 319px 950px #FFF , 1230px 744px #FFF , 149px 1634px #FFF , 498px 309px #FFF , 998px 441px #FFF , 694px 1750px #FFF , 1730px 1201px #FFF , 546px 1337px #FFF , 1928px 1047px #FFF , 1039px 1640px #FFF , 1253px 1617px #FFF , 1863px 867px #FFF , 1752px 1091px #FFF , 652px 54px #FFF , 92px 341px #FFF , 1107px 1832px #FFF , 440px 1294px #FFF , 430px 1556px #FFF , 1772px 355px #FFF , 945px 1399px #FFF , 1529px 1388px #FFF , 518px 1111px #FFF , 374px 849px #FFF , 1908px 1099px #FFF , 1937px 13px #FFF , 740px 1484px #FFF , 454px 1724px #FFF , 107px 452px #FFF , 1991px 321px #FFF , 1535px 1486px #FFF , 226px 1555px #FFF , 494px 1517px #FFF , 475px 1074px #FFF , 1019px 1058px #FFF , 1557px 459px #FFF , 803px 868px #FFF , 1005px 742px #FFF , 1150px 1315px #FFF , 881px 152px #FFF , 619px 37px #FFF , 283px 1538px #FFF , 121px 159px #FFF , 1898px 512px #FFF , 1468px 263px #FFF , 1943px 1029px #FFF , 1199px 1045px #FFF , 1883px 1627px #FFF , 491px 922px #FFF , 1035px 7px #FFF , 1740px 1469px #FFF , 921px 1629px #FFF , 337px 653px #FFF , 1340px 711px #FFF , 1897px 1799px #FFF , 1538px 1150px #FFF , 1297px 1075px #FFF , 1461px 1933px #FFF , 1428px 1145px #FFF , 1354px 621px #FFF , 219px 406px #FFF , 748px 853px #FFF , 603px 1079px #FFF , 601px 437px #FFF , 328px 481px #FFF , 834px 1857px #FFF , 56px 1849px #FFF , 1238px 486px #FFF , 461px 1201px #FFF , 1999px 476px #FFF , 635px 1509px #FFF , 964px 657px #FFF , 222px 145px #FFF , 1189px 8px #FFF , 756px 489px #FFF , 20px 643px #FFF , 1863px 465px #FFF , 1447px 234px #FFF , 879px 521px #FFF , 2000px 1175px #FFF , 1976px 1401px #FFF , 885px 1002px #FFF , 238px 571px #FFF , 333px 1548px #FFF , 1682px 1603px #FFF , 216px 1822px #FFF , 1442px 1376px #FFF , 1993px 1747px #FFF , 1207px 1183px #FFF , 112px 471px #FFF , 1018px 586px #FFF , 92px 1185px #FFF , 684px 1296px #FFF , 42px 656px #FFF , 705px 1994px #FFF , 1637px 1771px #FFF , 320px 563px #FFF , 1970px 726px #FFF , 875px 1373px #FFF , 917px 1042px #FFF , 1375px 1047px #FFF , 1249px 748px #FFF , 487px 313px #FFF , 1332px 1330px #FFF , 491px 706px #FFF , 1375px 309px #FFF , 414px 964px #FFF , 1914px 498px #FFF , 124px 594px #FFF , 1422px 934px #FFF , 1008px 870px #FFF , 1249px 1043px #FFF , 737px 1911px #FFF , 944px 1601px #FFF , 1977px 1830px #FFF , 1533px 498px #FFF , 964px 508px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1330px 606px #FFF , 856px 1167px #FFF , 748px 13px #FFF , 1052px 1401px #FFF , 41px 777px #FFF , 1612px 1004px #FFF , 1070px 295px #FFF , 1152px 106px #FFF , 1036px 146px #FFF , 440px 1076px #FFF , 530px 842px #FFF , 501px 751px #FFF , 509px 1573px #FFF , 1838px 1186px #FFF , 1115px 1999px #FFF , 777px 789px #FFF , 1281px 1039px #FFF , 783px 1166px #FFF , 1766px 1106px #FFF , 1532px 385px #FFF , 1770px 1872px #FFF , 496px 1702px #FFF , 1194px 558px #FFF , 1839px 1181px #FFF , 1359px 225px #FFF , 1948px 624px #FFF , 215px 891px #FFF , 407px 1528px #FFF , 1023px 167px #FFF , 640px 837px #FFF , 1993px 612px #FFF , 904px 1910px #FFF , 1298px 1623px #FFF , 1963px 843px #FFF , 398px 337px #FFF , 305px 1532px #FFF , 1210px 1987px #FFF , 14px 591px #FFF , 905px 1970px #FFF , 558px 733px #FFF , 1851px 739px #FFF , 916px 281px #FFF , 582px 1538px #FFF , 116px 1741px #FFF , 1884px 1870px #FFF , 893px 1585px #FFF , 1038px 634px #FFF , 1538px 1617px #FFF , 1423px 1813px #FFF , 747px 164px #FFF , 134px 1935px #FFF , 402px 321px #FFF , 1517px 831px #FFF , 595px 1291px #FFF , 409px 907px #FFF , 1744px 657px #FFF , 242px 607px #FFF , 1146px 1262px #FFF , 1143px 1868px #FFF , 285px 819px #FFF , 1194px 988px #FFF , 1420px 1459px #FFF , 1568px 1767px #FFF , 1994px 1094px #FFF , 116px 1008px #FFF , 1395px 707px #FFF , 1188px 161px #FFF , 565px 792px #FFF , 1649px 630px #FFF , 1740px 1938px #FFF , 1011px 1916px #FFF , 1997px 1864px #FFF , 579px 1442px #FFF , 1360px 1796px #FFF , 1928px 393px #FFF , 1873px 238px #FFF , 1777px 798px #FFF , 1175px 830px #FFF , 926px 262px #FFF , 761px 416px #FFF , 492px 1044px #FFF , 739px 183px #FFF , 576px 1861px #FFF , 1692px 1302px #FFF , 1304px 1424px #FFF , 1735px 1152px #FFF , 306px 164px #FFF , 1700px 1203px #FFF , 128px 709px #FFF , 1829px 814px #FFF , 839px 1977px #FFF , 1096px 564px #FFF , 1216px 124px #FFF , 1896px 507px #FFF , 975px 23px #FFF , 1409px 1994px #FFF , 676px 490px #FFF , 1789px 594px #FFF , 1858px 960px #FFF , 1705px 936px #FFF , 1009px 606px #FFF , 493px 322px #FFF , 1428px 859px #FFF , 891px 1458px #FFF , 130px 646px #FFF , 1565px 676px #FFF , 1064px 1865px #FFF , 1506px 860px #FFF , 1427px 1467px #FFF , 467px 10px #FFF , 1357px 1036px #FFF , 547px 343px #FFF , 566px 1644px #FFF , 1866px 1424px #FFF , 1118px 1219px #FFF , 812px 820px #FFF , 1879px 1400px #FFF , 1474px 745px #FFF , 1850px 405px #FFF , 1011px 1219px #FFF , 428px 1258px #FFF , 661px 1456px #FFF , 1243px 437px #FFF , 562px 974px #FFF , 1851px 1217px #FFF , 1658px 781px #FFF , 1330px 768px #FFF , 1757px 825px #FFF , 1319px 1236px #FFF , 1700px 383px #FFF , 1493px 239px #FFF , 530px 1231px #FFF , 1110px 951px #FFF , 1427px 117px #FFF , 1239px 61px #FFF , 1929px 1428px #FFF , 1823px 1119px #FFF , 196px 742px #FFF , 1060px 997px #FFF , 156px 377px #FFF , 780px 277px #FFF , 1369px 1633px #FFF , 190px 1595px #FFF , 944px 1609px #FFF , 1468px 697px #FFF , 197px 912px #FFF , 1056px 105px #FFF , 808px 939px #FFF , 1054px 536px #FFF , 958px 1968px #FFF , 430px 275px #FFF , 541px 1955px #FFF , 1177px 269px #FFF , 575px 1113px #FFF , 535px 1897px #FFF , 1189px 1624px #FFF , 634px 52px #FFF , 1486px 998px #FFF , 721px 1184px #FFF , 813px 660px #FFF , 464px 1347px #FFF , 1703px 74px #FFF , 1960px 523px #FFF , 1061px 420px #FFF , 1877px 1599px #FFF , 1924px 118px #FFF , 275px 1229px #FFF , 365px 1847px #FFF , 627px 1510px #FFF , 220px 1694px #FFF , 380px 970px #FFF , 1861px 1204px #FFF , 518px 76px #FFF , 1615px 860px #FFF , 1537px 965px #FFF , 1746px 1227px #FFF , 1507px 1052px #FFF , 1373px 930px #FFF , 1021px 711px #FFF , 222px 1296px #FFF , 1170px 1126px #FFF , 1739px 1410px #FFF , 122px 608px #FFF , 1610px 803px #FFF , 708px 99px #FFF , 1150px 17px #FFF , 335px 86px #FFF , 1301px 1642px #FFF , 1632px 968px #FFF , 424px 109px #FFF , 1333px 674px #FFF , 159px 1864px #FFF , 1659px 1925px #FFF , 1429px 147px #FFF , 1345px 320px #FFF , 1154px 630px #FFF , 571px 601px #FFF , 800px 686px #FFF , 1209px 745px #FFF , 1504px 1852px #FFF;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1330px 606px #FFF , 856px 1167px #FFF , 748px 13px #FFF , 1052px 1401px #FFF , 41px 777px #FFF , 1612px 1004px #FFF , 1070px 295px #FFF , 1152px 106px #FFF , 1036px 146px #FFF , 440px 1076px #FFF , 530px 842px #FFF , 501px 751px #FFF , 509px 1573px #FFF , 1838px 1186px #FFF , 1115px 1999px #FFF , 777px 789px #FFF , 1281px 1039px #FFF , 783px 1166px #FFF , 1766px 1106px #FFF , 1532px 385px #FFF , 1770px 1872px #FFF , 496px 1702px #FFF , 1194px 558px #FFF , 1839px 1181px #FFF , 1359px 225px #FFF , 1948px 624px #FFF , 215px 891px #FFF , 407px 1528px #FFF , 1023px 167px #FFF , 640px 837px #FFF , 1993px 612px #FFF , 904px 1910px #FFF , 1298px 1623px #FFF , 1963px 843px #FFF , 398px 337px #FFF , 305px 1532px #FFF , 1210px 1987px #FFF , 14px 591px #FFF , 905px 1970px #FFF , 558px 733px #FFF , 1851px 739px #FFF , 916px 281px #FFF , 582px 1538px #FFF , 116px 1741px #FFF , 1884px 1870px #FFF , 893px 1585px #FFF , 1038px 634px #FFF , 1538px 1617px #FFF , 1423px 1813px #FFF , 747px 164px #FFF , 134px 1935px #FFF , 402px 321px #FFF , 1517px 831px #FFF , 595px 1291px #FFF , 409px 907px #FFF , 1744px 657px #FFF , 242px 607px #FFF , 1146px 1262px #FFF , 1143px 1868px #FFF , 285px 819px #FFF , 1194px 988px #FFF , 1420px 1459px #FFF , 1568px 1767px #FFF , 1994px 1094px #FFF , 116px 1008px #FFF , 1395px 707px #FFF , 1188px 161px #FFF , 565px 792px #FFF , 1649px 630px #FFF , 1740px 1938px #FFF , 1011px 1916px #FFF , 1997px 1864px #FFF , 579px 1442px #FFF , 1360px 1796px #FFF , 1928px 393px #FFF , 1873px 238px #FFF , 1777px 798px #FFF , 1175px 830px #FFF , 926px 262px #FFF , 761px 416px #FFF , 492px 1044px #FFF , 739px 183px #FFF , 576px 1861px #FFF , 1692px 1302px #FFF , 1304px 1424px #FFF , 1735px 1152px #FFF , 306px 164px #FFF , 1700px 1203px #FFF , 128px 709px #FFF , 1829px 814px #FFF , 839px 1977px #FFF , 1096px 564px #FFF , 1216px 124px #FFF , 1896px 507px #FFF , 975px 23px #FFF , 1409px 1994px #FFF , 676px 490px #FFF , 1789px 594px #FFF , 1858px 960px #FFF , 1705px 936px #FFF , 1009px 606px #FFF , 493px 322px #FFF , 1428px 859px #FFF , 891px 1458px #FFF , 130px 646px #FFF , 1565px 676px #FFF , 1064px 1865px #FFF , 1506px 860px #FFF , 1427px 1467px #FFF , 467px 10px #FFF , 1357px 1036px #FFF , 547px 343px #FFF , 566px 1644px #FFF , 1866px 1424px #FFF , 1118px 1219px #FFF , 812px 820px #FFF , 1879px 1400px #FFF , 1474px 745px #FFF , 1850px 405px #FFF , 1011px 1219px #FFF , 428px 1258px #FFF , 661px 1456px #FFF , 1243px 437px #FFF , 562px 974px #FFF , 1851px 1217px #FFF , 1658px 781px #FFF , 1330px 768px #FFF , 1757px 825px #FFF , 1319px 1236px #FFF , 1700px 383px #FFF , 1493px 239px #FFF , 530px 1231px #FFF , 1110px 951px #FFF , 1427px 117px #FFF , 1239px 61px #FFF , 1929px 1428px #FFF , 1823px 1119px #FFF , 196px 742px #FFF , 1060px 997px #FFF , 156px 377px #FFF , 780px 277px #FFF , 1369px 1633px #FFF , 190px 1595px #FFF , 944px 1609px #FFF , 1468px 697px #FFF , 197px 912px #FFF , 1056px 105px #FFF , 808px 939px #FFF , 1054px 536px #FFF , 958px 1968px #FFF , 430px 275px #FFF , 541px 1955px #FFF , 1177px 269px #FFF , 575px 1113px #FFF , 535px 1897px #FFF , 1189px 1624px #FFF , 634px 52px #FFF , 1486px 998px #FFF , 721px 1184px #FFF , 813px 660px #FFF , 464px 1347px #FFF , 1703px 74px #FFF , 1960px 523px #FFF , 1061px 420px #FFF , 1877px 1599px #FFF , 1924px 118px #FFF , 275px 1229px #FFF , 365px 1847px #FFF , 627px 1510px #FFF , 220px 1694px #FFF , 380px 970px #FFF , 1861px 1204px #FFF , 518px 76px #FFF , 1615px 860px #FFF , 1537px 965px #FFF , 1746px 1227px #FFF , 1507px 1052px #FFF , 1373px 930px #FFF , 1021px 711px #FFF , 222px 1296px #FFF , 1170px 1126px #FFF , 1739px 1410px #FFF , 122px 608px #FFF , 1610px 803px #FFF , 708px 99px #FFF , 1150px 17px #FFF , 335px 86px #FFF , 1301px 1642px #FFF , 1632px 968px #FFF , 424px 109px #FFF , 1333px 674px #FFF , 159px 1864px #FFF , 1659px 1925px #FFF , 1429px 147px #FFF , 1345px 320px #FFF , 1154px 630px #FFF , 571px 601px #FFF , 800px 686px #FFF , 1209px 745px #FFF , 1504px 1852px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1771px 502px #FFF , 1242px 529px #FFF , 1504px 748px #FFF , 465px 38px #FFF , 498px 481px #FFF , 754px 688px #FFF , 1276px 518px #FFF , 1912px 1225px #FFF , 8px 254px #FFF , 1771px 1603px #FFF , 382px 736px #FFF , 1109px 1406px #FFF , 1299px 475px #FFF , 1771px 31px #FFF , 1244px 1244px #FFF , 827px 1811px #FFF , 69px 291px #FFF , 1901px 1250px #FFF , 1573px 479px #FFF , 1807px 897px #FFF , 1981px 1045px #FFF , 1223px 1170px #FFF , 812px 1915px #FFF , 1110px 1902px #FFF , 1756px 1836px #FFF , 1264px 1050px #FFF , 1275px 1378px #FFF , 1399px 1592px #FFF , 365px 689px #FFF , 1062px 1351px #FFF , 1226px 378px #FFF , 599px 1487px #FFF , 554px 680px #FFF , 706px 333px #FFF , 1545px 48px #FFF , 117px 199px #FFF , 1383px 1802px #FFF , 403px 1810px #FFF , 734px 685px #FFF , 1146px 608px #FFF , 1289px 1382px #FFF , 904px 1868px #FFF , 743px 574px #FFF , 1941px 296px #FFF , 199px 1042px #FFF , 471px 1280px #FFF , 1545px 248px #FFF , 467px 1421px #FFF , 435px 1954px #FFF , 850px 448px #FFF , 1404px 93px #FFF , 555px 1121px #FFF , 1355px 1063px #FFF , 1876px 696px #FFF , 876px 1643px #FFF , 1300px 361px #FFF , 1011px 1978px #FFF , 1596px 992px #FFF , 80px 255px #FFF , 749px 1936px #FFF , 1442px 1312px #FFF , 413px 1368px #FFF , 1251px 978px #FFF , 774px 1548px #FFF , 1789px 1551px #FFF , 1786px 1227px #FFF , 1437px 794px #FFF , 551px 856px #FFF , 1226px 435px #FFF , 1547px 1087px #FFF , 1930px 717px #FFF , 566px 297px #FFF , 1527px 1168px #FFF , 67px 678px #FFF , 1818px 1105px #FFF , 1814px 920px #FFF , 1271px 612px #FFF , 1840px 682px #FFF , 1417px 1263px #FFF , 834px 1672px #FFF , 1286px 275px #FFF , 1159px 1871px #FFF , 1961px 1419px #FFF , 225px 438px #FFF , 1174px 1949px #FFF , 396px 1814px #FFF , 1500px 270px #FFF , 1976px 833px #FFF , 992px 371px #FFF , 1636px 1348px #FFF , 677px 558px #FFF , 903px 163px #FFF , 1505px 449px #FFF , 1419px 250px #FFF , 769px 1290px #FFF , 1436px 220px #FFF , 134px 1791px #FFF , 318px 878px #FFF , 832px 601px #FFF , 481px 512px #FFF;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1771px 502px #FFF , 1242px 529px #FFF , 1504px 748px #FFF , 465px 38px #FFF , 498px 481px #FFF , 754px 688px #FFF , 1276px 518px #FFF , 1912px 1225px #FFF , 8px 254px #FFF , 1771px 1603px #FFF , 382px 736px #FFF , 1109px 1406px #FFF , 1299px 475px #FFF , 1771px 31px #FFF , 1244px 1244px #FFF , 827px 1811px #FFF , 69px 291px #FFF , 1901px 1250px #FFF , 1573px 479px #FFF , 1807px 897px #FFF , 1981px 1045px #FFF , 1223px 1170px #FFF , 812px 1915px #FFF , 1110px 1902px #FFF , 1756px 1836px #FFF , 1264px 1050px #FFF , 1275px 1378px #FFF , 1399px 1592px #FFF , 365px 689px #FFF , 1062px 1351px #FFF , 1226px 378px #FFF , 599px 1487px #FFF , 554px 680px #FFF , 706px 333px #FFF , 1545px 48px #FFF , 117px 199px #FFF , 1383px 1802px #FFF , 403px 1810px #FFF , 734px 685px #FFF , 1146px 608px #FFF , 1289px 1382px #FFF , 904px 1868px #FFF , 743px 574px #FFF , 1941px 296px #FFF , 199px 1042px #FFF , 471px 1280px #FFF , 1545px 248px #FFF , 467px 1421px #FFF , 435px 1954px #FFF , 850px 448px #FFF , 1404px 93px #FFF , 555px 1121px #FFF , 1355px 1063px #FFF , 1876px 696px #FFF , 876px 1643px #FFF , 1300px 361px #FFF , 1011px 1978px #FFF , 1596px 992px #FFF , 80px 255px #FFF , 749px 1936px #FFF , 1442px 1312px #FFF , 413px 1368px #FFF , 1251px 978px #FFF , 774px 1548px #FFF , 1789px 1551px #FFF , 1786px 1227px #FFF , 1437px 794px #FFF , 551px 856px #FFF , 1226px 435px #FFF , 1547px 1087px #FFF , 1930px 717px #FFF , 566px 297px #FFF , 1527px 1168px #FFF , 67px 678px #FFF , 1818px 1105px #FFF , 1814px 920px #FFF , 1271px 612px #FFF , 1840px 682px #FFF , 1417px 1263px #FFF , 834px 1672px #FFF , 1286px 275px #FFF , 1159px 1871px #FFF , 1961px 1419px #FFF , 225px 438px #FFF , 1174px 1949px #FFF , 396px 1814px #FFF , 1500px 270px #FFF , 1976px 833px #FFF , 992px 371px #FFF , 1636px 1348px #FFF , 677px 558px #FFF , 903px 163px #FFF , 1505px 449px #FFF , 1419px 250px #FFF , 769px 1290px #FFF , 1436px 220px #FFF , 134px 1791px #FFF , 318px 878px #FFF , 832px 601px #FFF , 481px 512px #FFF;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}



a{
    text-decoration: none;
}
.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container_exp{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}
.container_dna{
    min-height: 50vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
p{
        
        font-size: 1.4rem;
        margin-top: 5px;
        color: #a3a3a3;
        line-height: 2.5rem;
        font-weight: 300px;
}
.skill-title{
    font-size: 3rem;
    font-weight: 300;
    color: #a3a3a3;
    margin-bottom: 10px ;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
.cta{
    display: inline-block;
    padding: 8px 15px;
    color: white;
    background-color: transparent;
    border: 1px solid var(--yellow_s);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 30px;
    transition: .3s ease;
    transition-property: background-color, color;
    transition: .3s ease;
    }
.cta:hover{
        color: var(--primary);
        background-color: var(--yellow_s);
    }
.brand h1{
    font-size: 4.5rem;
    font-family: 'walt-disney', cursive;
    color: var(--yellow_s);
    font-weight: 50;
}
.brand h1:hover{
    animation: rubberBand;
      
    animation-duration: 1s;
}


/*Header section*/



/*Image background gradiant*/
figure {
  display: flex;
  position: relative;
  flex-direction: column;
}

figure img,
.img-bg {
  height: 280px;
  width: 280px;
}

.img-bg {
  position: absolute;
  background-image: linear-gradient(-45deg, #ffff00 50%, #ffff00 50%);
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  animation: pulse 2s cubic-bezier(0, 0, 0, 4) infinite;
}

@keyframes pulse {
  50% {
    transform: scale(0.1);
  }
}



/*Image background gradiant*/










/* Hero section*/
#hero{
    
    background-size: cover;
    background-position: top center;
    position: relative;
   
    z-index: 1;
    
        /*clip-path: inset(10px 20px 30px 40px);*/
    
}
#hero .hero{
    flex-direction: column;
    
}
#hero .hero .left{
    width: auto;
    height: auto;
    margin-top: 10px;
    margin-bottom: 50px;
    
    
}
.top-social-icon{
  position: relative;
  margin-top: 20px; /* Space between button and icons */
  display: flex;
  justify-content:flex-start;
  transition: all 0.5s ease-in-out;
}
.top-social-item{
  padding: 1rem;
  margin: 0.5rem;
}


/*Button des*/

#hero .hero .right{
    width: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    
}

.hero .right img{
    
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.hero .right img:hover{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    
    
}

#hero::after{
    content: '';
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
#hero .hero{
    max-width: 1200px;
    margin:  auto;
    padding: 0 40px;
    justify-content: flex-start;
    
}
#hero h1{
    display: block;
    width: fit-content;
    font-family: "Roboto", sans-serif;
    color: #a3a3a3;
    font-weight: 300;
    font-size: 18px;
    position: relative;
    color:transparent;
    animation: text_reveal .2s ease forwards;
    animation-delay: 1s;
}
#hero h2{
    display: block;
    width: fit-content;
    font-family: "Roboto", sans-serif;
    color: #a3a3a3;
    font-weight: 300;
    font-size: 12px;
    position: relative;
    color:transparent;
    animation: text_reveal .2s ease forwards;
    animation-delay: 1s;
}
#hero h3{
    display: block;
    width: fit-content;
    font-size: 4rem;
    font-weight: 1;
    position: relative;
    background: -webkit-linear-gradient(-45deg,#38495a,white);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "walt-disney", sans-serif ;
    animation: move 3s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


#hero h4{
    display: block;
    width: fit-content;
    font-size: 2rem;
    font-weight: 1;
    position: relative;
    font-family: "Montserrat", sans-serif ;
    color:transparent;
    animation: text_reveal .4s ease forwards;
    animation-delay: 2s;
}





/* end hero */



/*Down arrow section*/


.arrows {
    width: 60px;
    height: 72px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: 20px;
  }
  
  .arrows path {
    stroke: var(--yellow_s);
    fill: transparent;
    stroke-width: 1px;
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite;
  }
  
  @keyframes arrow {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes arrow /*Safari and Chrome*/ {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  .arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s; /* Safari 和 Chrome */
  }
  
  .arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
  }
  
  .arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s; /* Safari 和 Chrome */
  }
  
















/*skill section*/



.skill{
    
    flex-direction: column;
    justify-content: space-between;
}

.skill-right{
    width: 350px;
    height: 150px;
    margin-bottom: 220px;
    margin-top: 30px;
    
}
.skill-right p{
    font-size: 1.7rem;
}
.skill-left {
   width: 30%;
   margin-top: 40px;
}
.skill-title{
    font-family: "Montserrat", sans-serif;
    text-indent: 20px;
    font-size: 4rem;
    font-weight: 200;
}
.skill-right p{
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

.spotify{
    margin-top: 20px;
    margin-bottom: 20px;
}
.spotify p{
    font-size: 1.7rem;
    font-weight: 300;
}
.spotify img{
    width: 10%;
}


/*DNA Animation*/


.dna {
    width: 360px;
    height: 70px;
    perspective: 400px;
    transform-style: preserve-3d;
  }
  
  .ele {
    width: 1px;
    height: 70px;
    float: left;
    margin: 0 8px;
    border-left: 1px #B0B0B0 dashed;
    position: relative;
    transform: rotateX(-360deg);
    animation: run 2s linear infinite;
  }
  .ele:before, .ele:after {
    content: "";
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .ele:before {
    top: -2px;
    background: #000;
  }
  .ele:after {
    bottom: -2px;
  }
  .ele:nth-of-type(1) {
    animation-delay: -0.15s;
  }
  .ele:nth-of-type(2) {
    animation-delay: -0.3s;
  }
  .ele:nth-of-type(3) {
    animation-delay: -0.45s;
  }
  .ele:nth-of-type(4) {
    animation-delay: -0.6s;
  }
  .ele:nth-of-type(5) {
    animation-delay: -0.75s;
  }
  .ele:nth-of-type(6) {
    animation-delay: -0.9s;
  }
  .ele:nth-of-type(7) {
    animation-delay: -1.05s;
  }
  .ele:nth-of-type(8) {
    animation-delay: -1.2s;
  }
  .ele:nth-of-type(9) {
    animation-delay: -1.35s;
  }
  .ele:nth-of-type(10) {
    animation-delay: -1.5s;
  }
  .ele:nth-of-type(11) {
    animation-delay: -1.65s;
  }
  .ele:nth-of-type(12) {
    animation-delay: -1.8s;
  }
  .ele:nth-of-type(13) {
    animation-delay: -1.95s;
  }
  .ele:nth-of-type(14) {
    animation-delay: -2.1s;
  }
  .ele:nth-of-type(15) {
    animation-delay: -2.25s;
  }
  .ele:nth-of-type(16) {
    animation-delay: -2.4s;
  }
  .ele:nth-of-type(17) {
    animation-delay: -2.55s;
  }
  .ele:nth-of-type(18) {
    animation-delay: -2.7s;
  }
  .ele:nth-of-type(19) {
    animation-delay: -2.85s;
  }
  .ele:nth-of-type(20) {
    animation-delay: -3s;
  }
  
  @keyframes run {
    to {
      transform: none;
    }
  }








/* Tools section*/




.tools{
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.title_exe h1{
    font-family: "Montserrat",sans-serif;
    font-size: 4rem;
    font-weight: 200;
    font-weight: 00;
    font-weight: 0;
    color: #a3a3a3;
    margin-bottom: 10px ;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}

.tools_logo .tools_6{
    align-items: flex-start;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}
.logo{
    width: 40%;
}
.tools_logo .tools_3{
    align-items: flex-start;
    justify-content: space-between;
    display: flex;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
    flex-direction: row;
}

.tools_logo .tools_2{
    align-items: flex-start;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}
.tools_title{
    color: #ccc;
    font-weight: 200;
    font-size: 1.5rem;
}



/*All technology item ---------------------------------------------------------*/

.tech{
    flex-direction: column;
    width: 100%;
    display: flex;
    align-items: center;
    
}


.tech h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    color: #a3a3a3;
    margin-bottom: 10px ;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
    font-weight: 300;
}
.tech_tools img{
  width: 60%;
}


.tech .tech_tools{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.tech_1{
    margin-right: 10px;
}
.tech_2{
    margin-right: 10px;
}
.tech_3{
    margin-right: 10px;
}
.tech_4{
    margin-right: 10px;
}





/*Cursor effect*/
.container_write {
    margin-top: 150px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container_write p {
    font-family: 'Montserrat',sans-serif;
    font-size: 3rem;
    padding: 0.5rem;
    color: #a3a3a3;
    letter-spacing: 0.1rem;
    text-align: center;
    overflow: hidden;
  }
  .container_write p span.typed-text {
    font-weight: normal;
    color: var(--yellow_s);
  }
  .container_write p span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
  }
  .container_write p span.cursor.typing {
    animation: none;
  }
  @keyframes blink {
    0% {
      background-color: #ccc;
    }
    49% {
      background-color: #ccc;
    }
    50% {
      background-color: transparent;
    }
    99% {
      background-color: transparent;
    }
    100% {
      background-color: #ccc;
    }
  }


.code_head{
    text-align: center;
    margin-top: 100px;
    font-size: 2.5rem;
    color: #a3a3a3;
    margin-bottom: 20px;
    
}
.code_head h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
}
.coding_page{
    height: auto;
    margin-left: 40px;
    margin-top: 30px;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.coding_page p{
    font-family: 'Montserrat', sans-serif;
    margin-left: 20px;
    color: #a3a3a3;
}
.leetcode p{
    margin-left: 20px;
    color: #a3a3a3;
}
.hackerrank{
    margin-bottom: 30px;
}







/* Experiance*/

.exp_heading h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: #a3a3a3;
    font-size: 4rem;
}

.experiance{
    flex-direction: column;
}
.segments{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
 .skill-bottom{
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}
 .skill-item{
    
    flex-basis: 80%;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 10px;
    background-size: 400px;
    margin: 10px 5%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0px 0px 18px 0 black;
    transition: .3s ease box-shadow;
}

.skill-item:hover{
    box-shadow: 0px 0px 5px 0 black;
}
.skill-item.skill-item::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    opacity: .9;
    z-index: -1;
}
.skill-bottom .icon{
    
    width: 80px;
    margin-bottom: 20px;
}
.skill-item h2 {
  color: white; /* Set text color to white */
  margin-bottom: 10px;
}

.skill-item p {
  color: white; /* Set text color to white */
}

.skill-item ul {
  list-style: none;
  color: white;
  padding: 0;
  margin: 0;
}

.skill-item li {
  margin-bottom: 8px;
  color: white;
  font-weight: 400;
  font-size: 1.5rem;
}















/*  Temporary section */


.project_container_section{
  margin-top: 150px;
}

.project_title h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    color: #a3a3a3;
    margin-bottom: 10px ;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
    font-weight: 300;
}

.project_main_container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.project_container{

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

#contact_section{
  margin-top: 200px;
}

.contact_section h2 {
  font-size: 36px;
  color: #ffffff;
  font-weight: 200;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 35px;
}

.contact_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.d-flex{
  width: 350px;
}


.contact_img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

.contact_img-box img {
  width: 60%;
}



/*  Temporary section */































/*Airplane section*/

.container_airplane{
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}


.fly {
  font-size: 10rem;
  margin-top: 150px;
}
.fly .plane {
  display: block;
  transform: rotate(-45deg);
}


.sky {
  position: absolute;
  top: -200vh;
  left: 0;
  width: 100vw;
  height: 200vh;
  -webkit-animation: ttb 11s infinite linear;
          animation: ttb 11s infinite linear;
}
.sky > .container {
  width: 100%;
  height: 100%;
}
.sky.high {
  top: -400vh;
  height: 400vh;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.sky.high > .container {
  transform: scale(1.5) rotateY(180deg);
}
.sky .cloud {
  position: absolute;
}
.sky .cloud:nth-child(1n) {
  transform: scale(3);
  left: 40%;
  top: 5%;
  opacity: 0.9;
}
.sky .cloud:nth-child(2n) {
  transform: scale(2.5);
  opacity: 0.3;
}
.sky .cloud:nth-child(3n) {
  transform: scale(7) rotateY(180deg);
  left: 80%;
  top: 10%;
}
.sky .cloud:nth-child(4n) {
  transform: scale(4) rotateY(180deg);
  left: 60%;
  top: 20%;
}
.sky .cloud:nth-child(5n) {
  transform: scale(2.5);
  left: 20%;
  top: 30%;
}
.sky .cloud:nth-child(7n) {
  transform: scale(15) rotateY(180deg);
  left: 30%;
  top: 40%;
  opacity: 0.2;
}
.sky .cloud:nth-child(10n) {
  transform: scale(10);
  left: 5%;
  top: 50%;
}
.sky .cloud:nth-child(11n) {
  transform: scale(3.5);
  left: 55%;
  top: 45%;
}
.sky .cloud:nth-child(11n) {
  transform: scale(1.5);
  left: 70%;
  top: 70%;
}
.sky .cloud:nth-child(13n) {
  transform: scale(5);
  left: 95%;
  top: 5%;
}
.sky .cloud:nth-child(17n) {
  transform: scale(8) rotateY(180deg);
  left: 15%;
  top: 65%;
}
.sky .cloud:nth-child(23n) {
  transform: scale(4) rotateY(180deg);
  left: 85%;
  top: 75%;
}
.sky .cloud:nth-child(27n) {
  transform: scale(6);
  left: 55%;
  top: 95%;
}

@-webkit-keyframes ttb {
  0% {
    transform: translate3d(0, -100%, 0) rotateY();
  }
  100% {
    transform: translate3d(0, 150%, 0);
  }
}

@keyframes ttb {
  0% {
    transform: translate3d(0, -100%, 0) rotateY();
  }
  100% {
    transform: translate3d(0, 150%, 0);
  }
}



























/*Footer*/



#footer .footer{
    min-height: 200px;
    flex-direction: column;
    padding-bottom: 10px;
}
#footer h2{
    color: white;
    font-weight: 500;
    font-size: 1.7rem;
    letter-spacing: .1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
#footer h3{
  margin-left: 20px;
  color: white;
  font-weight: 200;
  font-size: 1.4rem;
  letter-spacing: 0rem;
  margin-top: 1px;
  margin-bottom: 10px;
}
#footer .social-icon{
    display: flex;
    width: auto;

}

#footer .social-item{
    padding: 1rem;
    margin :0.5rem;
}

#footer img{
    height: 100%;
    width: 45px;
    
    
    transition: .3s ease box-shadow;
}

#footer img:hover{
    box-shadow: 0px 0px 5px 0 white;
}
#footer p{
  color: #a3a3a3;;
}









/*keyframe*/
@keyframes hamburger_puls{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.4);
    }
}
@keyframes text_reveal_box{
50%{
    width: 100%;
    left: 0;
}
100%{
    width: 0;
    left: 100%
}    
}
@keyframes text_reveal{
    100%{
        color: white;
    }
}
@keyframes text_reveal_name{
    100%{
        color: crimson;
        font-weight: 500px;
    }
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: translateX(14) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

.wave {
    animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;        /* Change to speed up or slow down */
    animation-iteration-count: infinite;  /* Never stop waving :) */
    transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
    display: inline-block;
  }
/* End keyframe*/




/*Media for tablet*/

@media only screen and (min-width:768px){
    .cta{
        font-size: 2.5rem;
        padding: 20px 60px;
    }
    h1.skill-title{
        font-size: 6rem;
    }

    /*Hero section*/
    #hero h1{
        font-size: 10rem;
    }

    /* service section*/
    #skill .skill-bottom .skill-item{
        flex-basis: 45%;
        margin: 2.5%;
    }


    /*About me*/
   #about .about{
       flex-direction: row;
   }
   #about .col-left{
       width: 1100px;
       height: 380px;
       padding-left: 10px;
   }
   #about .about .col-left .about-img::after{
       left: -40px;
       top: 34px;
       height: 98%;
       width: 94%;
       border: 10px solid crimson;
   }
   #about .col-right{
       text-align: left;
       padding: 10px;
   }
   #about .col-right h1{
       text-align: left;
   }
    
    
}


/*Media quary for desktop*/
@media only screen and (min-width:1200px){
  figure img,
.img-bg {
  height: 420px;
  width: 420px;
}
#skill .skill-top{
    width: 600px;
        max-width: 0 auto;}

#header .hamburger{
    display: none;
}
#header .nav-list ul{
    position: initial;
    display: block;
    height: auto;
    width: fit-content;
    background-color: transparent;
}
#header .nav-list ul li{
    display: inline-block;
}
#header .nav-list ul li a{
    font-size: 1.8rem;
}
#header .nav-list ul a:after{
    display: none;
}
#experiance{
  margin-left: 100px;
}
#skill .skill-bottom .skill-item{
    flex-basis: 22% ;
    margin: 1.5%;
}
#hero h1{
 font-size: 4vh;
}
#hero h2{
    font-size: 2.5vh;
}
#hero h3{
    font-size: 6rem;
    
}

#hero{
  margin-top: 1px;
  
}
#hero .hero{
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 200px;
}
#hero .hero .left{
    width: auto;
    height: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    
    
}
#hero .hero .right{
    margin-top: 110px;
    width: 35%;
    
    
}



/* Skills*/


.skill{
    flex-direction: row;
}
.skill-left{
    margin-left: 200px;
}
.skill-right{
    margin-right: 250px;
    width: 800px;
    height: 200px;
 }
 .skill .skill-right p{
  font-size: 2.5rem;
}
.skill-left {
 width: 10%;
 margin-top: 10px;
 margin-left: 20%;
}


.container_write p {
    font-family: 'Montserrat',sans-serif;
    font-size: 4rem;
    padding: 1rem;
    
    letter-spacing: 0.1rem;
    text-align: center;
    overflow: hidden;
  }




.tools{
  margin-top: 20px;
}


 

 .title_exe{
     font-size: 3rem;
 }

.tools_logo .logo{
    width: 80%;
}




 .tech h1{
     font-size: 4rem;
 }
 .tech .tech_tools{
     margin-top: 100px;
     justify-content:space-evenly;
     width: 100%;
 }

 .tech_tools img{
  width: 90%;
}






.project_title h1{
  font-size: 4rem;
}



.project_main_container{
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

 .project_container{
  flex-direction: row;
}


.d-flex{
  width: 350px;
}
.contact_img-box{
  width: 50%;
}

















 .code_head{
    text-align: center;
    margin-top: 100px;
    font-size: 3.5rem;
    
}
.code_head h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
.coding_page{
    height: auto;
    margin-left: 650px;
    margin-top: 100px;
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}




.skill-bottom{
    flex-direction: row;
}
.skill-item{
    flex-basis: 50%;
    height: 300px;
}



#footer h3{
  
  color: white;
  font-weight: 200;
  font-size: 1.8rem;
  margin-top: 1px;
  margin-bottom: 10px;
}
.top-social-icon.scrolled {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  flex-direction: column;
}

.top-social-icon.scrolled .top-social-item {
  margin: 10px 0; /* Space between icons in vertical mode */
}
   
}