:root {
    --main-color: #000;
    --C-color: #008080;
    --D-color: #9CFFFA;
    --E-color: #F6E27F;
    --F-color: #FFA420;
    --G-color: #EC3232;
    --A-color: #B07BAC;
    --B-color: #4f0453;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.copy {
    font-size: .8em;
    opacity: .5;
    position: absolute;
    bottom: 1em;
}

section {
    background-color: #fefefe;
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.borderedWrapper {
    width: 96vw;
    height: calc(100vh - 4vw);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 5px;
}

#spartitoBlock {
    flex-direction: column;
    border-color: var(--main-color);
    transition: border-color 200ms ease;
}

#spartitoBlock #nomeCorso {
    justify-self: flex-end;
    font-size: 4em;
    transition: color 200ms ease;
}

#spartitoBlock svg {
    justify-self: center;
    width: 80%;
    height: auto;
}

#C,
#D,
#E,
#F,
#G,
#A,
#B {
    cursor: pointer;
}

#C path,
#D path,
#E path,
#F path,
#G path,
#A path,
#B path {
    transition: fill 200ms ease;
}

#C:hover path {
    fill: var(--C-color);
}

#D:hover path {
    fill: var(--D-color);
}

#E:hover path {
    fill: var(--E-color);
}

#F:hover path {
    fill: var(--F-color);
}

#G:hover path {
    fill: var(--G-color);
}

#A:hover path {
    fill: var(--A-color);
}

#B:hover path {
    fill: var(--B-color);
}

.hidden {
    opacity: .5;
}