@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&family=Open+Sans&display=swap');

html {
    margin: 0;
    padding: 0;
    background-color: #251400;
    background-size: cover;
    background-image: url(https://solodental.ca/wp-content/uploads/2016/06/desktop-hd-black-orange-wallpaper-abstract.jpg);
    background-position: center;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    margin: 100px 0;
    padding: 100px;
    padding-top: 80px;

    min-width: 1000px;
    max-width: min(1200px, calc(100% - 200px));
    min-height: 600px;
    box-sizing: border-box;

    border-radius: 50px;
    border: 1px solid rgba(127, 127, 127, 0.5);

    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);

    font-family: "open sans";
    text-align: center;
    color: #ffffff;
}

body>p::before {
    transform: translateY(-100px);
    content: "Cursed questions";
    display: block;
    font-size: 60px;
    font-weight: bold;
}

body>p:after {
    content: "What is the capital of Paris?<div><a href=javascript:a(0)>P</a><a href=javascript:a(1)>France</a><a href=javascript:a(2)>ecnarF</a></div>3can you tell me what 1+1 does?<div><a href=javascript:a(0)>2</a><a href=javascript:a(1)>Yes</a><a href=javascript:a(2)>No</a></div>3What does 2 and 5 evaluate to?<div><a href=javascript:a(0)>7</a><a href=javascript:a(1)>5</a><a href=javascript:a(2)>true</a></div>3are you lying?<div><a href=javascript:a(0)>Yes</a><a href=javascript:a(1)>Answer a) is a paradox</a><a href=javascript:a(2)>Answer a)</a></div>3What number am I thinking about?<div><a href=javascript:a(0)>69</a><a href=javascript:a(1)>42</a><a href=javascript:a(2)>any other</a></div>3Heads or tails?<div><a href=javascript:a(0)>Either of them</a><a href=javascript:a(1)>Qubit</a><a href=javascript:a(2)>Not the slice</a></div>3What is recursion?<div><a href=javascript:a(0)>answer a)</a><a href=javascript:a(1)>answer c)</a><a href=javascript:a(2)>answer b)</a></div>3Pick a letter.<div><a href=javascript:a(0)>`choice([chr(97+i) for i in range(26)])`</a><a href=javascript:a(1)>`chr(randint(97,122))`</a><a href=javascript:a(2)>`'abcdefghijklmnopqrstuvwxyz'[int(random()*26)]`</a></div>3What?<div><a href=javascript:a(0)>Nothing</a><a href=javascript:a(1)>asked</a><a href=javascript:a(2)>Nuts</a></div>3Pick a title for this question<div><a href=javascript:a(0)>Recursion</a><a href=javascript:a(1)>answer b) is false</a><a href=javascript:a(2)>Pick a title for this question</a></div>3Which word has been said more than a million times in history?<div><a href=javascript:a(0)>Google</a><a href=javascript:a(1)>forgor</a><a href=javascript:a(2)>botos</a></div>3Which is more sustainable?<div><a href=javascript:a(0)>Impostor</a><a href=javascript:a(1)>Sus</a><a href=javascript:a(2)>amongus</a></div>3What is beluga?<div><a href=javascript:a(0)>a man</a><a href=javascript:a(1)>a cat</a><a href=javascript:a(2)>a whale</a></div>3Which question is most absurd?<div><a href=javascript:a(0)>Say that again?</a><a href=javascript:a(1)>What do you mean?</a><a href=javascript:a(2)>Noot Noot</a></div>3What did you say yesterday?<div><a href=javascript:a(0)>,</a><a href=javascript:a(1)>.</a><a href=javascript:a(2)>'</a></div>3Test results<br>You are: <span>A% air, B% bee, C% sea.</span><div><a href='.'>Try again</a></div>";
    display: none;
}

body>p {
    margin-top: 100px;
    font-size: 30px;
    font-weight: bold;
}

body>p>div, body>p>span {
    display: flex;
    justify-content: center;
    gap: 50px;

    margin-top: 20px;
    font-size: 20px;
}

body>p>div>a {
    transition-duration: 0.4s;
    transition-property: border, background-color;

    min-width: 200px;

    padding: 10px;
    border-radius: 30px;
    border: 1px solid rgba(200, 200, 200, 0.4);

    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    color: #202100;
    text-decoration: none;
}

body>p>div>a:hover {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.4);
}

body>p>div>a:nth-child(2)::after {
    content: "/!\\ This might not work on all browsers!";

    position: fixed;
    display: block;
    transform: translate(-50%, 80px);

    top: 0;
    left: 50%;

    width: 100vw;
    color: black;

    font-size: 22px;
}

body>p>div::after {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(0, 0, 0, 0.1);
    padding: 40px 70px;
    border-radius: 50px;
    text-align: justify;

    content: "This website has been created, first, as a dumb joke, but also as an attempt at making a page containing the strict minimum amount of HTML and JavaScript, but the most CSS possible. Of course, the .css file is not redundant, and its formatting is as I would have usually done it for, say, another, more serious project. Thus, you can press Ctrl + U and see that the HTML file used to generate this website is minuscule. To achieve this, most of the data, like questions, is stored in the CSS file: as a result, the HTML file does not contain any of the text that is displayed here, and the JavaScript code used does not contain the questions above either.";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;

    margin: 50px;
    margin-bottom: 20px;

    font-size: 14px;
    font-weight: normal;
    line-height: 150%;
}