styles.css

/* HTML */

html {
    scroll-behavior: smooth;
    height: 100%;

  }

/* Body properties */
/* Bootstrap  */
#front_page {
  margin-left: 20px;
}

.card-text {
 color: white !important
}

#grad {
    background-image: linear-gradient(to bottom right, #7df0f0, #cff0c9);
    
  }

body {
    /* margin: 0; */
    /* display: grid;
    grid-template-columns: min-content 1fr; */
    font-family: system-ui, sans-serif;
    
    /* this breaks position sticky in Firefox */
    /* overflow-x: hidden; */
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
  }

/* Home page logo */
#logo { color: #fad20a; 
    font: bold 60px Roboto, Arial, Sans-Serif;
    text-shadow: 1px 1px #0a9afa, 2px 2px #0a9afa, 3px 3px #0a9afa;
    -webkit-transition: all 0.12s ease-out;
    -moz-transition: all 0.12s ease-out;
    -ms-transition: all 0.12s ease-out;
    -o-transition: all 0.12s ease-out;
 }

 #logo:hover {
    position: relative; top: -3px; left: -3px; 
    text-shadow: 1px 1px #0a9afa, 2px 2px #0a9afa, 3px 3px #f0f9ff, 4px 4px #0a9afa, 5px 5px #0a9afa, 6px 6px #0a9afa;
 }

/* Text properties */
h1 { 
    font-family:arial;
    font-size:95px;
    font-style:italic;
    color:#31ecaf
}

h3 {
    font-family: 'Arial', Geneva, sans-serif;
    color: rgb(49, 136, 148);
}

h2 {
    font-family: 'Arial', Geneva, sans-serif;
    font-size: 35px;
    color:  rgb(49, 136, 148);
    padding-top: 25px;
    text-align: center;
} 

p {
    font-family: 'Arial', Geneva, sans-serif;
    font-size:18px;
    color: rgb(65, 73, 107);
}

/* NAV BAR */

/* Add a black background color to the top navigation */
#navbar {
    background-color: #8cbaba;
    overflow: hidden;
    opacity: .9;
    /* margin:0 auto; */
    z-index: 1;
    /* left:0; */

    margin-bottom:40px;
    text-align: center;
  }

/* Style the links inside the navigation bar */
#navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
#navbar a:hover {
    background-color: #ddd;
    color: black;
    transition: 0.3s;
  }
  
  /* Add a color to the active/current link */
#navbar a.active {
    background-color: #0a9afa;
    color: white;
  }

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 60px;
  }

/*                                 */
/* prerequisite mapper gets loaded on top of this */
#mapper_div {
    margin-top: 25px;
    border-radius: 25px;
    width: 1200px;
    height: 850px;
    border: 4px solid #adadbe;
    background: rgb(235, 230, 230);
    /* opacity: 0; */
}

/* Textbox div for tutorial section */
.tut_img {
    background: rgb(29, 29, 29);
    text-align: center;
    color: white;
    font-size: 20px;
    padding-bottom: 5px;
    margin-left: 15px;
    margin-bottom: 15px;
    border-radius: 25px;
    display: inline-block;
}

.tut_img img {
    /* width: 455px; */
    height: 225px;
    display: block;
    margin: 0 auto;
    max-width:100%;
    /* height: auto; */
}


/* Graph style classes */
div.tooltip {	
  position: absolute;			
  text-align: center;			
  /* width: 70px;					
  height: 28px;					 */
  padding: 2px;				
  font: 12px sans-serif;		
  background: lightsteelblue;	
  border: 0px;		
  border-radius: 8px;			
  pointer-events: none;			
}

g.tooltip2 {
  padding: 2px;				
  font: 12px sans-serif;				
}


/* .tab { margin-left: 40px; } */