html {
    font-family: 'Raleway';
    font-weight: 400;
}

h1 {
    text-align: center;
    color: #444444;
    font-family: 'Raleway';
}

h2.name {
    color: #444444;
    font-family: 'Raleway';
    font-weight: 700;
    padding-bottom: -5px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 35px
}

.card {
    background-color: #fbfbfb;
    border: #444444 solid 0px;
    margin: 0px auto;
    width: 25%;
    min-width: 350px;
    text-align: center;
    border-radius: 15px;
    box-shadow: -3px 3px 10px 0px rgba(68,68,68,0.48), 1px -1px 3px 0px rgba(68,68,68,0.28);
        -webkit-box-shadow: -3px 3px 10px 0px rgba(68,68,68,0.48), 1px -1px 3px 0px rgba(68,68,68,0.28);
        -moz-box-shadow: -3px 3px 10px 0px rgba(68,68,68,0.48), 1px -1px 3px 0px rgba(68,68,68,0.28);
}

#diagram {
    visibility: hidden;
    margin: 0 auto;
    padding-bottom: 0px;
    width: 80%;
}

#positions {
    visibility: hidden;
}

button.main{
    margin-top: 10px;
    height: 45px;
    width: 100%;
    border: none;
    font-family: 'Raleway';
    font-weight: 900;
    font-size: 35px;
    text-transform: lowercase;
    background-color: #fbfbfb;
    color: #444444;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    outline: none;
}

button.main:hover {
    background-color: #D5D4D4;
}

button.variants {
    visibility: hidden;
    background: #fbfbfb;
    font-weight: 900;
    font-size: 18px;
    color: #5c616c;
    border: none;
    height: 25px;
    width: 35px;
    margin: -2px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    transition: 0.5s background;
    -webkit-transition: 0.5s background;
    -moz-transition: 0.5s background;
    text-align: center;
    align: center;
}

button.variants:hover {
   background: #5c616c;
   color: #fbfbfb;
}

button.selected {
    background: #5c616c;
    color: #fbfbfb;
}