@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url(/styles/keyframes.css);

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}



html body {
    height: fit-content;
    margin: 0%;
}

header {
    position: fixed;
    height: 4rem;
    width: 100%;
}

nav {
    display: flex;
    justify-content: flex-end;
    margin-right: 2em;
    margin-top: 1em;
    gap: 1.50em;
}

a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: larger;
    font-family: "DM Serif Display", serif;
    scale: 1;
    transition: all 0.3s ease;
}

a:hover {
    transform: scale(1.25);
}

.upperSection {
    display: grid;
    height: 100vh;
    align-content: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%231e3266'%3e%3c/rect%3e%3cpath d='M1512 560L0 560 L0 377.9Q49.12 307.02%2c 120 356.14Q159.14 275.28%2c 240 314.42Q284.81 287.23%2c 312 332.04Q392.6 292.64%2c 432 373.25Q463.84 285.09%2c 552 316.93Q618.26 263.19%2c 672 329.46Q685.66 271.12%2c 744 284.78Q788.48 257.26%2c 816 301.74Q898.47 264.21%2c 936 346.67Q1004.9 295.57%2c 1056 364.47Q1059.11 295.58%2c 1128 298.68Q1155.07 253.75%2c 1200 280.81Q1274.17 234.99%2c 1320 309.16Q1386.89 304.06%2c 1392 370.95Q1426.69 285.64%2c 1512 320.34z' fill='%23182f5d'%3e%3c/path%3e%3cpath d='M1512 560L0 560 L0 441.88Q24.47 394.35%2c 72 418.82Q87.22 362.04%2c 144 377.27Q191.09 304.36%2c 264 351.45Q319.44 334.89%2c 336 390.34Q413.44 347.78%2c 456 425.22Q481.17 378.39%2c 528 403.56Q566.74 322.3%2c 648 361.04Q698.46 339.5%2c 720 389.97Q779.02 377%2c 792 436.02Q819.25 391.26%2c 864 418.51Q893.74 328.25%2c 984 357.98Q1032.15 334.13%2c 1056 382.29Q1111.1 365.39%2c 1128 420.49Q1170.74 391.23%2c 1200 433.96Q1223.22 385.19%2c 1272 408.41Q1312.74 329.15%2c 1392 369.9Q1461.08 318.98%2c 1512 388.06z' fill='%2325467d'%3e%3c/path%3e%3cpath d='M1464 560L0 560 L0 456.32Q60.99 445.31%2c 72 506.3Q98.53 460.83%2c 144 487.36Q198.76 422.12%2c 264 476.88Q306.18 399.06%2c 384 441.24Q434.45 371.69%2c 504 422.14Q557.43 403.57%2c 576 457.01Q629.68 438.69%2c 648 492.38Q649.48 421.86%2c 720 423.34Q785.98 369.31%2c 840 435.29Q919.68 394.97%2c 960 474.65Q1002.45 445.1%2c 1032 487.55Q1044.48 428.03%2c 1104 440.51Q1145.93 410.44%2c 1176 452.37Q1218.75 423.12%2c 1248 465.87Q1263.09 408.96%2c 1320 424.04Q1366.59 398.63%2c 1392 445.21Q1457.79 439%2c 1464 504.79z' fill='%23356cb1'%3e%3c/path%3e%3cpath d='M1560 560L0 560 L0 490.92Q63.32 482.24%2c 72 545.56Q114.97 516.52%2c 144 559.49Q171.12 466.61%2c 264 493.72Q335.2 444.93%2c 384 516.13Q449.5 509.63%2c 456 575.13Q501.63 500.76%2c 576 546.39Q617.63 468.01%2c 696 509.64Q739.54 481.18%2c 768 524.73Q844.56 481.29%2c 888 557.84Q955.09 504.93%2c 1008 572.03Q1029.89 473.92%2c 1128 495.81Q1173.89 469.71%2c 1200 515.6Q1293.99 489.59%2c 1320 583.58Q1356.72 500.3%2c 1440 537.01Q1479.28 456.29%2c 1560 495.57z' fill='white'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: cover;
}

.nameSection {
    animation: 1s mainTextAnimation ease-out;
    display: flex;
    justify-content: center;
    font-size: xx-large;
    font-family: DM Serif Display;    
    letter-spacing: 3px;
    color: rgb(235, 235, 235);
}

.title {
    animation: 1.5s mainTextAnimation ease;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 5rem;
    font-size: xx-large;
    font-family: DM Serif Display;    
    letter-spacing: 3px;
    text-decoration: underline;
    text-underline-offset: 10px;
    color: rgb(235, 235, 235);
}

.arrowUpSVG {
    animation: 1s slideDown ease-out;
    position: absolute;
    bottom: 3em;
    right: 50%;
    width: 2em;
    height: 2em;
    rotate: 180deg; 
}

.infoSection {
    display: flex;
    height: 100vh;
    justify-content: center;
    margin-top: 2.25em;
}

.h3Tools {
    font-family: "DM Serif Display", serif;
}