@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Animation */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, 1px) rotate(0deg); }
}

/* Base and variables */
:root {
    /* Colour palette */
    --background: #0c061b;
    --highlightColour: #9c79f6;

    /* Style */
    --borderRadius: 3px;
    --hoverSpacing: normal;
    --h1size: x-large;

    /* Mobile params */
    --imgWidth: 100%;
}

body, html {
    margin: 0;
    padding: 15px;
    padding-bottom: 0;
    background-color: var(--background);
}

p, h1, sub, a, h2, td {
    color: white;
    font-family: "DM Sans";
}

/* --- Text elements --- */
/* anchor */
a {
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: var(--highlightColour);
    letter-spacing: var(--hoverSpacing);
}

h1 {
    font-size: var(--h1size);
}

/* Wrapper */
#wrapper {
    max-width: 800px;
    margin: auto;
    margin-bottom: 10px;
}

/* Footer */
#footer {
    position: fixed;
    bottom:0px;
}

#footer p {
    background-color: var(--background);
    box-shadow: var(--background) 0px 0px 8px ;
    border-radius: var(--borderRadius);
    padding:4px;
}

/* General purpose */
.pixel {
    image-rendering: pixelated;
}

.translucent {
    opacity: 50%;
}

.noscale:hover {
    letter-spacing: normal;
}

.pico {
    aspect-ratio: 4 / 3;
}

/* Misc. elements */
img {
    width: var(--imgWidth);
    border-radius: var(--borderRadius);
}

iframe {
    border-radius: var(--borderRadius);
    border: none;
}

.video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--borderRadius);
}

hr {
    border:none;
    border-bottom: solid 3px white;
    border-radius: 100px;
    opacity: 10%;
}

br {
    display: block;
}

.icon {
    animation: shake 2s infinite cubic-bezier(0.37, 0, 0.63, 1);
    display: inline-block;
}

/* Table */
table, tr, td {
    padding: 5px;
    border-radius: 3px;
}

tr:nth-child(even) {
    background-color:rgba(255,255,255,0.05)
}

thead {
    background-color: rgba(255,255,255,0.1);
}

table {
    width: 100%;
}

/* --- Desktop --- */
@media only screen and (min-width:800px) {
    :root {
        /* Style */
        --hoverSpacing: 4px;
        --h1size: xx-large;

        /* Mobile params */
        --imgWidth: 49.7%;
    }
}