.rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}


html{
 overflow: clip;
}
body {
    background-color: #e6e6e6;
    margin-left: 0%;
    margin-right: 0%;
    width: 100%;
  
  }

  .containerMap{
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }

  @media only screen and (max-width: 1170px){
    /* For mobile phones: */
    [class="containerMap"] {
    display: block;
    
    }
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [class="containerMap"] {
    display: block;
    min-width: 100%;
    }
  }



.logo{
  width: 8%;
  height: auto;
  position: sticky;
  margin-left: 4%;
  margin-top: 2%;
  position:fixed;
}
  
#VesseltoHudsonRiverGreenwayLoop {
  fill: none;
  stroke: black;
  stroke-width: 0.2em;
  position: absolute;
  margin-top: -6%;
  margin-left: 50%;
  max-width: 50%;
  transform: rotate(15deg);
  pointer-events: visibleStroke;
}

#VesseltoHudsonRiverGreenwayLoop:hover {
  stroke: rgb(48, 48, 125);
  cursor: pointer;
}

@media only screen and (max-width: 600px){
  /* For mobile phones: */
  [id="VesseltoHudsonRiverGreenwayLoop"] {
  min-width: 100%;
  margin-left: -22%;
  margin-top: 50%;
  }
}

  #ThreeLoopsInCentralPark{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    margin-top:10%;
    margin-left:-18%;
    transform: rotate(80deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #ThreeLoopsInCentralPark:hover{
    stroke:red;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="ThreeLoopsInCentralPark"] {
    min-width: 100%;
    margin-top: 70%;
    margin-left:-20%;
    }
  }
  #ThreeLoopsatShumanRunningTrack{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:8%;
    left:60%;
    transform: rotate(0deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #ThreeLoopsatShumanRunningTrack:hover{
    stroke:red;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="ThreeLoopsatShumanRunningTrack"] {
    min-width: 100%;
    margin-left: -50%;
    margin-top:15%;
    }
  }

  #StuyvesantSquareParktoWilliansburgBridgeLoop{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:0%;
    left:45%;
    transform: rotate(10deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #StuyvesantSquareParktoWilliansburgBridgeLoop:hover{
    stroke:red;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="StuyvesantSquareParktoWilliansburgBridgeLoop"] {
    min-width: 100%;
    margin-top:54%;
    margin-left:-30%
    }
  }

  #SmallLoopAtProspectPark{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    margin-top:-10%;
    margin-left:15%;
    transform: rotate(300deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  
  }

  #SmallLoopAtProspectPark:hover{
    stroke:blue;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="SmallLoopAtProspectPark"] {
    min-width: 100%;
    }
  }


  #RooseveltIsland{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    margin-top:-25%;
    margin-left:-8%;
    transform: rotate(60deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #RooseveltIsland:hover{
    stroke:rgb(148, 44, 44);
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="RooseveltIsland"] {
    min-width: 100%;
    }
  }


  #RiversideParkFromEmpireStateTrailtoColumbiaUniversity{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:0%;
    left:3%;
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #RiversideParkFromEmpireStateTrailtoColumbiaUniversity:hover{
    stroke:rgb(148, 44, 44);
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="RiversideParkFromEmpireStateTrailtoColumbiaUniversity"] {
    min-width: 100%;
    }
  }

  #PebbleBeachtoBrooklynBridgeParkLoop{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:35%;
    left:12%;
    transform: translate(-50%, -50%);
    transform: rotate(60deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #PebbleBeachtoBrooklynBridgeParkLoop:hover{
    stroke: blue;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="PebbleBeachtoBrooklynBridgeParkLoop"] {
    min-width: 100%;
    margin-left: -30%;
    margin-top:45%;
    }
  }

#OneLoopatShumanRunningTrack{
  fill: none;
  stroke: black;
  stroke-width: 0.2em;
  position: absolute;
  top:40%;
  left: 66%;
  transform: rotate(280deg);
  max-width: 40%;
  pointer-events: visibleStroke;
}

#OneLoopatShumanRunningTrack:hover{
  stroke: green;
  cursor: pointer;
}

@media only screen and (max-width: 600px){
  /* For mobile phones: */
  [id="OneLoopatShumanRunningTrack"] {
  min-width: 100%;
  margin-left: 2%;
  margin-top: 23%;
  }
}



#OneLoopatCentralPark{
  fill: none;
  stroke: black;
  stroke-width: 0.2em;
  position: absolute;
  top:-20%;
  left: 56%;
  transform: rotate(100deg);
  max-width: 40%;
  pointer-events: visibleStroke;
  }

  #OneLoopatCentralPark:hover{
    stroke: green;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="OneLoopatCentralPark"] {
    min-width: 100%;
    margin-left: -32%;
    margin-top: 50%;
    }
  }

  #MadisonSquareParktoEastRiverParkField8{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:-20%;
    left: 7%;
    transform: rotate(80deg);
    max-width: 40%;
    pointer-events: visibleStroke;
  }

  #MadisonSquareParktoEastRiverParkField8:hover{
    stroke:blue;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="MadisonSquareParktoEastRiverParkField8"] {
    min-width: 100%;
    }
  }

#HudsonRiverto5av11st{
  fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:4%;
    left:10%;
    max-width:40%;
    pointer-events: visibleStroke;
}


#HudsonRiverto5av11st:hover{
  stroke:green;
  cursor: pointer;
}

@media only screen and (max-width: 600px){
  /* For mobile phones: */
  [id="HudsonRiverto5av11st"] {
  min-width: 100%;
  }
}

  #LittleIslandtoOneWorldTrade{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:30%;
    left: 55%;
    transform: rotate(60deg);
    max-width:40%;
    pointer-events: visibleStroke;
  }

  #LittleIslandtoOneWorldTrade:hover{
    stroke:red;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="LittleIslandtoOneWorldTrade"] {
    min-width: 100%;
    margin-top:55%;
    margin-left: -40%;
    }
  }

  #HudsonRun{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:20%;
    left: 20%;
    max-width:40%;
    pointer-events: visibleStroke;
  }

  #HudsonRun:hover{
    stroke:blue;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="HudsonRun"] {
    min-width: 100%;
    margin-top:60%;
    margin-left: -30%;
    }
  }

  #BrooklynBridgeLoop{
    fill: none;
    stroke: black;
    stroke-width: 0.2em;
    position: absolute;
    top:22%;
    left: 0%;
    max-width:40%;
    pointer-events: visibleStroke;
  }

  #BrooklynBridgeLoop:hover{
    stroke: blue;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="BrooklynBridgeLoop"] {
    min-width: 100%;
    }
  }

  #BigLoopAtProspectPark{
    fill: none;
    stroke: black;
   stroke-width: 0.2em;
    position: absolute;
    top:-5%;
    left: 22%;
    transform: rotate(145deg);
    max-width:40%;
    pointer-events: visibleStroke;
  }

  #BigLoopAtProspectPark:hover{
    stroke: green;
    cursor: pointer;
  }

  @media only screen and (max-width: 600px){
    /* For mobile phones: */
    [id="BigLoopAtProspectPark"] {
    min-width: 100%;
    }
  }

  #RiversideParkFromEmpireStateTrailtoColumbiaUniversity{
    fill: none;
     stroke: black;
     stroke-width: 0.2em;
     position: absolute;
     top:2%;
     left:40%;
     max-width:40%;
     pointer-events: visibleStroke;
     }
     
        
   #RiversideParkFromEmpireStateTrailtoColumbiaUniversity:hover {
     stroke: red;
     cursor: pointer;
    }

    @media only screen and (max-width: 600px){
      /* For mobile phones: */
      [id="RiversideParkFromEmpireStateTrailtoColumbiaUniversity"] {
      min-width: 100%;
      }
    }

    #RockefellerParkLoop{
      fill:none;
      stroke: black;
      stroke-width: 0.2em;
      position: absolute;
      top:14%;
      left:47%;
      max-width:40%;
      transform: rotate(90deg);
      pointer-events: visibleStroke;
      
    }
  
    #RockefellerParkLoop:hover {
      stroke: red;
      cursor: pointer;
    }

    @media only screen and (max-width: 600px){
      /* For mobile phones: */
      [id="RockefellerParkLoop"] {
      min-width: 100%;
      }
    }

    /* Popup container */
.popup {
  position: absolute;
  margin-top: 25%;
  margin-left: 57%;
  width: 30%;
  height: fit-content;
  display:block;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.752);
  padding: 4%;
}

.popup:hover{
  filter: invert(100%);
   transition: 0.5s;
 }

 @media only screen and (max-width: 600px){
  /* For mobile phones: */
  [class="popup"] {
    max-width: 60%;
    max-height: fit-content;
    font-size: 1em;;
    margin-left: 30%;
    margin-top: 30%;
    padding: 4%;
    
  }
}
 

.popupText{
  font-family: "Rajdhani", sans-serif;
  text-decoration: none;
  border-radius: 1em;
  text-align: center;
  color:rgb(245, 245, 245);
  cursor: pointer;

}

@media only screen and (max-width: 600px){
  /* For mobile phones: */
  [class="popupText"] {
    max-width: 60%;
    max-height: fit-content;
    font-size: 1em;;
    margin-left: 2%;
    margin-top: 30%;
    margin-bottom: 2%;

  }
}

  .takeTheChallenge{
    background-color: #e6e6e6;
    color:black;
    border-radius: 0%;
    padding: 2%;
    margin: 4%;
    text-align: left;
    font-family: "Rajdhani", sans-serif;
    text-align: center;
  }

  .takeTheChallengeLink{
    text-decoration: none;
    font-family: "Rajdhani", sans-serif;
    padding: 2%;
    color:black;
    text-align: center;
  }