html {
   scroll-behavior: smooth;
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;

 }

 /* Color the background and add some space to the sides of the main column. */
 .container-fluid {
   background-color: #F8B003;
   /* We use !important to override the padding setting that Bootstrap already put for the container-fluid class. */
   padding-left: 10% !important;
   padding-right: 10% !important;
 }

 .f {
   text-decoration: underline;
 }

 .q {
   margin-left: 101px;
 }

 .pot {
   text-decoration: underline;
 }

 /* Color the main column background white. */
 .col {
   background-color: white;
 }

 .navbar {
   box-shadow: 0px 4px 8px rgba(17, 17, 17, 0.2);
 }

 /* Bold the navbar's brand and put spacing on its left so it shifts right. */
 .navbar-brand {
   font-weight: bold;
   color: indianred;
 }

 /* style for charge fraction */
 .charge {
   margin-left: 38px;

 }

 .force {
   text-decoration: underline;
   margin-left: 6px;

 }

 #def {
   background-color: skyblue;
   text-align: center;
   width: 86%;
 }

 .k {
   text-decoration: underline;
 }

 .j {
   margin-left: 158px;
 }

 .s {
   margin-left: 24px;
 }

 .solution {
   text-decoration: underline;
   margin-left: 10%;
 }

 .hy {
   margin-left: 60px;
 }

 .p {
   margin-left: 10px;
 }

 #mass h1 {
   text-align: center;
 }

 .v {
   color: red;
 }

 label {
   display: block;
   margin-bottom: 5px;
 }

 #button {
   background-color: deepskyblue;
   width: 100%;
   text-align: center;
 }

 input {
   width: 100%;
   padding: 8px;
   margin-bottom: 15px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .ho {
   margin-left: 100px;
 }

 .n {
   margin-left: 30px;
 }

 .yl {
   text-decoration: underline;
 }

 .hh {
   margin-left: 7px;
 }

 .hr {
   background-color: green;
   width: 40%;
   float: left;

 }

 .r {
   margin-left: 30px;
 }

 .a {
   color: white;
   text-decoration: none;
 }

 a.hover {
   text-decoration: none;
 }

 .div {
   border: 1px;
   height: 1px;
   background-color: red;
   width: 40%;
   float: right;
 }

 .pic {
   background-image: url("images/electric_field.jpeg");
   background-size: cover;
   height: 250px;
 }

 @media screen and (min-width:600px) {
   .pic {
     height: 500px;
   }

   .r {
     margin-left: 40%;
   }
 }