Hamkke

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="canonical" href="https://actwu.github.io/test/">
<meta name="description" content="This is a test.">
<meta property="og:title" content="Actwu test">
<meta property="og:description" content="This is a test.">
<meta property="og:image" content="">
<meta property="og:url" content="https://actwu.github.io/test/">
<meta property="og:type" content="website">
<meta name="theme-color" content="#000">
<link rel="icon" href="icon.png">
<style>
:root,*{--p:#3855d7;--b:#19191c;--f:#fafafa;--d:#202127;--font:sans-serif;--pad:1rem;--gap:10;--mar:0.3rem;--radius:8px;--maxw:100%;--midw:325px;--fz:1rem;--fz-lg:1.2rem;margin:0;padding:0;box-sizing:border-box;background-color:var(--b);color:var(--f);text-decoration:none;font-family:var(--font);border:unset;outline:unset;}
*:not(:last-child){margin-bottom:var(--mar);}
body{margin:0 auto auto;background:var(--b);color:var(--f);font-family:var(--font);display:flex;flex-direction:column;padding:5px;box-sizing:border-box;width:100vw;max-width:var(--midw);text-align:left;justify-content:center;place-content:center;align-content:center;min-height:100svh;}
input,textarea,select{background:var(--b);color:var(--f);padding:var(--pad);border-radius:var(--radius);width:var(--maxw);max-width:var(--midw);font-size:var(--fz);box-sizing:border-box;outline:2px solid var(--d);}
textarea{resize:vertical;}
button,a,video{background:var(--d);color:var(--f);border:none;padding:var(--pad);border-radius:var(--radius);width:var(--maxw);max-width:var(--midw);font-size:var(--fz);box-sizing:border-box;}
video,embed[video],embed[vid],iframe[video],iframe[vid]{aspect-ratio:16/9;}
input,button,a{min-height:0.12in;min-width:0.3in;}
span{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center;gap:var(--gap);}
span>*{display:flex;flex:1;margin:0;}
body>*:not(:last-child){margin-bottom:var(--mar);}
span>*:not(:last-child){margin-right:var(--mar);}
[p=''],[p='hover']:hover,[p='active']:active{background:var(--p);color:var(--f);cursor:pointer;}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;width:100%;height:100%;cursor:pointer;}
input[type="date"]{position:relative;background:var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fafafa' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E") no-repeat right 1rem center;background-size:1rem;padding-right:2.5rem;color:var(--f);border-radius:var(--radius);font-size:var(--fz);width:var(--maxw);max-width:var(--midw);box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:2px solid var(--d);cursor:pointer;}
select,summary{background:var(--d);color:var(--f);border:none;padding:var(--pad);border-radius:var(--radius);width:var(--maxw);max-width:var(--midw);font-size:var(--fz);box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;}
select,summary{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fafafa'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em;padding-right:2.5rem;cursor:pointer;}
details{padding:0;max-width:var(--midw);border-radius:var(--radius);overflow:hidden;transition:all 0.3s ease-in-out;}
summary{list-style:none;user-select:none;font-weight:bold;}
summary::-webkit-details-marker{display:none;}
[center]{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
[right]{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;text-align:right;}
</style>
<body role="document">
<main role="main" aria-label="Main content">
<h1>Prod Ready?</h1>
<input type="text" placeholder="Your name" aria-label="Name">
<textarea placeholder="Your message" rows="4" aria-label="Message"></textarea>
<button p="hover">Submit</button>
<span>
<a href="#" p="">Link 1</a>
<a href="#" p="hover">Link 2</a>
</span>
<details>
<summary>More Info</summary>
<p>This is additional information inside a collapsible section.</p>
</details>
</main>
</body>
<script>
</script>
</html>