/* Global Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  color: #ffffff;
  background-color: #00034b;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}

::selection {
  background: #060ca3; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #060ca3; /* Gecko Browsers */
}

a {
  text-decoration: none;
}
button {
  /* padding: 2rem 6rem;
    background: #4c6e97;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: background 0.5s ease-in-out; */
}
button:hover {
  /* background: #27394e; */
}
/* Stars in background */

section {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#stars {
  width: 1.3px;
  height: 1.3px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  box-shadow: 1690px 93px #a5a6a7, 462px 1803px #d4d8db, 457px 346px #969595,
    1282px 200px #a2c3e0, 1096px 1840px #e0a2a2, 129px 1415px #a2c3e0,
    1973px 1046px #e0a2a2, 481px 143px #a2c3e0, 1329px 1261px #e0a2a2,
    1409px 1492px #a2c3e0, 500px 1488px #e0a2a2, 752px 1081px #a2c3e0,
    476px 517px #e0a2a2, 691px 1652px #a2c3e0, 1689px 470px #e0a2a2,
    892px 1229px #a2c3e0, 1593px 513px #e0a2a2, 1522px 339px #a2c3e0,
    1167px 1136px #e0a2a2, 899px 1208px #a2c3e0, 1985px 1849px #e0a2a2,
    1728px 1004px #a2c3e0, 852px 931px #e0a2a2, 1004px 1123px #a2c3e0,
    1051px 177px #e0a2a2, 922px 1704px #a2c3e0, 604px 1849px #e0a2a2,
    1783px 340px #a2c3e0, 726px 785px #e0a2a2, 1805px 260px #a2c3e0,
    957px 1966px #e0a2a2, 152px 1063px #a2c3e0, 1297px 1668px #e0a2a2,
    312px 1993px #a2c3e0, 355px 1063px #e0a2a2, 1850px 4px #a2c3e0,
    1885px 1649px #e0a2a2, 432px 1953px #a2c3e0, 1872px 546px #e0a2a2,
    1655px 573px #a2c3e0, 33px 1341px #e0a2a2, 22px 282px #a2c3e0,
    1008px 88px #e0a2a2, 613px 554px #a2c3e0, 1698px 572px #e0a2a2,
    266px 936px #a2c3e0, 1042px 594px #e0a2a2, 421px 397px #a2c3e0,
    896px 508px #e0a2a2, 905px 451px #a2c3e0, 443px 1481px #e0a2a2,
    1871px 27px #a2c3e0, 155px 496px #e0a2a2, 112px 1753px #a2c3e0,
    199px 1490px #e0a2a2, 1586px 333px #a2c3e0, 1801px 161px #e0a2a2,
    992px 1793px #a2c3e0, 1610px 1643px #e0a2a2, 1944px 1995px #a2c3e0,
    1225px 464px #e0a2a2, 1905px 1141px #a2c3e0, 558px 279px #e0a2a2,
    965px 1280px #a2c3e0, 1803px 238px #e0a2a2, 148px 313px #a2c3e0,
    445px 525px #e0a2a2, 279px 1381px #a2c3e0, 490px 1639px #e0a2a2,
    1422px 355px #a2c3e0, 1822px 1441px #e0a2a2, 678px 1459px #a2c3e0,
    1940px 1957px #e0a2a2, 1752px 256px #a2c3e0, 79px 791px #e0a2a2,
    1609px 1964px #a2c3e0, 643px 358px #e0a2a2, 617px 1556px #a2c3e0,
    763px 975px #e0a2a2, 133px 1438px #a2c3e0, 1041px 1263px #e0a2a2,
    294px 44px #a2c3e0, 882px 1609px #e0a2a2, 673px 420px #a2c3e0,
    282px 963px #e0a2a2, 573px 723px #a2c3e0, 496px 1978px #e0a2a2,
    746px 1690px #a2c3e0, 935px 1556px #e0a2a2, 981px 1094px #a2c3e0,
    1908px 1913px #e0a2a2, 1744px 989px #a2c3e0, 1274px 111px #e0a2a2,
    1296px 1467px #a2c3e0, 312px 1311px #e0a2a2, 1653px 876px #a2c3e0,
    691px 1415px #e0a2a2, 1057px 877px #a2c3e0, 190px 1630px #e0a2a2,
    325px 1823px #a2c3e0, 1788px 1985px #e0a2a2, 535px 1700px #a2c3e0,
    162px 191px #e0a2a2, 1240px 1638px #a2c3e0, 1261px 423px #e0a2a2,
    1875px 1170px #a2c3e0, 1222px 29px #e0a2a2, 83px 624px #a2c3e0,
    1180px 1425px #e0a2a2, 672px 1358px #a2c3e0, 579px 260px #e0a2a2,
    1275px 148px #a2c3e0, 1909px 191px #e0a2a2, 186px 1608px #a2c3e0,
    403px 226px #e0a2a2, 1787px 519px #a2c3e0, 144px 348px #e0a2a2,
    607px 1272px #a2c3e0, 125px 552px #e0a2a2, 372px 1663px #a2c3e0,
    1915px 581px #e0a2a2, 1780px 351px #a2c3e0, 1955px 1798px #e0a2a2,
    1748px 1156px #a2c3e0, 533px 509px #e0a2a2, 656px 44px #a2c3e0,
    1192px 903px #e0a2a2, 831px 1249px #a2c3e0, 1402px 1926px #e0a2a2,
    588px 1268px #a2c3e0, 1632px 262px #e0a2a2, 455px 196px #a2c3e0,
    319px 1034px #e0a2a2, 1311px 1412px #a2c3e0, 400px 157px #e0a2a2,
    1105px 69px #a2c3e0, 174px 695px #e0a2a2, 62px 1282px #a2c3e0,
    814px 545px #e0a2a2, 1369px 586px #a2c3e0, 1837px 427px #e0a2a2,
    1296px 554px #a2c3e0, 1450px 1203px #e0a2a2, 986px 897px #a2c3e0,
    1207px 389px #e0a2a2, 1401px 941px #a2c3e0, 743px 1423px #e0a2a2,
    1450px 469px #a2c3e0, 420px 1355px #e0a2a2, 1450px 1359px #a2c3e0,
    1843px 796px #e0a2a2, 1579px 765px #a2c3e0, 1416px 1045px #e0a2a2,
    437px 1860px #a2c3e0, 619px 815px #e0a2a2, 1460px 1653px #a2c3e0,
    1091px 345px #e0a2a2, 152px 284px #a2c3e0, 1566px 1901px #e0a2a2,
    288px 1644px #a2c3e0, 1893px 1768px #e0a2a2, 1095px 1663px #a2c3e0,
    467px 1490px #e0a2a2, 125px 1974px #a2c3e0, 291px 1450px #e0a2a2,
    60px 135px #a2c3e0, 1566px 1361px #e0a2a2, 529px 1808px #a2c3e0,
    877px 1207px #e0a2a2, 1794px 1264px #a2c3e0, 1851px 104px #e0a2a2,
    498px 1849px #a2c3e0, 1181px 867px #e0a2a2, 1938px 426px #a2c3e0,
    214px 599px #e0a2a2, 1400px 1486px #a2c3e0, 514px 548px #e0a2a2,
    1230px 781px #a2c3e0, 196px 1276px #e0a2a2, 1986px 930px #a2c3e0,
    292px 1258px #e0a2a2, 1930px 879px #a2c3e0, 1259px 220px #e0a2a2,
    391px 1422px #a2c3e0, 1635px 1758px #e0a2a2, 1554px 1493px #a2c3e0,
    779px 1808px #e0a2a2, 1497px 740px #a2c3e0, 1937px 1957px #e0a2a2,
    769px 287px #a2c3e0, 1957px 1239px #e0a2a2, 847px 629px #a2c3e0,
    1949px 295px #e0a2a2, 205px 962px #a2c3e0, 1569px 1744px #e0a2a2,
    1550px 1599px #a2c3e0, 609px 655px #e0a2a2, 1626px 616px #a2c3e0,
    1060px 1966px #e0a2a2, 353px 899px #a2c3e0, 1287px 1471px #e0a2a2,
    354px 1074px #a2c3e0, 1731px 87px #e0a2a2, 1079px 1616px #a2c3e0,
    1048px 1229px #e0a2a2, 1084px 1101px #a2c3e0, 1743px 315px #e0a2a2,
    685px 1460px #a2c3e0, 451px 619px #e0a2a2, 1842px 235px #a2c3e0,
    1144px 525px #e0a2a2, 807px 36px #a2c3e0, 1900px 1762px #e0a2a2,
    1327px 1938px #a2c3e0, 174px 785px #e0a2a2, 1116px 1423px #a2c3e0,
    99px 1821px #e0a2a2, 810px 1594px #a2c3e0, 396px 895px #e0a2a2,
    1462px 259px #a2c3e0, 1131px 1661px #e0a2a2, 106px 276px #a2c3e0,
    1216px 247px #e0a2a2, 1705px 3px #a2c3e0, 266px 1090px #e0a2a2,
    1716px 177px #a2c3e0, 1529px 226px #e0a2a2, 311px 553px #a2c3e0,
    814px 910px #e0a2a2, 1983px 978px #a2c3e0, 1103px 506px #e0a2a2,
    1421px 1006px #a2c3e0, 1787px 843px #e0a2a2, 1882px 704px #a2c3e0,
    820px 1625px #e0a2a2, 1529px 441px #a2c3e0, 1181px 1056px #e0a2a2,
    312px 383px #a2c3e0, 416px 466px #e0a2a2, 520px 402px #a2c3e0,
    1948px 224px #e0a2a2, 922px 1188px #a2c3e0, 1419px 35px #e0a2a2,
    1736px 359px #a2c3e0, 163px 1117px #e0a2a2, 174px 1786px #a2c3e0,
    30px 900px #e0a2a2, 1336px 475px #a2c3e0, 406px 1219px #e0a2a2,
    1513px 344px #a2c3e0, 1208px 849px #e0a2a2, 1229px 570px #a2c3e0,
    677px 1907px #e0a2a2, 151px 1254px #a2c3e0, 654px 1831px #e0a2a2,
    1100px 572px #a2c3e0, 58px 343px #e0a2a2, 1824px 519px #a2c3e0,
    1330px 478px #e0a2a2, 319px 564px #a2c3e0, 1058px 992px #e0a2a2,
    1071px 614px #a2c3e0, 1428px 1728px #e0a2a2, 1415px 589px #a2c3e0,
    508px 604px #e0a2a2, 943px 197px #a2c3e0, 1502px 1327px #e0a2a2,
    1869px 894px #a2c3e0, 601px 823px #e0a2a2, 1144px 1659px #a2c3e0,
    1489px 1183px #e0a2a2, 775px 226px #a2c3e0, 1626px 629px #e0a2a2,
    33px 645px #a2c3e0, 1388px 909px #e0a2a2, 58px 873px #a2c3e0,
    1522px 767px #e0a2a2, 421px 1996px #a2c3e0, 258px 844px #e0a2a2,
    1632px 1529px #a2c3e0, 1382px 229px #e0a2a2, 1090px 1142px #a2c3e0,
    339px 991px #e0a2a2, 590px 1216px #a2c3e0, 1825px 1741px #e0a2a2,
    1852px 488px #a2c3e0, 1703px 1317px #e0a2a2, 461px 914px #a2c3e0,
    1948px 1238px #e0a2a2, 185px 1244px #a2c3e0, 1309px 9px #e0a2a2,
    258px 703px #a2c3e0, 1065px 246px #e0a2a2, 1964px 1251px #a2c3e0,
    1568px 1768px #e0a2a2, 1819px 1618px #a2c3e0, 1569px 91px #e0a2a2,
    1392px 1730px #a2c3e0, 222px 710px #e0a2a2, 436px 1039px #a2c3e0;
  animation: animStar 40s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;

  background: transparent;
  box-shadow: 1690px 93px #a2c3e0, 462px 1803px #a2c3e0, 457px 346px #e0a2a2,
    1282px 200px #a2c3e0, 1096px 1840px #e0a2a2, 129px 1415px #a2c3e0,
    1973px 1046px #e0a2a2, 481px 143px #a2c3e0, 1329px 1261px #e0a2a2,
    1409px 1492px #a2c3e0, 500px 1488px #e0a2a2, 752px 1081px #a2c3e0,
    476px 517px #e0a2a2, 691px 1652px #a2c3e0, 1689px 470px #e0a2a2,
    892px 1229px #a2c3e0, 1593px 513px #e0a2a2, 1522px 339px #a2c3e0,
    1167px 1136px #e0a2a2, 899px 1208px #a2c3e0, 1985px 1849px #e0a2a2,
    1728px 1004px #a2c3e0, 852px 931px #e0a2a2, 1004px 1123px #a2c3e0,
    1051px 177px #e0a2a2, 922px 1704px #a2c3e0, 604px 1849px #e0a2a2,
    1783px 340px #a2c3e0, 726px 785px #e0a2a2, 1805px 260px #a2c3e0,
    957px 1966px #e0a2a2, 152px 1063px #a2c3e0, 1297px 1668px #e0a2a2,
    312px 1993px #a2c3e0, 355px 1063px #e0a2a2, 1850px 4px #a2c3e0,
    1885px 1649px #e0a2a2, 432px 1953px #a2c3e0, 1872px 546px #e0a2a2,
    1655px 573px #a2c3e0, 33px 1341px #e0a2a2, 22px 282px #a2c3e0,
    1008px 88px #e0a2a2, 613px 554px #a2c3e0, 1698px 572px #e0a2a2,
    266px 936px #a2c3e0, 1042px 594px #e0a2a2, 421px 397px #a2c3e0,
    896px 508px #e0a2a2, 905px 451px #a2c3e0, 443px 1481px #e0a2a2,
    1871px 27px #a2c3e0, 155px 496px #e0a2a2, 112px 1753px #a2c3e0,
    199px 1490px #e0a2a2, 1586px 333px #a2c3e0, 1801px 161px #e0a2a2,
    992px 1793px #a2c3e0, 1610px 1643px #e0a2a2, 1944px 1995px #a2c3e0,
    1225px 464px #e0a2a2, 1905px 1141px #a2c3e0, 558px 279px #e0a2a2,
    965px 1280px #a2c3e0, 1803px 238px #e0a2a2, 148px 313px #a2c3e0,
    445px 525px #e0a2a2, 279px 1381px #a2c3e0, 490px 1639px #e0a2a2,
    1422px 355px #a2c3e0, 1822px 1441px #e0a2a2, 678px 1459px #a2c3e0,
    1940px 1957px #e0a2a2, 1752px 256px #a2c3e0, 79px 791px #e0a2a2,
    1609px 1964px #a2c3e0, 643px 358px #e0a2a2, 617px 1556px #a2c3e0,
    763px 975px #e0a2a2, 133px 1438px #a2c3e0, 1041px 1263px #e0a2a2,
    294px 44px #a2c3e0, 882px 1609px #e0a2a2, 673px 420px #a2c3e0,
    282px 963px #e0a2a2, 573px 723px #a2c3e0, 496px 1978px #e0a2a2,
    746px 1690px #a2c3e0, 935px 1556px #e0a2a2, 981px 1094px #a2c3e0,
    1908px 1913px #e0a2a2, 1744px 989px #a2c3e0, 1274px 111px #e0a2a2,
    1296px 1467px #a2c3e0, 312px 1311px #e0a2a2, 1653px 876px #a2c3e0,
    691px 1415px #e0a2a2, 1057px 877px #a2c3e0, 190px 1630px #e0a2a2,
    325px 1823px #a2c3e0, 1788px 1985px #e0a2a2, 535px 1700px #a2c3e0,
    162px 191px #e0a2a2, 1240px 1638px #a2c3e0, 1261px 423px #e0a2a2,
    1875px 1170px #a2c3e0, 1222px 29px #e0a2a2, 83px 624px #a2c3e0,
    1180px 1425px #e0a2a2, 672px 1358px #a2c3e0, 579px 260px #e0a2a2,
    1275px 148px #a2c3e0, 1909px 191px #e0a2a2, 186px 1608px #a2c3e0,
    403px 226px #e0a2a2, 1787px 519px #a2c3e0, 144px 348px #e0a2a2,
    607px 1272px #a2c3e0, 125px 552px #e0a2a2, 372px 1663px #a2c3e0,
    1915px 581px #e0a2a2, 1780px 351px #a2c3e0, 1955px 1798px #e0a2a2,
    1748px 1156px #a2c3e0, 533px 509px #e0a2a2, 656px 44px #a2c3e0,
    1192px 903px #e0a2a2, 831px 1249px #a2c3e0, 1402px 1926px #e0a2a2,
    588px 1268px #a2c3e0, 1632px 262px #e0a2a2, 455px 196px #a2c3e0,
    319px 1034px #e0a2a2, 1311px 1412px #a2c3e0, 400px 157px #e0a2a2,
    1105px 69px #a2c3e0, 174px 695px #e0a2a2, 62px 1282px #a2c3e0,
    814px 545px #e0a2a2, 1369px 586px #a2c3e0, 1837px 427px #e0a2a2,
    1296px 554px #a2c3e0, 1450px 1203px #e0a2a2, 986px 897px #a2c3e0,
    1207px 389px #e0a2a2, 1401px 941px #a2c3e0, 743px 1423px #e0a2a2,
    1450px 469px #a2c3e0, 420px 1355px #e0a2a2, 1450px 1359px #a2c3e0,
    1843px 796px #e0a2a2, 1579px 765px #a2c3e0, 1416px 1045px #e0a2a2,
    437px 1860px #a2c3e0, 619px 815px #e0a2a2, 1460px 1653px #a2c3e0,
    1091px 345px #e0a2a2, 152px 284px #a2c3e0, 1566px 1901px #e0a2a2,
    288px 1644px #a2c3e0, 1893px 1768px #e0a2a2, 1095px 1663px #a2c3e0,
    467px 1490px #e0a2a2, 125px 1974px #a2c3e0, 291px 1450px #e0a2a2,
    60px 135px #a2c3e0, 1566px 1361px #e0a2a2, 529px 1808px #a2c3e0,
    877px 1207px #e0a2a2, 1794px 1264px #a2c3e0, 1851px 104px #e0a2a2,
    498px 1849px #a2c3e0, 1181px 867px #e0a2a2, 1938px 426px #a2c3e0,
    214px 599px #e0a2a2, 1400px 1486px #a2c3e0, 514px 548px #e0a2a2,
    1230px 781px #a2c3e0, 196px 1276px #e0a2a2, 1986px 930px #a2c3e0,
    292px 1258px #e0a2a2, 1930px 879px #a2c3e0, 1259px 220px #e0a2a2,
    391px 1422px #a2c3e0, 1635px 1758px #e0a2a2, 1554px 1493px #a2c3e0,
    779px 1808px #e0a2a2, 1497px 740px #a2c3e0, 1937px 1957px #e0a2a2,
    769px 287px #a2c3e0, 1957px 1239px #e0a2a2, 847px 629px #a2c3e0,
    1949px 295px #e0a2a2, 205px 962px #a2c3e0, 1569px 1744px #e0a2a2,
    1550px 1599px #a2c3e0, 609px 655px #e0a2a2, 1626px 616px #a2c3e0,
    1060px 1966px #e0a2a2, 353px 899px #a2c3e0, 1287px 1471px #e0a2a2,
    354px 1074px #a2c3e0, 1731px 87px #e0a2a2, 1079px 1616px #a2c3e0,
    1048px 1229px #e0a2a2, 1084px 1101px #a2c3e0, 1743px 315px #e0a2a2,
    685px 1460px #a2c3e0, 451px 619px #e0a2a2, 1842px 235px #a2c3e0,
    1144px 525px #e0a2a2, 807px 36px #a2c3e0, 1900px 1762px #e0a2a2,
    1327px 1938px #a2c3e0, 174px 785px #e0a2a2, 1116px 1423px #a2c3e0,
    99px 1821px #e0a2a2, 810px 1594px #a2c3e0, 396px 895px #e0a2a2,
    1462px 259px #a2c3e0, 1131px 1661px #e0a2a2, 106px 276px #a2c3e0,
    1216px 247px #e0a2a2, 1705px 3px #a2c3e0, 266px 1090px #e0a2a2,
    1716px 177px #a2c3e0, 1529px 226px #e0a2a2, 311px 553px #a2c3e0,
    814px 910px #e0a2a2, 1983px 978px #a2c3e0, 1103px 506px #e0a2a2,
    1421px 1006px #a2c3e0, 1787px 843px #e0a2a2, 1882px 704px #a2c3e0,
    820px 1625px #e0a2a2, 1529px 441px #a2c3e0, 1181px 1056px #e0a2a2,
    312px 383px #a2c3e0, 416px 466px #e0a2a2, 520px 402px #a2c3e0,
    1948px 224px #e0a2a2, 922px 1188px #a2c3e0, 1419px 35px #e0a2a2,
    1736px 359px #a2c3e0, 163px 1117px #e0a2a2, 174px 1786px #a2c3e0,
    30px 900px #e0a2a2, 1336px 475px #a2c3e0, 406px 1219px #e0a2a2,
    1513px 344px #a2c3e0, 1208px 849px #e0a2a2, 1229px 570px #a2c3e0,
    677px 1907px #e0a2a2, 151px 1254px #a2c3e0, 654px 1831px #e0a2a2,
    1100px 572px #a2c3e0, 58px 343px #e0a2a2, 1824px 519px #a2c3e0,
    1330px 478px #e0a2a2, 319px 564px #a2c3e0, 1058px 992px #e0a2a2,
    1071px 614px #a2c3e0, 1428px 1728px #e0a2a2, 1415px 589px #a2c3e0,
    508px 604px #e0a2a2, 943px 197px #a2c3e0, 1502px 1327px #e0a2a2,
    1869px 894px #a2c3e0, 601px 823px #e0a2a2, 1144px 1659px #a2c3e0,
    1489px 1183px #e0a2a2, 775px 226px #a2c3e0, 1626px 629px #e0a2a2,
    33px 645px #a2c3e0, 1388px 909px #e0a2a2, 58px 873px #a2c3e0,
    1522px 767px #e0a2a2, 421px 1996px #a2c3e0, 258px 844px #e0a2a2,
    1632px 1529px #a2c3e0, 1382px 229px #e0a2a2, 1090px 1142px #a2c3e0,
    339px 991px #e0a2a2, 590px 1216px #a2c3e0, 1825px 1741px #e0a2a2,
    1852px 488px #a2c3e0, 1703px 1317px #e0a2a2, 461px 914px #a2c3e0,
    1948px 1238px #e0a2a2, 185px 1244px #a2c3e0, 1309px 9px #e0a2a2,
    258px 703px #a2c3e0, 1065px 246px #e0a2a2, 1964px 1251px #a2c3e0,
    1568px 1768px #e0a2a2, 1819px 1618px #a2c3e0, 1569px 91px #e0a2a2,
    1392px 1730px #a2c3e0, 222px 710px #e0a2a2, 436px 1039px #a2c3e0;
}

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

/* Nav Section With HERO */
.main-head {
}

nav {
  background: #00034b;
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem, 1rem;
  flex-wrap: wrap;
}
#logoaf {
  margin-top: 2rem;
}
.hero {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.hero h1 {
  font-size: 8rem;
  font-weight: 800;
  max-width: 90rem;
}
.hero img {
  margin-left: 2rem;
  margin-right: 2rem;
}
.head-h1 {
  margin-bottom: 4rem;
}

#typing-anim::before {
  content: "";
  animation: DevDes infinite 5.3s;
  animation-timing-function: linear;
  color: #ffda93;
}
@keyframes DevDes {
  0% {
    content: "Developer";
  }
  100% {
    content: "Designer";
  }
}

/* About Section */

.about-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}

.svg {
  width: 300px;
  position: absolute;
  /* top: -40px;
  left: -30px; */
  pointer-events: none;
}
.about-divs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20rem;
  margin-bottom: 20rem;
  flex-wrap: wrap;
}
#about-h1 {
  margin-right: 2rem;
  max-width: 30rem;
  font-size: 3rem;
  font-weight: 600;
  color: #fbd896;
}
#about-p {
  max-width: 60rem;
  font-size: 1.9rem;
  font-weight: 500;
  color: #e2e2e2;
  margin-left: 1rem;
}

#first-cir {
  position: relative;
  right: 40%;
  animation: rotate 20s infinite linear;
}
#second-cir {
  position: relative;
  left: 40%;
  animation: rotate2 20s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg) translate(-90px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(-90px) rotate(-360deg);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(360deg) translate(-90px) rotate(-360deg);
  }
  to {
    transform: rotate(0deg) translate(-90px) rotate(0deg);
  }
}
/* Education Section */

.edu-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.edu-divs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin-right: 9rem;
}
#edu-h1 {
  margin-right: 2rem;
  max-width: 30rem;
  font-size: 3rem;
  font-weight: 600;
  color: #fbd896;
  margin-left: 2rem;
  margin-right: 2rem;
}
/* #edu-h1 h2 {
  background: linear-gradient(#e2e2e2, #ffda93);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
} */
#edu-p {
  max-width: 60rem;
  font-size: 1.9rem;
  font-weight: 500;
  color: #e2e2e2;
  margin-left: 2rem;
  margin-right: 2rem;
}

#edu-second-cir {
  position: relative;
  left: 40%;
  /* animation: rotate 20s infinite linear; */
}

#gra-hat {
  position: relative;
  margin-right: 6rem;
  z-index: 100;
}
#img-cir {
  position: relative;
  /* z-index: 1; */
}
#img-hat {
  position: absolute;
  top: -41%;
  left: -68%;
  animation: hatanim 9s infinite linear;
  animation-direction: alternate;
}

@keyframes hatanim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(18deg);
  }
}
#ksu {
  color: #fbd896;
  font-size: 2.4rem;
  font-weight: 600;
}
#year {
  color: #fbd896;
}
#bach {
  font-weight: 600;
  font-size: 2.2rem;
}

/* Experince Section */

.tab-pane {
  display: none;
}

.actived {
  display: block;
  transition: all 1s ease;
}

.exp-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.exp-sec h2 {
  font-size: 3.8rem;
  font-weight: 700;
  color: #fbd896;
  letter-spacing: 10px;
}
#exp-title {
  margin-bottom: 4rem;
}

.exp-cir {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.exp-sec a:link {
  display: block;
}

#cir-ex {
  margin-bottom: 2rem;
  margin-right: 2rem;
  margin-left: 2rem;
  transition: transform 0.2s;
  cursor: pointer;
  position: relative;
  z-index: -1;
}

.al {
  transition: all 0.4s ease;
  background-color: transparent;
  cursor: pointer;
  width: 166px;
  height: 171px;
  font-size: 2rem;
  font-weight: 500;
  color: #ffff;
  opacity: 0.4;
}

.al:hover {
  transform: scale(1.1);
  opacity: 1;
  transition: all 0.3s ease;
}
.clic {
  opacity: 1;
}
.pp {
  background-color: #0007b7;
  transition: all 0.4s ease;
}
#blockk {
  display: block;
  margin-top: 7rem;
  text-align: center;
  line-height: 2.2;
}

#company {
  color: #ffda93;
  font-size: 2.9rem;
  font-weight: 600;
}
#job-title {
  color: #e2e2e2;
  font-size: 2.3rem;
  font-weight: 600;
}
#detils {
  color: #e2e2e2;
  font-size: 1.8rem;
  font-weight: 400;
}
#years {
  color: #ffda93;
  font-size: 2.3rem;
  font-weight: 500;
}

/* Development & Design section */

.Dev-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
#dev-cont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 15rem;
  position: relative;
}
#dev-ele {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 75rem;
  justify-content: space-around;
}

#img-div {
  padding: 2rem;
  width: 350px;
}
#dev-title {
  font-size: 7rem;
  color: #fbd896;
  font-weight: bold;
}
#dev-title:hover {
}

#h2-dev {
  font-size: 2.8rem;
  font-weight: 500;
  color: #ffda93;
  max-width: 30rem;
  margin-right: 3rem;
}
#dev-ti {
  font-size: 2.2rem;
  font-weight: 500;
  color: #ffffff;
}
#dev-p {
  font-size: 1.3rem;
  font-weight: 300;
  color: #ffffff;
}
#right-cir2 {
  position: absolute;
  left: 140%;
  bottom: -45%;
  animation: rotate 20s infinite linear;
}
#left-cir2 {
  position: absolute;
  left: -52%;
  bottom: 100%;
  animation: rotate2 20s infinite linear;
}

/* Technology Section */

.tech-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#tech-cont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 9rem;
  position: relative;
  justify-content: space-evenly;
  align-items: center;
  min-width: 60rem;
}
.tech-h3 h3 {
  font-size: 2.3rem;
  font-weight: 300;
  color: #e6e6e6;
}

.tech-h3 h3:hover {
  cursor: pointer;
  transition: all 0.5s ease;
  background-color: #0007b7;
}
.selected {
  background-color: #0007b7;
}
.techimgActive {
  display: flex;
  transition: all 1s ease;
}
.techimgNotActive {
  display: none;
  transition: all 1s ease;
}
.tech-imgs {
  /* display: flex; */
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 7rem;
  position: relative;
  justify-content: center;
  align-items: center;
  min-width: 65rem;
  min-height: 9rem;
  transition: all 1s ease-in-out;
  z-index: 10;
}
.tech-imgs div {
  margin-left: 3rem;
  margin-right: 3rem;
  margin-bottom: 4rem;
  transition: all 1s ease;
}
.tech-imgs p {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  color: #e6e6e6;
  font-size: 1.3rem;
  font-weight: 200;
  flex-wrap: wrap;
}
#right-cir3 {
  position: absolute;
  right: 7%;
  bottom: 13%;
  z-index: 1;
  animation: rotate 20s infinite linear;
}
#left-cir3 {
  position: absolute;
  left: 7%;
  top: 13%;
  z-index: 3;
  animation: rotate 20s infinite linear;
}

/* Project Section */

.proj-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#porj {
  background-color: #000580;
  min-width: 970px;
  min-height: 700px;
  /* max-width: 970px;
  max-height: 700px; */
  position: relative;
  margin-top: 4rem;
  transition: transform 0.2s;
}

#porj:hover {
  transform: scale(1.1);
}
#main-title {
  max-width: 230px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-right: 3rem;
  position: absolute;
  top: 10%;
  right: -20%;
  z-index: 10;
  pointer-events: all;
}
#main-title p {
  font-size: 1.5rem;
  font-weight: 400;
  color: #e6e6e6;
}
#main-title h3 {
  font-size: 2.3rem;
  font-weight: 600;
  color: #e6e6e6;
}

#main-title a {
  font-size: 2.1rem;
  font-weight: 300;
  color: #fbd896;
  letter-spacing: 7px;
  text-decoration: underline 0.5px;
}

#main-title a:hover {
  background-color: #fbd896;
  color: #0007b7;
  text-decoration: none;
  font-weight: 400;
}
#proj-main {
  position: absolute;
  max-width: 820px;
  max-height: 590px;
  bottom: 0%;
  right: 50%;
  transform: translateX(50%);
  z-index: 1;
}
#proj-img {
  max-width: 820px;
  max-height: 590px;
}

/* More Section */

.More-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
#more-title {
  font-size: 4.8rem;
  font-weight: 500;
  color: #c4c4c4;
}
#more-cards {
  display: flex;
  flex-direction: row;
  min-width: 641px;
  min-height: 207px;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  flex-wrap: wrap;
  text-align: center;
}
#more-cards div {
  background-color: rgba(0, 2, 47, 1);
  margin-left: 2rem;
  margin-right: 2rem;
  min-width: 212px;
  min-height: 207px;
  border-radius: 10px;
  position: relative;
}
#more-cards img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  transition: all 0.5s ease;
  cursor: pointer;
}
#more-cards img:hover {
  opacity: 1;
  font-size: 1.2rem;
}

#more-cards p {
  font-size: 1.2rem;
  color: #e6e6e6;
  font-weight: 200;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
}

/* End Section */

.End-sec {
  background: radial-gradient(50% 50% at 50% 50%, #060ca3 0%, #0007b7 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#end-cir {
  position: relative;

  animation: Up 3s infinite linear;
  animation-direction: alternate;
}
@keyframes Up {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
#end-cir:hover {
  transform: scale(1.2);
}

#end-cir2 {
  border-radius: 330px;
  box-shadow: 1px 0px 66px 11px rgba(0, 0, 0, 0.6);
}

#end-title {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 5.8rem;
  font-weight: 600;
  color: #ffffff;
  width: 100%;
}
#end-title2 {
  color: #ffda93;
}
#end-btn {
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3rem;
  font-weight: 400;
  color: #e6e6e6;
  margin-top: 4rem;
}
#end-btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background-color: #0007b7;
  z-index: -10;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
#end-btn:hover::after {
  background-color: #0007b7;
  height: 100%;
}

#end-cards {
  display: flex;
  flex-direction: row;
  margin-top: 8rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#end-cards div {
  margin-left: 2rem;
  margin-right: 2rem;
}
#end-cards img {
  opacity: 0.6;
  transition: all 0.5s ease;
}
#end-cards img:hover {
  opacity: 1;
}
#footer-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 3%;
  left: 5%;
  font-size: 1.1rem;
  flex-wrap: wrap;
}
#red-heart {
  width: 9px;
  height: 9px;
}
#mask {
  width: 15px;
  height: 11px;
}

/* Contact Section */

.cont-sec {
  background: radial-gradient(50% 50% at 50% 50%, #010225 0%, #00034b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#cont-info {
  font-size: 2.6rem;
  font-weight: 600;
  color: #e6e6e6;
  margin-right: 60rem;
  margin-top: 10rem;
}
#cont-info span {
  color: #ffda93;
}
#cont-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 700px;
  max-width: 700px;
  min-height: 606px;
  margin-top: 10rem;
}

#form-div {
  position: relative;
  z-index: 10;
}
#name-cont {
  width: 310px;
  height: 55px;
  background-color: transparent;
  margin: 1rem;
  border: #c4c4c4 1px solid;
  color: #ffff;
  font-size: 1.5rem;
  text-align: center;
}
#email-cont {
  width: 310px;
  height: 55px;
  background-color: transparent;
  margin: 1rem;
  border: #c4c4c4 1px solid;
  color: #ffff;
  font-size: 1.5rem;
  text-align: center;
}

#message-cont {
  width: 700px;
  height: 195px;
  background-color: transparent;
  border: #c4c4c4 1px solid;
  vertical-align: text-top;
  color: #ffff;
  font-size: 1.7rem;
  text-align: center;
}
#sub-btn {
  width: 20%;
  height: 15%;
  margin: 2rem;
}
input::placeholder {
  color: #a5a6a7;
  font-size: 1.4rem;
  text-align: center;
}
#sub-btn {
  background-color: transparent;
  border: none;
  font-size: 2.3rem;
  font-weight: 500;
  color: #cccccc;
  letter-spacing: 8px;
  cursor: pointer;
}

#sub-btn:hover {
  background-color: #0007b7;
}

/* Mobile  Query */
@media screen and (max-width: 1140px) {
  .edu-divs {
    margin-right: 3rem;
  }

  #right-cir2 {
    left: 90%;
    bottom: -15%;
    z-index: -1;
  }
  #left-cir2 {
    left: 11%;
    bottom: 140%;
    z-index: -1;
  }
  #porj {
    min-width: 870px;
    min-height: 620px;
  }
  #main-title {
    right: -14%;
  }

  #right-cir3 {
    z-index: -1;
  }
  #left-cir3 {
    z-index: -1;
  }
  #more-title {
    font-size: 4rem;
    text-align: center;
  }
  #end-title {
    font-size: 5rem;
  }
  #dev-title {
    font-size: 3.5rem;
    margin-top: 1rem;
  }
  #dev-cont {
    flex-direction: column;
  }
  #h2-dev {
    max-width: 68rem;
  }
  #cont-info {
    margin-right: 0rem;
  }
}
@media screen and (max-width: 932px) {
  html {
    font-size: 48%;
  }
  #dev-ele {
    max-width: 78rem;
    justify-content: center;
  }
  #img-div {
    width: 140px;
  }
  #porj {
    min-width: 770px;
    min-height: 520px;
  }
  #proj-main {
    max-width: 720px;
    max-height: 490px;
  }
  #proj-img {
    max-width: 720px;
    max-height: 490px;
  }
  #main-title {
    right: -14%;
    max-width: 190px;
  }
  #main-title h3 {
    font-size: 2rem;
  }
  .al {
    font-size: 1.8rem;
    width: 154px;
  }
  .icons img {
    width: 75px;
    height: 75px;
  }
}

@media screen and (max-width: 860px) {
  html {
    font-size: 45%;
  }
  #main-title h3 {
    font-size: 1.9rem;
  }
  #main-title {
    right: -10%;
    max-width: 170px;
  }
  #more-cards div {
    min-width: 170px;
    min-height: 170px;
  }
  #more-img {
    width: 95px;
    height: 95px;
  }
  #porj {
    min-width: 680px;
    min-height: 511px;
  }
  #proj-main {
    max-width: 620px;
    max-height: 478px;
  }
  #proj-img {
    max-width: 620px;
    max-height: 478px;
  }
}
@media screen and (max-width: 738px) {
  .al {
    width: 127px;
    height: 136px;
  }
  #cir-ex {
    width: 88px;
    height: 88px;
  }
  .exp-cir {
    margin-bottom: 7rem;
  }
  .icons img {
    width: 50px;
    height: 50px;
  }
  #cir-dot {
    width: 30px;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 662px) {
  html {
    font-size: 42%;
  }
  #logoaf {
    width: 102px;
    height: 53px;
    margin-top: 3rem;
  }
  .hero h1 {
    font-size: 7rem;
  }
  .edu-divs {
    margin-right: 0rem;
    text-align: center;
    flex-direction: column;
  }
  #edu-h1 {
    max-width: none;
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 4rem;
  }
  .about-divs {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  #about-h1 {
    font-size: 1.5rem;
  }
  #about-p {
    font-size: 1.7rem;
  }
  .al {
    width: 123px;
    height: 126px;
  }

  #cir-ex {
    width: 74px;
    height: 73px;
  }
  #cir-dot {
    width: 25px;
    padding-bottom: 4rem;
  }
  #div-cont {
    max-width: 500px;
    flex-direction: column;
    margin-top: 0rem;
  }
  #dev-cont {
    max-width: 500px;
    flex-direction: column;
    margin-top: 0rem;
    margin-left: 8rem;
    margin-right: 4rem;
  }
  #img-div p {
    max-width: 181px;
  }
  #img-div {
    width: 184px;
  }
  #dev-ele {
    margin-top: 4rem;
  }
  #h2-dev {
    max-width: 54rem;
    margin-top: 4rem;
  }

  #porj {
    min-width: 510px;
    min-height: 310px;
  }
  #proj-main {
    max-width: 510px;
    max-height: 310px;
  }
  #proj-img {
    max-width: 420px;
    max-height: 270px;
  }
  #main-title {
    top: 3%;
    right: -5%;
    max-width: 135px;
  }
  #main-title h3 {
    width: 135px;
  }
  #more-cards div {
    min-width: 165px;
    min-height: 167px;
  }
  #more-img {
    width: 89px;
    height: 89px;
  }
  #more-title {
    font-size: 3rem;
  }
  #end-title {
    font-size: 4rem;
  }
  #end-cir {
    width: 380px;
    height: 380px;
  }
  #end-cir2 {
    width: 380px;
    height: 380px;
  }

  #cont-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 550px;
    max-width: 550px;
    min-height: 467px;
    margin-top: 8rem;
  }

  #cont-info {
    margin-right: unset;
    text-align: center;
  }
  #name-cont {
    width: 250px;
  }
  #email-cont {
    width: 250px;
  }
  #more-cards div {
    min-width: 125px;
    min-height: 127px;
  }
  #more-img {
    width: 79px;
    height: 79px;
  }
  #more-divs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  #more-cards {
    min-width: unset;
    min-height: unset;
    margin-top: 7rem;
  }
  #sub-btn {
    letter-spacing: 5px;
  }
}
@media screen and (max-width: 590px) {
  .al {
    width: 108px;
    height: 122px;
    font-size: 1.5rem;
  }
  #cir-ex {
    width: 64px;
    height: 63px;
  }
  #red-heart {
    width: 7px;
    height: 7px;
  }
  #mask {
    width: 12px;
    height: 7px;
  }
}
@media screen and (max-width: 527px) {
  html {
    font-size: 40%;
  }
  .tech-imgs img {
    width: 44px;
    height: 44px;
  }
  #porj {
    min-width: 410px;
    min-height: 220px;
  }
  #proj-main {
    max-width: 340px;
    max-height: 190px;
  }
  #proj-img {
    max-width: 340px;
    max-height: 190px;
  }
  #main-title {
    top: -15%;
  }
  #main-title a {
    letter-spacing: 3px;
  }
  #more-title {
    font-size: 2.3rem;
  }

  #end-title {
    font-size: 3.2rem;
  }
  #end-cir {
    width: 330px;
    height: 330px;
  }
  #end-cir2 {
    width: 330px;
    height: 330px;
  }

  #cont-form {
    min-width: 390px;
    max-width: 390px;
    min-height: 377px;
    margin-top: 6rem;
  }

  #name-cont {
    width: 180px;
  }
  #email-cont {
    width: 180px;
  }
  #message-cont {
    min-width: 380px;
  }
  .al {
    width: 92px;
    height: 106px;
    font-size: 1.5rem;
  }
  #cir-ex {
    width: 64px;
    height: 63px;
  }
  #more-cards div {
    min-width: 107px;
    min-height: 107px;
  }
  #more-img {
    width: 59px;
    height: 59px;
  }
  #more-cards p {
    width: 108px;
  }
}
@media screen and (max-width: 445px) {
  #img-div {
    width: 140px;
  }
  .tech-sec {
    flex-wrap: unset;
  }
  #tech-cont {
    min-width: unset;
  }
  .tech-h3 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
@media screen and (max-width: 411px) {
  html {
    font-size: 35%;
  }
  .hero h1 {
    font-size: 6.5rem;
  }
  .icons img {
    width: 43px;
    height: 43px;
  }
  #about-h1 {
    font-size: 3rem;
    max-width: unset;
  }
  #about-p {
    font-size: 2rem;
    margin-top: 3rem;
  }
  #gra-hat {
    margin-right: unset;
  }
  #img-cir {
    width: 200px;
    height: 200px;
  }
  #img-hat {
    top: -30%;
    left: -29%;
    width: 453px;
    height: 473px;
  }
  #edu-second-cir {
    width: 80px;
    height: 80px;
  }
  #edu-h1 {
    margin-top: 8rem;
    font-size: 3.3rem;
  }
  #edu-p {
    margin-top: 2rem;
    font-size: 2.4rem;
  }
  .exp-cir {
    width: 390px;
    height: 150px;
    justify-content: center;
  }
  #cir-ex {
    width: 50px;
    height: 50px;
  }
  #cir-dot {
    width: 22px;
    margin-bottom: 3rem;
  }

  #dev-cont {
    max-width: 100vh;
    flex-direction: column;
    margin-top: 0rem;
    justify-content: center;
    align-items: center;
  }
  #h2-dev {
    max-width: 100vh;
    margin-top: 4rem;
    margin-right: unset;
    font-size: 2.3rem;
  }
  #dev-ele {
    justify-content: center;
  }
  .tech-imgs img {
    width: 24px;
    height: 24px;
  }
  .tech-imgs div {
    width: 26px;
    height: 26px;
  }
  #porj {
    min-width: 380px;
    min-height: 230px;
  }
  #proj-main {
    max-width: 310px;
    max-height: 190px;
  }
  #proj-img {
    max-width: 310px;
    max-height: 190px;
  }
  #main-title {
    width: 110px;
  }
  #main-title h3 {
    width: 108px;
  }
  #main-title a {
    font-size: 1.7rem;
    letter-spacing: 2px;
  }

  #end-cir {
    width: 300px;
    height: 300px;
  }
  #end-cir2 {
    width: 300px;
    height: 300px;
  }
  #end-cards {
    margin-top: 12rem;
  }

  #name-cont {
    width: 160px;
    height: 40px;
  }
  #email-cont {
    width: 160px;
    height: 40px;
  }
  #message-cont {
    min-width: unset;
    max-width: 350px;
    max-height: 173px;
  }
  #sub-btn {
    font-size: 1.9rem;
    letter-spacing: 4px;
  }
}
@media screen and (max-width: 463px) {
  .al {
    width: 70px;
    height: 83px;
    font-size: 1.5rem;
  }
  #cir-ex {
    width: 40px;
    height: 40px;
  }
}
@media screen and (max-width: 389px) {
  html {
    font-size: 32%;
  }
  #more-cards div {
    min-width: 87px;
    min-height: 87px;
  }
  #more-img {
    width: 47px;
    height: 47px;
  }
  #porj {
    min-width: 325px;
    min-height: 230px;
  }
  #proj-main {
    max-width: 325px;
    max-height: 230px;
  }
  #proj-img {
    max-width: 290px;
    max-height: 190px;
  }
  #main-title {
    top: 3%;
  }

  .al {
    width: 60px;
    height: 75px;
    font-size: 1.5rem;
  }
  #cir-ex {
    width: 30px;
    height: 30px;
  }
  #end-title {
    font-size: 2.6rem;
  }
  #cont-form {
    min-width: 320px;
    max-width: 320px;
    min-height: 367px;
    margin-top: 2rem;
  }

  #name-cont {
    width: 130px;
  }
  #email-cont {
    width: 130px;
  }
  #message-cont {
    max-width: 270px;
  }
  #cir-dot {
    width: 16px;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 310px) {
  html {
    font-size: 27%;
  }
}