.svg {
    width: 100%;
    height: auto;
}
.image-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.image-map a {
    position: absolute;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    font-size: clamp(12px, 2vw, 20px);
    background-color: #3333cc;
    padding: 5px;
}
.image-map a:hover {
    background-color: #33ccff;
    color: #FFF;
}
.image-map span {
    position: absolute;
}

#curve-path {
    fill: none;
    stroke: #3333cc;
    stroke-width: 40;
}
.svg-a:hover #curve-path {
    stroke: #33ccff;
}
.curved-text {
    fill:white;
    font-size: 1.5rem;
    dominant-baseline: central;
}

@media (min-width: 961px) {
    .map-skinny {
        display: none;
    }
    .map-wide {
        margin: 2em auto;
        padding: 0 1vw;
    }
    a.timeline {
        top: 75%;
        left: 69%;
        font-size:1.6em;
        padding: 10px;
    }
    a.rotunda {
        top: 62.5%;
        left: 44%;
        font-size: 1.6em;
        padding: 10px;
    }
    a.enigma {
        top: 70.3%;
        left: 53.5%;
        font-size: 0.8em;
    }
    a.gaming {
        top: 84.5%;
        left: 82%;
    }
    a.apollo-computers {
        top: 62.5%;
        left: 73%;
    }
    a.pdp {
        top: 54.5%;
        left: 92%;
    }
    a.supercomputing {
        top: 9.5%;
        left: 53%;
        font-size: 1.6em;
        padding: 50px; /* kind of a big deal */
    }
    a.punch-cards {
        top: 67.5%;
        left: 80%;
        transform:rotate(90deg);
    }
    a.apollo {
        top: 49.5%;
        left: 70%;
        font-size: 1.6em;
        padding: 8px;
    }
    a.computer-media {
        top:24.5%;
        left:47%;
    }
    a.look-nook {
        top: 51%;
        left: 37.75%;
        font-size: 0.8em;
    }
    a.scary-guy {
        top: 49.55%;
        left: 42.5%;
        font-size: 0.6em;
        transform:rotate(90deg);
    }
    a.toilets {
        font-size: 0.8em;
        background-color: unset;
        color: #000;
        top: 26.8%;
        left: 20%;
    }
    span.class1 {
        top: 86.5%;
        left: 65.75%;
        max-width:20vw;
    }
    span.class2 {
        top: 86.5%;
        left: 55%;
        max-width:20vw;
    }
    span.staff {
        top: 84.5%;
        left: 36.5%;
        max-width:20vw;
    }
    span.event {
        top: 60%;
        left: 11%;
        font-size:1.6em;
        max-width:20vw;
    }
    span.entrance {
        top: 83.5%;
        left: 45.3%;
        max-width:20vw;
    }
    span.chip-wall {
        top: 29.5%;
        left: 74%;
    }
    span.byte-wall {
        top: 21.5%;
        left: 78%;
    }
}
@media (min-width: 1000px) {
    span.entrance {
        left: 45.8%;
    }
    span.class1 {
        left: 66.25%;
    }
    span.class2 {
        left: 55.5%;
    }
    span.chip-wall {
        top: 29.5%;
        left: 74.25%;
    }
    span.byte-wall {
        top: 21.5%;
        left: 78.5%;
    }
}
@media (min-width: 1100px) {
    span.chip-wall {
        top: 29.75%;
        left: 74.5%;
    }
    span.byte-wall {
        top: 21.75%;
        left: 78.75%;
    }
    a.punch-cards {
        left: 81%;
    }
}
@media (min-width: 1150px) {
    span.chip-wall {
        top: 30%;
        left: 74.75%;
    }
    span.byte-wall {
        top: 22%;
        left: 79%;
    }
    span.entrance {
        left: 46.3%;
    }
    span.class1 {
        left: 66.5%;
    }
    span.class2 {
        left: 56%;
    }
}
@media (min-width: 1200px) {
    span.chip-wall {
        top: 31.3%;
        left: 75.3%;
    }
    span.byte-wall {
        top: 24%;
        left: 80%;
    }
    a.punch-cards {
        left: 81.5%;
    }
}

@media (max-width: 960px) {
    .map-wide {
        display: none;
    }
    .map-skinny {
        margin: 2em auto;
        padding: 0 1vw;
    }
    a.timeline {
        top: 75%;
        left: 55%;
        font-size:1.6em;
        padding: 10px;
    }
    a.rotunda {
        top: 62%;
        left: 18%;
        font-size: 1.6em;
        padding: 10px;
    }
    a.enigma {
        top: 70.5%;
        left: 33.3%;
        font-size: 1em;
    }
    a.gaming {
        top: 86.5%;
        left: 75%;
        font-size:1.2em;
    }
    a.apollo-computers {
        top: 63%;
        left: 57%;
        font-size:1.3em;
    }
    a.pdp {
        top: 55.5%;
        left: 90%;
    }
    a.supercomputing {
        top: 9.5%;
        left: 33%;
        font-size: 1.6em;
        padding: 50px; /* kind of a big deal */
    }
    a.punch-cards {
        top: 66.6%;
        left: 74%;
        transform:rotate(90deg);
    }
    a.apollo {
        top: 50.5%;
        left: 55%;
        font-size: 1.6em;
        padding: 8px;
    }
    a.computer-media {
        top:22%;
        left:27%;
    }
    a.look-nook {
        top: 50.5%;
        left: 8.5%;
        font-size: 1em;
    }
    a.scary-guy {
        top: 50%;
        left: 16%;
        font-size: 0.6em;
        transform:rotate(90deg);
    }
    span.class1 {
        top: 85.5%;
        left: 51%;
        max-width:20vw;
    }
    span.class2 {
        top: 85.5%;
        left: 34.5%;
        max-width:20vw;
    }
    span.staff {
        top: 83.5%;
        left: 7.5%;
        max-width:20vw;
    }
    span.event {
        top: 54.5%;
        left: 10%;
        font-size:1.6em;
        max-width:20vw;
    }
    span.entrance {
        top: 85.5%;
        left: 20.8%;
        max-width:20vw;
    }
    span.chip-wall {
        top: 32%;
        left: 65%;
    }
    span.byte-wall {
        top: 24%;
        left: 72%;
    }
}
@media (max-width: 800px) {
    a.apollo {
        font-size: 1.3em;
    }
    a.supercomputing {
        font-size: 1.3em;
    }
    a.computer-media {
        font-size:1.1em;
        top:22.5%;
    }
    a.timeline {
        font-size: 1.3em;
    }
    span.chip-wall {
        transform: scale(0.8);
    }
    span.byte-wall {
        transform: scale(0.8);
    }
    a.gaming {
        font-size:1.1em;
    }
    a.punch-cards {
        top:68%;
        left:73%;
        font-size:1.1em;
    }
    a.pdp {
        font-size:1.1em;
    }
    a.apollo-computers {
        left: 60%;
        font-size: 1.1em;
    }
    a.enigma {
        left:32.5%;
    }
}
    
@media (max-width: 705px) {
    span.chip-wall {
        top: 29%;
        left: 62%;
    }
    span.byte-wall {
        top: 21%;
        left: 68%;
    }
    a.supercomputing {
        top: 11.5%;
        left: 30%;
        padding: 50px; /* kind of a big deal */
    }
    a.computer-media {
        top:25%;
        left:27%;
    }
    span.class1 {
        font-size:0.8em;
        left:52%;
    }
    span.class2 {
        font-size:0.8em;
        left:36%;
    }
    a.look-nook {
        text-align:center;
        max-width:8vw;
        top: 51.5%;
        left: 8%;
    }
    a.enigma {
        left:32%;
    }
    a.punch-cards {
        top:68%;
        left:72%;
        font-size:1.1em;
    }
}
@media (max-width: 615px) {
    span.chip-wall {
        transform: scale(0.7);
        top: 28.5%;
        left: 60%;
    }
    span.staff {
        left: 7%;
    }
    span.byte-wall {
        transform: scale(0.7);
        top: 21%;
        left: 67%;
    }
    a.punch-cards {
        top:69%;
        left:72%;
        font-size:1em;
    }
}

@media (max-width: 575px) {
    a.computer-media {
        top:24.5%;
        left:25%;
    }
    span.entrance {
        left: 20%;
        font-size:0.8em;
    }
    span.class1 {
        left:51%;
        transform:rotate(90deg);
    }
    span.class2 {
        left:35%;
        transform:rotate(90deg);
    }
    a.look-nook {
        top: 52%;
        left: 8%;
        max-width:8vw;
    }
    a.enigma {
        left:31%;
    }
    a.computer-media {
        top:27%;
    }
    a.apollo-computers {
        font-size: 1em;
        left:60%;
    }
    a.punch-cards {
        top:69%;
        left:72%;
        font-size:0.9em;
    }
}
@media (max-width: 555px) {
    span.chip-wall {
        transform: scale(0.6);
        top: 28.5%;
        left: 60%;
    }
    span.byte-wall {
        transform: scale(0.6);
        top: 20%;
        left: 66%;
    }
    a.apollo-computers {
        font-size: 0.9em;
        left:60%;
    }
    a.enigma {
        left:30.5%;
    }
}
@media (max-width:515px) {
    span.chip-wall {
        top: 27%;
        left: 58.5%;
    }
    span.byte-wall {
        top: 19%;
        left: 65%;
    }
    a.supercomputing {
        padding:30px;
    }
    a.computer-media {
        font-size:1em;
    }
    a.punch-cards {
        top:69%;
        left:72%;
        font-size:0.8em;
    }
}

@media (max-width:460px) {
    a.supercomputing {
        font-size:1.1em;
    }
    a.apollo {
        font-size:1.1em;
    }
    a.apollo-computers {
        left:61%;
    }
    a.timeline {
        font-size:1.1em;
        padding:5px;
    }
    a.rotunda {
        font-size:1.1em;
    }
    a.gaming {
        font-size:0.9em;
    }
    a.look-nook {
        font-size:0.7em;
    }
    a.enigma {
        font-size:0.7em;
    }
    a.scary-guy {
        display: none;
    }
    span.chip-wall {
        transform: scale(0.55);        
        top: 27%;
        left: 58%;
    }
    span.byte-wall {
        transform: scale(0.55);
        top: 19%;
        left: 64.5%;
    }
    a.punch-cards {
        top:69%;
        left:72%;
        font-size:0.7em;
    }
    span.class1 {
        font-size:0.6em;
    }
    span.class2 {
        font-size:0.6em;
    }
    span.staff {
        left: 6%;
        font-size:0.75em;
    }
}

@media (max-width:450px) {
    span.chip-wall {
        transform: scale(0.55);        
        top: 26%;
        left: 56%;
    }
    span.byte-wall {
        transform: scale(0.55);
        top: 17%;
        left: 62%;
    }
    span.entrance {
        font-size:0.75em;
    }
    a.apollo {
        font-size:1em;
    }
    a.apollo-computers {
        font-size:0.75em;
    }
}

@media (max-width:415px) {
    a.supercomputing {
        padding:20px;
    }
    span.entrance {
        font-size:0.7em;
    }
    span.chip-wall {
        transform: scale(0.55);        
        top: 25%;
        left: 54%;
    }
    span.byte-wall {
        transform: scale(0.55);
        top: 16%;
        left: 60%;
    }
}

@media (max-width:370px) {
    a.supercomputing {
        padding:15px;
    }
    a.apollo {
        font-size:0.9em;
    }
    span.entrance {
        font-size:0.6em;
    }
    span.chip-wall {
        transform: scale(0.55);        
        top: 22%;
        left: 50%;
    }
    span.byte-wall {
        transform: scale(0.55);
        top: 13%;
        left: 57%;
    }
}