body {
    background-color: #eee;
}

header {
    font-size: x-large;
    text-align: center;
    background-color: #555;
    color: #ddd;
    padding: 5px;
    font-family: Helvetica, sans-serif;
    margin-bottom: 50px;
}

header a {
    background-color: #ddd;
    color: #555;
    text-decoration: none;
    padding: 0 3px 0 3px;
}

header a:hover {
    background-color: #555;
    color: #ddd;
    text-decoration: underline;
}

footer {
    text-align: center;
    background-color: #555;
    color: #ddd;
    padding: 5px;
    font-family: Helvetica, sans-serif;
    margin-top: 50px;
}

footer a {
    background-color: #ddd;
    color: #555;
    text-decoration: none;
    padding: 0 3px 0 3px;
}

footer a:hover {
    background-color: #555;
    color: #ddd;
    text-decoration: underline;
}

.wheelNavGitHub {
    height: 200px;
    width: 200px;
    margin: auto;
}

.wheelNav {
    height: 350px;
    width: 350px;
    margin: auto;
}

.wheelNavSmall {
    height: 120px;
    width: 120px;
    margin: auto;
}

@media (max-width: 480px) {
  .wheelNav {
    height: 250px;
    width: 250px;
  }

  .wheelNavSmall {
    height: 80px;
    width: 80px;
  }
}

/* Css classes for radialWheel */

#wheelnav-radialWheel-slice-0 {
    fill: #cbff71;
}

#wheelnav-radialWheel-slice-1 {
    fill: #a2ff00;
}

#wheelnav-radialWheel-slice-2 {
    fill: #6ad400;
}

#wheelnav-radialWheel-slice-3 {
    fill: #09b501;
}

#wheelnav-radialWheel-slice-4 {
    fill: #028f27;
}

#wheelnav-radialWheel-slice-5 {
    fill: #0a6f25;
}

[class|=wheelnav-radialWheel-slice-hover]
{
    stroke-width: 2px;
    cursor: pointer;
}

[class|=wheelnav-radialWheel-slice-selected] {
    stroke-width: 3px;
}
    
#wheelnav-radialWheel-title-5 > tspan {
    font-family: 'Bookman Old Style', Bookman, 'URW Bookman L', 'Palatino Linotype', serif;
}

.wheelnav-radialWheel-title-basic-5 > tspan {
    font-size: 17px;
}

.wheelnav-radialWheel-title-hover-5 > tspan {
    font-size: 23px;
}

.wheelnav-radialWheel-title-selected-5 > tspan {
    font-size: 33px;
}

.wheelnav-radialWheel-spreader-in,
.wheelnav-radialWheel-spreader-out {
    fill: #0a6f25;
    stroke-width: 3px;
    cursor: pointer;
}

.wheelnav-radialWheel-marker {
    stroke: orange;
    stroke-width: 3px;
    fill: #666;
    fill-opacity: 0.3;
}