* {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

html {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.section {
    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.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1674%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='url(%23SvgjsLinearGradient1675)'%3e%3c/rect%3e%3cpath d='M1412.341%2c843.411C1469.095%2c843.089%2c1531.013%2c829.826%2c1557.935%2c779.862C1583.982%2c731.522%2c1555.045%2c676.818%2c1527.792%2c629.148C1500.245%2c580.964%2c1467.71%2c529.047%2c1412.341%2c525.195C1351.672%2c520.974%2c1295.736%2c558.257%2c1265.253%2c610.882C1234.693%2c663.639%2c1231.265%2c730.004%2c1263.858%2c781.53C1294.581%2c830.099%2c1354.872%2c843.737%2c1412.341%2c843.411' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M74.92680425888115 383.3308551653885L-25.576355953528477 659.4610184328142 250.5538073138972 759.9641786452239 351.05696752630683 483.83401537779815z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1370.5002766620385 209.39146683229148L1166.2898277606705 241.73522448995698 1198.633585418336 445.94567339132504 1402.844034319704 413.60191573365955z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1730.657%2c374.839C1755.653%2c373.644%2c1777.808%2c359.574%2c1790.093%2c337.772C1802.147%2c316.378%2c1800.929%2c291.162%2c1790.271%2c269.039C1777.732%2c243.011%2c1759.529%2c215.443%2c1730.657%2c214.397C1700.632%2c213.309%2c1677.37%2c238.011%2c1663.063%2c264.431C1649.526%2c289.43%2c1645.651%2c319.719%2c1660.495%2c343.965C1674.794%2c367.321%2c1703.302%2c376.146%2c1730.657%2c374.839' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1674'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='10.94%25' y1='119.44%25' x2='89.06%25' y2='-19.44%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1675'%3e%3cstop stop-color='rgba(237%2c 237%2c 237%2c 1)' offset='0.32'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 1080px;
    max-height: 100vh;
}

h1,
h3 {
    position: absolute;
    max-width: 300px;
    backdrop-filter: blur(8px);
    padding: 1rem;
    border: 1px solid rgba(221, 221, 221, 0.2);
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(24, 24, 24, .4);
}

h1 {
    text-shadow: 1px 1px 1px rgb(24, 24, 24);
    color: #727272;
    width: 300px;
    text-transform: uppercase;
    line-height: 45px;
    top: 25%;
    left: calc(50% - 150px);
    font-size: 40px;
    font-weight: bold;
}

h3 {
    color: #666666;
    width: 50%;
    left: calc(50% - 150px);
    top: 75%;
    font-size: 16px;
    font-weight: 400;
}

h1 span {
    font-size: 25px;
    color: #ff9e57;
    font-weight: bold;
}

hr {
    margin-block: 1rem;
    border: 1px solid rgba(221, 221, 221, 0.5);
}

a {
    color: rgb(168, 168, 168);
}

a:hover {
    color: #ff9e57;
}

.header-text {
    position: absolute;
    top: 25%;
    left: 50%;
}

.header {
    position: relative;
}

.logo {
    position: absolute;
    top: -125px;
    max-width: 150px;
    left: 50%;
    filter: drop-shadow(1px 1px 1px rgba(24, 24, 24, .4));
    z-index: 10;
}

@media only screen and (max-width: 600px) {
    .container {
        overflow: hidden;
        width: 100vw;
    }

    .section {
        height: 100vh;
    }

    h1 {
        width: 300px;
        left: calc(50% - 150px);
    }

    h3 {
      font-size: 16px;
      width: 350px;
    }
  }