styles.css

body{
  background-color: #568cdb;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;   
}

.node circle {
  fill: #464866;
  stroke: #2948ba;
  stroke-width: 3px;
}

.node text {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 1000;

}

.link {
fill:none;
stroke:rgba(41, 72, 186,0.3);
stroke-width: 3px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
font-family: 'Roboto', sans-serif;
}

/* Modal Content/Box */
.modal-content {
color: white;
background-color: #25274d;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 2px solid white;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */   
height: 0%;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: #25274d; /* Black fallback color */
background-color: rgba(37,39,77); /* Black w/opacity */
overflow: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: white;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
}
}

/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #25274d;
position: relative;
}

/* Style navigation menu links */
.topnav a {
color: white;
padding: 20px 22px;
text-decoration: none;
font-size: 36px;
display: block;
}
#logo {
color: white;
float: left;
text-align: center;
}
/* Style the hamburger menu */
.topnav a.icon {
background-color: #25274d;
color: white;
float: right;

}

/* Add a grey background color on mouse-over */
#button:hover {
background: white;
color: #25274d;
}

/* styling the text wrapper */
.sqs-block-content {
  display: block;
  color: black;
  overflow-wrap: break-word;
  letter-spacing: 0em;
  text-transform: none;
  font-size: 20px;
  font-weight: 200;
  line-height: 1.5;
  padding: 0;
}
h3 {
  font-size: 20px;
}
h2 {
  font-size: 36px;
  text-align: center;
}
.demopic {
  display: block;
  object-fit: fill;
  width: 100%;
  height: auto;
}
.imgwrapper{
  text-align: center;
  border: #ffca61 solid 0.5vw;
  padding: 0;
  margin: -0.5vw 0;
/* Style the active link (or home/logo) */
}
.active {
background-color: #212121;
color: #DADADA;
}

.textBox{
  background-color: #1c307a;
  color: white;
  border: #ffca61 0.5vw solid;
  text-align: center;
  padding:1vw;
}

.imageBox{
  object-fit: fill;
  padding: 0;
}

.surgeIcon{
  align-content: center;
  width: 65px;
  height: 65px;
  float: left;
  padding: 8px;
}