/*!****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/giant_carbon/static/css/main.css ***!
  \****************************************************************************************/
:root {
    --one: #8B22BC;
    --two: #E72C90;
    --three: #2C96E7;
    --four: #E76E2C;
    --five: #D9B915;
    --six: #1BB479;
    --seven: #CE4143;
    --eight: #15D9C9;
    --nine: #819BE1;
    --ten: #899828;
    --eleven: #F6AC00;
}

html {
    font-family: "Lato";
    background-color: #11181E;
    color: white;
}

main {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}

h1 {
    a {
        font-size: 56px;
        color: #FFFFFF;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

nav {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 1px solid #FFFFFF63;
    z-index: 10;

    .items {
        display: flex;
        gap: 20px;
        div {
            padding: 10px 30px;
            cursor: pointer;
            color: white;

            &.active {
                background-color: #3D8B96;
                border-radius: 80px;
            }
        }
    }
}

.green-certified {
    position: relative;
    padding-left: 50px;
    font-size: 18px;

    &::before {
        content: '';
        position: absolute;
        background-image: url(bc0310f76fa533a10060.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 40px;
        height: 40px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}

.info-block {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #FFFFFF63;
    padding-bottom: 20px;

    p {
        flex: 0 1 20%;
    }

    .site-list {
        flex: 1 1 80%;
        display: grid;
        grid-auto-rows: auto;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        align-items: center;
        gap: 40px;

        li {
            position: relative;
            list-style: none;
            padding-left: 25px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: auto;

            &::before {
                content: '';
                height: 20px;
                width: 20px;
                border-radius: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 40px;
                left: 0;
            }

            &:nth-child(11n + 1) { &::before {background: var(--one);} }
            &:nth-child(11n + 2) { &::before {background: var(--two);} }
            &:nth-child(11n + 3) { &::before {background: var(--three);} }
            &:nth-child(11n + 4) { &::before {background: var(--four);} }
            &:nth-child(11n + 5) { &::before {background: var(--five);} }
            &:nth-child(11n + 6) { &::before {background: var(--six);} }
            &:nth-child(11n + 7) { &::before {background: var(--seven);} }
            &:nth-child(11n + 8) { &::before {background: var(--eight);} }
            &:nth-child(11n + 9) { &::before {background: var(--nine);} }
            &:nth-child(11n + 10) { &::before {background: var(--ten);} }
            &:nth-child(11n) { &::before {background: var(--eleven);} }

            a {
                text-decoration: none;
                color: #D6D6D6;
                line-height: 20px;
            }
        }
    }
}

.disclaimer {
    color: #FFFFFF99;
}

.website-info {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

#visualization {
    width: 100%;
    overflow: visible;

    & a {
        display: block;
    }

    & circle {
        cursor: grab;

        &:nth-child(11n + 1) { fill: var(--one); }
        &:nth-child(11n + 2) { fill: var(--two); }
        &:nth-child(11n + 3) { fill: var(--three); }
        &:nth-child(11n + 4) { fill: var(--four); }
        &:nth-child(11n + 5) { fill: var(--five); }
        &:nth-child(11n + 6) { fill: var(--six); }
        &:nth-child(11n + 7) { fill: var(--seven); }
        &:nth-child(11n + 8) { fill: var(--eight); }
        &:nth-child(11n + 9) { fill: var(--nine); }
        &:nth-child(11n + 10) { fill: var(--ten); }
        &:nth-child(11n) { fill: var(--eleven); }
    }

    & .label {
        user-select: none;
        pointer-events: none;

    }
}