style.css

body{
  font-family: Arial;
}

h1{
  text-align: center;
}

h2{
  text-align: center;
    clear: both;
}

h3{
  text-align:left;
}

h4{
  text-align: center;
  font-size: 22;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.col1 {
  float: left;
  width: 20%;

}

.col2 {
  float: center;
  width: 50%;
}

.col3 {
  float: center;
  width: 30%;
}

#frame {
  width: 500px;
  height: 500px;
}


#map {
  height: 500px;
  width: 100%;
  margin: auto;
}

.container {
  display: flex;
  text-align:center;
  justify-content: space-around;
}



/* Clear floats after the columns */

line {
    stroke-width: 5px;
    stroke: black;
}

circle {
   fill: black;
}

circle:hover{
  fill: yellow;
}

.Border {
  stroke: purple;
  stroke-width: 4;
}

.tooltip{
    position: absolute;
    background-color: white;
    color: black;
    font-weight: bold;
    padding: 5px;
    border-radius: 2px;
    border-style: solid;
    border-color: black;
}

.title{
    font-size: 25px;
    padding-bottom: 10px;
    line-height: 18;
}

div.center {
text-align: center;
}

video {
  text-align: center;
  width: 70%;
}