/*Ashraf & Vincent*/

:root {
  --tabPurple:   rgb( 86,  2, 105);
  --hoverPurple: rgb(106, 22, 125);
}

#murf{
     margin-left: 26%;
     margin-top: -45%;
}

#nash{
     margin-left: 10%;
     margin-top: -55%;
}

#chatt{
     margin-left: 60%;
     margin-top: -20%;
}

#cowan{
     margin-left: 32%;
     margin-top: -24%;
}

#knox{
     margin-left: 83%;
     margin-top: -47%;
}

#hunt{
     margin-left: 15%;
     margin-top: -8%;
}

#atl{
     margin-left: 85%;
     margin-top: -8%;
}

#mont{
     margin-left: 43%;
     margin-top: -30%;
}

#sewanee{
     margin-left: 43%;
     margin-top: -24%;
}

#winch{
     margin-left: 27%;
     margin-top: -30%;
}

.mapdiv{
	   position: relative;
	   margin-left: auto;
     margin-right: auto;
	   width: 800px;
}

.mapdiv .mapButton{
        position: absolute;
        background-color: var(--tabPurple);
        color: white;
        font-size: 16px;
        padding: 5px 5px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        opacity: 0.7;
}

.mapdiv .mapButton:hover{
        opacity: 1;
}

.mapdiv img{
	display: inline-block;
     width: 100%;
     border-radius: 5%;
     border: 2px solid black;
     z-index: 1;
}

@media only screen and (max-width: 850px) {
  .mapdiv {
    width: 98%;
  }
}
@media only screen and (max-width: 750px) {

  .mapdiv .mapButton{
        font-size: 10px;
}
}