@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

@font-face {
    font-family: digital;
    src: url(fonts/digital-7.regular.ttf);
}
:root {
    font-family: Lexend;

    --table-space: 5px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #42444d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%234a4c5c' fill-opacity='0.6'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

html, body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

body {
    height: 100%;
}

#output {
    list-style: none;
    width: fit-content;
    column-count: 2;
    column-gap: var(--table-space);
    margin: var(--table-space);
}

table {
    position: relative;

    border-collapse: separate;
    border-spacing: var(--table-space);

    width: 100%;
    margin-bottom: var(--table-space);
    
    background-color: var(--color-1);
    border: 2px solid var(--color-2);
    
    border-radius: var(--table-space);
}

table th::after {
    content: "";
    display: block;
    
    position: absolute;
    height: 2em;
    width: 100%;
    top: 0;
    right: 0;
    scale: .9;
    transform-origin: top right;
    translate: -5px 5px;
    
    
    background-image: var(--brand-img);
    background-repeat: no-repeat;
    background-position: 100% ;
    background-size: auto 100%;
}

tr {
    display: flex;
    justify-content: space-between;
    gap: var(--table-space);
    margin-bottom: var(--table-space);
    color: var(--color-3);
}

.fuel-name {
    text-align: right;
    font-size: 18px;
}

.fuel-price {
    background-color: #000000;
    display: block;
    width: 3em;
    border: inset 2px #ffffff77;
    letter-spacing: .1em;
    text-align: center;
    
    color: #ffffff;
    font-family: digital;
    font-size: 20px;
}

#Shell {
    --color-1: #fbce07;
    --color-2: #dd1d21;
    --brand-img: url(https://shellservice.dk/wp-content/themes/shell-wp/assets/dist/img/logo.svg);
}

#F24 {
    --color-1: #002e5e;
    --color-2: #bdd63e;
    --color-3: #ffffff;
    --brand-img: url(https://www.f24.dk/Content/gfx/shared/sharedTemplates/logo-f24.svg);
} 

#OK {
    --color-1: #f9f9f9;
    --color-2: #ff3c3c;
    --brand-img: url(https://www.ok.dk/Client-dist/img/ok-logo.svg);
}

#CircleK {
    --color-1: #ffffff;
    --color-2: #da291c;
    --brand-img: url(https://www.circlek.eu/profiles/custom/ck/themes/circlek/assets/images/logo.svg);
}

#Q8 {
    --color-1: #ffffff;
    --color-2: #20419a;
    --brand-img: url(https://www.q8.dk/Content/gfx/shared/sharedTemplates/logo-q8.svg);
}

#UnoX {
    --color-1: #ffbb00;
    --color-2: #db002a;
    --brand-img: url('data:image/svg+xml,<svg width="70" height="38" viewBox="0 0 70 38" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_28_7705)"><path d="M70 0.189453H0V37.8099H70V0.189453Z" fill="%23FFBD00"></path><path d="M16.7594 13.2021L15.8042 19.2359C15.5856 20.6162 15.3124 21.9825 14.0806 23.0212C13.0444 23.9035 11.586 24.2168 10.3337 24.2168C9.08147 24.2168 7.72208 23.9035 6.9653 23.0212C6.06242 21.9824 6.22181 20.6161 6.44036 19.2359L7.39562 13.2021H10.1849L9.29047 18.8517C9.06965 20.2462 8.92818 21.7689 10.7213 21.7689C12.5145 21.7689 12.8551 20.2463 13.076 18.8517L13.9704 13.2021H16.7596H16.7594Z" fill="black"></path><path d="M20.3637 17.5717H20.3922C21.1296 16.6894 21.9027 16.3906 22.9131 16.3906C24.8769 16.3906 25.4636 17.6286 25.1797 19.4216L24.4655 23.9327H21.8756L22.4388 20.3752C22.5492 19.6779 22.8568 18.4541 21.576 18.4541C20.5229 18.4541 20.1002 19.2367 19.956 20.1475L19.3566 23.9327H16.7666L17.9224 16.6326H20.5123L20.3637 17.5717Z" fill="black"></path><path d="M35.0026 20.2896C34.6102 22.7658 32.338 24.1747 29.9899 24.1747C27.6561 24.1747 25.8134 22.78 26.2077 20.2896C26.602 17.7994 28.8742 16.3906 31.2223 16.3906C33.5704 16.3906 35.3966 17.7994 35.0025 20.2896H35.0026ZM28.94 20.2896C28.7936 21.2147 29.2929 21.9261 30.3459 21.9261C31.3989 21.9261 32.1235 21.2147 32.27 20.2896C32.412 19.3929 31.9194 18.639 30.8664 18.639C29.8134 18.639 29.0819 19.3929 28.94 20.2896Z" fill="black"></path><path d="M63.7306 6.45898H38.6504V31.5394H63.7306V6.45898Z" fill="%23DB002A"></path><path d="M55.8604 9.00879L55.1793 10.9777L54.2051 13.674L54.1079 13.9095C53.7785 14.7106 53.467 15.4673 52.8404 16.0454C52.1468 16.6701 51.0194 16.8224 50.1489 16.413C48.8986 15.6375 48.8782 14.0647 48.8575 12.3997L48.854 12.1522C48.854 12.1522 48.8508 11.9055 48.8508 11.9064L48.8467 11.5349C48.8467 11.5349 43.7974 11.5348 43.7923 11.5349L43.7753 12.1419C43.7333 13.564 43.804 14.7308 43.9899 15.7088C44.2321 17.6404 45.3071 19.3569 46.7973 20.2612L42.5107 28.1754L42.0576 29.0393H47.6654L47.8389 28.7609L51.3578 22.3228C53.3224 23.352 53.6113 25.897 53.867 28.1618L53.9098 28.537C53.9098 28.537 53.9717 29.0405 53.9715 29.0393H59.1507L59.1262 28.4435C59.0176 25.6238 58.5122 23.4064 57.579 21.6604C57.2117 20.9847 56.6875 20.3273 56.0654 19.7545C56.6225 19.349 57.101 18.8559 57.433 18.3332C58.4677 16.6775 59.0943 14.8457 59.7002 13.0741C59.7002 13.0741 60.2851 11.3548 61.0957 9.00879H55.8604Z" fill="white"></path></g><defs><clipPath id="clip0_28_7705"><rect width="70" height="37.6205" fill="white" transform="translate(0 0.189453)"></rect></clipPath></defs></svg>');
}


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

@media only screen and (max-width: 600px) {
    #output {
        column-count: 1;
    }
}