@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Oswald:wght@200..700&family=Roboto+Slab:wght@100..900&display=swap');

body {
    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%23SvgjsMask2144%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(0%2c 0%2c 0%2c 1)'%3e%3c/rect%3e%3cpath d='M131.534%2c298.744C187.687%2c300.668%2c232.939%2c254.752%2c257.068%2c204.011C278.041%2c159.909%2c267.456%2c109.391%2c241.143%2c68.251C217.041%2c30.568%2c176.188%2c10.368%2c131.534%2c7.741C80.826%2c4.758%2c22.944%2c10.19%2c-2.947%2c53.892C-29.143%2c98.109%2c-4.678%2c150.845%2c20.063%2c195.892C46.149%2c243.387%2c77.379%2c296.889%2c131.534%2c298.744' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-57.6 -17.06 a40.54 40.54 0 1 0 81.08 0 a40.54 40.54 0 1 0 -81.08 0z' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M124.189%2c277.235C176.957%2c279.204%2c220.188%2c240.585%2c247.108%2c195.157C274.665%2c148.654%2c290.072%2c90.82%2c262.051%2c44.595C234.749%2c-0.444%2c176.686%2c-11.859%2c124.189%2c-7.623C79.182%2c-3.991%2c42.085%2c24.655%2c20.137%2c64.115C-1.134%2c102.358%2c-3.004%2c147.216%2c16.195%2c186.54C38.3%2c231.816%2c73.84%2c275.356%2c124.189%2c277.235' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1442.872%2c248.047C1488.215%2c246.429%2c1525.077%2c214.701%2c1546.585%2c174.751C1566.898%2c137.02%2c1567.089%2c92.608%2c1546.904%2c54.809C1525.392%2c14.526%2c1488.535%2c-20.083%2c1442.872%2c-19.462C1397.991%2c-18.852%2c1366.168%2c18.758%2c1343.626%2c57.572C1320.951%2c96.614%2c1304.633%2c142.599%2c1325.496%2c182.639C1347.679%2c225.212%2c1394.897%2c249.759%2c1442.872%2c248.047' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1265.93 -12.59 a49.48 49.48 0 1 0 98.96 0 a49.48 49.48 0 1 0 -98.96 0z' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1413.145%2c174.594C1450.355%2c175.133%2c1491.256%2c173.096%2c1512.186%2c142.326C1535.3%2c108.345%2c1534.228%2c62.691%2c1513.335%2c27.301C1492.771%2c-7.532%2c1453.594%2c-25.218%2c1413.145%2c-25.433C1372.281%2c-25.651%2c1331.354%2c-9.264%2c1311.091%2c26.224C1290.971%2c61.461%2c1295.962%2c106.094%2c1318.957%2c139.525C1339.306%2c169.109%2c1377.242%2c174.073%2c1413.145%2c174.594' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M84.905%2c644.873C122.387%2c643.155%2c148.926%2c613.184%2c168.319%2c581.064C188.628%2c547.427%2c208.655%2c506.826%2c188.684%2c472.988C168.895%2c439.458%2c123.824%2c438.655%2c84.905%2c439.728C48.494%2c440.732%2c10.516%2c447.961%2c-9.411%2c478.452C-31.1%2c511.639%2c-32.442%2c554.877%2c-12.894%2c589.369C6.914%2c624.321%2c44.772%2c646.712%2c84.905%2c644.873' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M90.066%2c650.214C128.969%2c649.561%2c163.6%2c625.389%2c181.296%2c590.738C197.557%2c558.899%2c190.161%2c521.537%2c171.292%2c491.171C153.573%2c462.656%2c123.571%2c446.034%2c90.066%2c443.918C51.806%2c441.502%2c9.661%2c447.431%2c-11.112%2c479.651C-33.246%2c513.98%2c-27.468%2c558.764%2c-6.629%2c593.894C13.768%2c628.278%2c50.093%2c650.885%2c90.066%2c650.214' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M86.558%2c623.964C120.541%2c622.853%2c156.007%2c613.914%2c173.195%2c584.578C190.536%2c554.981%2c183.751%2c518.035%2c165.72%2c488.853C148.667%2c461.253%2c118.929%2c446.527%2c86.558%2c444.36C49.101%2c441.853%2c7.392%2c445.587%2c-13.366%2c476.867C-35.838%2c510.729%2c-33.317%2c556.967%2c-10.481%2c590.584C10.121%2c620.911%2c49.915%2c625.162%2c86.558%2c623.964' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1461.548%2c752.266C1517.841%2c749.553%2c1558.12%2c702.246%2c1583.11%2c651.732C1605.048%2c607.387%2c1604.671%2c556.044%2c1579.774%2c513.29C1555.044%2c470.824%2c1510.672%2c441.654%2c1461.548%2c442.984C1414.404%2c444.26%2c1379.58%2c479.84%2c1353.914%2c519.405C1324.841%2c564.222%2c1295.427%2c616.026%2c1317.841%2c664.517C1343.081%2c719.122%2c1401.462%2c755.162%2c1461.548%2c752.266' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1343.98%2c511.274C1360.898%2c511.014%2c1376.276%2c502.159%2c1385.05%2c487.692C1394.182%2c472.635%2c1397.363%2c453.484%2c1388.116%2c438.497C1379.218%2c424.076%2c1360.922%2c420.805%2c1343.98%2c421.132C1327.745%2c421.445%2c1311.432%2c426.457%2c1302.695%2c440.144C1293.297%2c454.866%2c1291.891%2c473.884%2c1300.659%2c488.99C1309.395%2c504.042%2c1326.578%2c511.542%2c1343.98%2c511.274' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1413.6920243128338 375.38971303030115L1271.2199441585542 464.4161494214796 1360.2463805497327 606.8882295757592 1502.7184607040122 517.8617931845807z' fill='rgba(250%2c 101%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2144'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%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-attachment: fixed;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    main {
        h1 {
            color: rgb(250, 101, 32);
            background-image: linear-gradient(rgb(250, 101, 32), rgb(224, 69, 22));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: "Roboto Slab", serif;
            font-size: 3.4rem;
            margin: auto;
            text-align: center;
            width: 100%;
            max-width: 400px; 
        }

        img {
            border: 6px solid #fa6529;
            border-radius: 50%;
            height: 250px;
            width: 250px;
            display: flex;
            aspect-ratio: 1/1;
            object-fit: cover;
            margin: 1rem auto;
        }

        h4 {
            color: #fff9;
            font-family: "Roboto Slab", cursive;
            text-align: center;
            font-size: 1.2rem;
        }

        header{
            h1 { 
                font-size: 2rem;
            }
            h2 {
                font-size: 1rem;
                color: #fff9;
                font-family: "Roboto Slab", cursive;
            }
            h1, h2 {
                text-align: center;
            }
        }
        section {
            background-color: #74747421;
            border-radius: 0.2rem;
            min-width: 350px;
            max-width: 700px;
            margin-top: 2rem;
            padding: 1rem;
            color: black;
            font-family: "Roboto Slab", cursive;
            transition: all 0.4s ease-in;
            h3 {
                border-bottom: 2px solid #ffffff;
                margin: 0;
                color: white;
            }
            p {
                color: #fff9;
                font-family: "Roboto Slab", cursive;
            }
        }

        transition: transform 0.4s ease-in;

        section:hover {
            transform: scale(1.01);
            opacity: 1;
            box-shadow: 0 6px 30px rgba(224, 69, 22);
}
    }

    menu {
        display:flex;
        flex-direction:column;
        gap:0.6rem;
        width:100%;
        align-items: left;
        max-width: 300px;
        margin: auto;
        transform: translateX(-10px);
        a:link,
        a:visited {
            background-color: #74747421;
            color: #74747421;
            border-radius: 10rem;
            padding: 0.4rem;
            display: flex;
            align-items: center;
            text-decoration: none;
            text-align: center;

            span {
                font-family: "Roboto Slab", serif;
                background-color: rgb(224, 69, 22);
                color: rgb(255, 255, 255);
                border-radius: 70%;
                font-size: 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 70px;
                width: 70px;
            }

            h4 {
                color: rgb(255, 255, 255);
                margin: 0;
                text-align: left;
            }

            small {
                display: block;
                font-size: 0.7rem;
                text-indent: 0.2rem;
                width: 225px; 
            }

            transition: transform 0.4s ease-in;

            &:hover {
                transform: scale(1.05) translateX(15px);
                box-shadow: 0 6px 30px rgba(224, 69, 22);
            }

        }

    }
}

menu a span {
    min-width: 70px;
}

menu a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    padding-left: 1.5rem;
}

.btn-home {
    position: fixed;
    top: 15px;
    left: 15px;
    border: 2px solid white;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .6;
    transition: all 0.4s ease-in;
    box-shadow: 1px 1px 4px rgb(250, 101, 32);
}

.btn-home:hover {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 6px 30px rgba(224, 69, 22);
}



img[src$="logo-html.png"] {
    display: block;
    margin: 0 auto;
    transition: transform 0.6s ease, filter 0.6s ease;
}

img[src$="logo-html.png"]:hover {
    transform: rotate(10deg) scale(1.05);
    filter: drop-shadow(0 0 15px rgba(224, 69, 22));
}