body {
    background-color: rgb(18, 18, 18);
    color: white;
    /*
        Capping the margin here, this makes sure we have a clear distinction in look between mobile devices and devices that cross the desktop size threshold,
        The smallest "desktop" device already has a margin of 300px
    */
    margin-left: min(5vw, 50px); /* Still want to have *some* margin on mobile, just not nearly as much as on Desktop */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --standard-font-size: 21px;
}

h1 {
    font-size: 45px;
}

p, a {
    font-size: var(--standard-font-size);
}

a, a:visited {
    color: rgb(20, 114, 255);
}

td:first-child, td:nth-child(3) {
    padding-right: 25px;
    padding-bottom: 10px;
}

td:nth-child(2), td:nth-child(4) {
    padding-bottom: calc(10px + (var(--standard-font-size) / 2));
}

/*
    Intentionally out of order :)
    *Please* send me your complaints on any of my socials.
*/
h2 {
    font-size: 35px;
}

.desktop {
    display: none;
}

/* For mobile, enforcing the right margin */
#badges {
    width: calc(100vw - min(5vw, 50px) - min(5vw, 50px)); /* Same margin on the right as on the left */
}
p {
    max-width: calc(100vw - min(5vw, 50px) - min(5vw, 50px)); /* Same margin on the right as on the left */
}


/*
    I once read that we should design a website with mobile style, and apply desktop styles with media queries.
    I suspect this has something to do with mobile device being less powerful and taking longer to apply styles than desktop devices.
    This is why I've decided to put the desktop styles in the media queries.
*/
@media only screen and not (max-width: 1200px) { /* These rules activate when the screen is larger than 1200px */
    body {
        margin-left: 25vw; /* Looks about right */
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: initial;
    }

    /* Enforcing the right margin */
    #badges {
        width: 50vw; /* There's 75vw of space, we keep a 25vw margin (just like on the left) */
    }
    p {
        max-width: 50vw;  /* There's 75vw of space, we keep a 25vw margin (just like on the left) */
    }
}

.svg-icon {
    width: 48px;
}

#pgp-toggle {
    display: none;
}

#pgp {
    display: none;
}

body:has(#pgp-toggle:checked) #pgp {
    display: block;
}

#pgp-toggle-label {
    font-size: 30px;
    margin-left: 20px;
    color: rgb(18, 187, 12);
    transform: rotate(180deg);
    display: inline-block;
    padding-bottom: 8px;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
}

body:has(#pgp-toggle:checked) #pgp-toggle-label {
    transform: rotate(0deg);
}

table.desktop > tbody > tr > td > table td:nth-child(2) {
    padding-right: 40px;
}

table.desktop > tbody > tr > td > table span {
    white-space: pre;
}

/* This fixes alignment, don't ask */
.social-table > tbody {
    transform: translateX(-15px);
}

/* Values obtained through the "looks good enough :tm:" method */
#forgejo-desktop {
    padding-left: 106px;
}

#badges > div {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    /* 5px looks about right :tm: */
    padding-right: 5px;
    padding-bottom: 5px;
}

/* Why are default margins so large? */
.title {
    margin-bottom: 5px;
}
.title-content {
    margin-top: 0px;
}
#badges {
    /* Why does this need big margins to look good? Design is weird. */
    margin-top: 15px;
}
#top-title {
    margin-top: 10px;
}
#desktop-social-table td {
    padding-top: 0;
    padding-bottom: 3px;
}
/* SO MANY MARGINS */
#last-title {
    margin-top: 5px;
}

/* Flexbox my beloved */
#footer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    position: absolute;
    left: 0;
    /* Make sure the footer doesn't touch the page content */
    margin-top: 30px; /* Why does this one need to be big? I will never get design. */
}
#footer {
    text-align: center;
}

/* Colors yay */
#copyright {
    color: rgb(170, 162, 162);
    font-size: large; /* Default size looks tiny, for some reason... */
}