body {
        margin: 0px;
        width: 100%;
        background: white;
        font-family: Arial;
    }

    html {
        width: 100%;
    }

    a {
	    transition: .7s;
	    color: #03a3ea;
	}

	a:hover {
	    color: #949494;
	}

    .no-focus .card .element {
        border: 3px solid #a9a9a9;
    }

    .no-focus .card div {
        color: darkgray
    }

    .no-focus .card {
        color: darkgray;
    }

    .wrapper-inner {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        border: 2px solid #e2e2e2;
        background: whitesmoke;
        padding: 20px;
    }

    .card {
        flex: 1 1;
        max-width: 20%;
        min-width: 350px;
        box-sizing: border-box;
        padding: 20px;
        background: white;
        border: 2px solid #e2e2e2;
        border-radius: 5px;
        position: relative;
        transition: .7s;
        font-size: 15px;
        color: black;
    }

    .other-nonmetals.focus-group:after {
        border-top: 10px solid #76FF03;
    }
    .card .other-nonmetals {
        border: 3px solid #76FF03;
    }

    .noble-gases.focus-group:after {
        border-top: 10px solid #df5ff5;
    }
    .card .noble-gases {
        border: 3px solid #df5ff5;
    }

    .halogens.focus-group:after {
        border-top: 10px solid #18FFFF;
    }
    .card .halogens {
        border: 3px solid #18FFFF;
    }

    .metalloids.focus-group:after {
        border-top: 10px solid #00E676;
    }
    .card .metalloids {
        border: 3px solid #00E676;
    }

    .alkaline-earth-metals.focus-group:after {
        border-top: 10px solid #eaea18;
    }
    .card .alkaline-earth-metals {
        border: 3px solid #eaea18;
    }

    .alkali-metals.focus-group:after {
        border-top: 10px solid #f7a91d;
    }
    .card .alkali-metals {
        border: 3px solid #f7a91d;
    }

    .transition-metals.focus-group:after {
        border-top: 10px solid #ff3e7f;
    }
    .card .transition-metals {
        border: 3px solid #ff3e7f;
    }

    .post-transition-metals.focus-group:after {
        border-top: 10px solid #40C4FF;
    }
    .card .post-transition-metals {
        border: 3px solid #40C4FF;
    }

    .lanthanoids.focus-group:after {
        border-top: 10px solid #fd6d3f;
    }
    .card .lanthanoids {
        border: 3px solid #fd6d3f;
    }

    .actinoids.focus-group:after {
        border-top: 10px solid #ff1744;
    }
    .card .actinoids {
        border: 3px solid #ff1744;
    }
    
    .card div {
        transition: .7s;
    }

    .card .element {
        background: transparent;
        box-sizing: border-box;
        padding: 20px;
        max-width: 250px;
        max-height: 250px;
        color: black;
    }

    .card .element-symbol {
        font-size: 100px;
        text-align: left;
        color: black;
    }

    .card .element-name {
        font-size: 30px;
        display: block;
        color: black;
    }

    .card .atomic-mass {
        display: block;
        font-size: 18px;
        max-width: none;
        margin-top: 10px;
        color: black;
    }

    .card .atomic-orbital-shells {
        font-size: 20px;
        right: 20px;
        display: block;
        color: black;
    }
    
    .card .atomic-orbital-shells span {
        line-height: normal;
        color: black;
    }

    .card .atomic-number {
        font-size: 30px;
        text-align: left;
        display: block;
        color: black;
    }

    .card p:first-of-type {
        margin-top: 0px;
    }

    .card.description p:first-of-type:first-letter {
        font-size: 50px;
        font-weight: bold;
        float: left;
        position: relative;
        line-height: 28px;
        margin-bottom: 5px;
    }

    .card ul {
        border-top: 1px solid #e2e2e2;
        padding-top: 20px;
    }

    .card ul:last-of-type {
        margin-bottom: 0px;
    }

    @media(max-width: 1200px) {

        .card {
            flex-wrap: wrap;
            min-width: 49%;
        }

        .card.overview {
            min-width: 100%;
            margin-top: 10px;
        }

        .card.summary {
            margin-right: 5px;
        }

        .card.description {
            margin-left: 5px;
        }

        .wrapper-inner {
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .info .close {
            top: 5px;
            right: 5px;
        }

    }

    @media(max-width: 768px) {

        .card .element {
            position: relative;
            margin: auto;
        }

        .card .element-symbol {
            font-size: 70px;
        }

    }

    @media(max-width: 600px) {     

        .card.summary {
            min-width: 100%;
            margin: auto;
        }

        .card.description {
            min-width: 100%;
            margin-top: 10px;
            margin-left: 0px;
        }

        .card .element {
            min-height: 250px;
        }

    }

    @media(max-width: 400px) {

        .card .element {
            max-height: 150px;
            max-width: 150px;
            min-height: initial;
            padding: 10px;
        }

        .card .element-symbol {
            font-size: 40px;
            text-align: left;
        }

        .card .element-name {
            font-size: 18px;
            display: block;
        }

        .card .atomic-mass {
            display: block;
            font-size: 15px;
            max-width: none;
            margin-top: 10px;
        }

        .card .atomic-orbital-shells {
            font-size: 12px;
            right: 10px;
            display: block;
        }

        .card .atomic-number {
            font-size: 15px;
            text-align: left;
            display: block;
        }

        .card ul {
            padding-left: 20px;
        }

    }