/*Name: Thirza Dado */
/*Student number: 10492682*/
/*This style program adds style features to my interactive scatter plot*/

rect {
    fill: transparent;
    shape-rendering: crispEdges;
    align-items: center;
}

.axis path,
.axis line {
    fill: none;
    stroke: rgba(0, 0, 0, 0.1);
    shape-rendering: crispEdges;
}

.axisLine {
    fill: none;
    shape-rendering: crispEdges;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2px;
}

.dot {
    fill: none;
    fill-opacity: .3;
}

.dot:hover{
    fill-opacity: 2;
}


#wrapper{
    display: flex;
    align-items: center;
}
@media (max-width: 320px) {
    .flexcontainer {
    display: block;
    }
}

#xvar{
    margin-left: 1000px;
    margin-right: 10px;
}

.dropbtn {
    background-color: #AD5D5D;
    color: white;
    padding: 16px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    font-size: 13px;
    padding: 7px 7px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #e5cccc;
}

.legend-box {
    cursor: pointer;
}