style2.css

html, body {
    height: 100%;
    width: 100%;
  }
  
  #nav {
      width: 100%;
      margin: 0;
      padding: 0;
      text-align: center;
      list-style: none;
      background-color: black;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
  }
  
  #nav li {
      display: inline-block;
      text-align: center;
  }
  
  #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      color: white;
      border-right: 1px solid black;
      font-size: 30px;
    background-color: black;
  }
  
  #nav li a:hover {
      color: white;
      text-align: center;
      background-color: purple;
  }
  
  
  
  
  * {
    box-sizing: border-box;
  }
  
  .bg-img {
    /* The image used */
    background-image: url("IMAGES/wellbeingpic.jpg");
    
    /* Add the blur effect */
    filter: blur(12px);
    -webkit-filter: blur(8px);
    
    /* Full height */
    height: 100%; 
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  /* Position text in the middle of the page/image */
  .bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    font-size: 50px;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    padding: 40px;
    text-align: center;
  }
  
  .headingfor {
    font-size: 50px;
    text-align: center;
  }
  
  .discimg {
    padding-left: 20px;
  }
  
  p {
     font-size: 45px;
    text-align: center;
  }
  
      /* Styling the Body element i.e. Color,
          Font, Alignment */
          body {
              text-align: center;
          }
  
          /* Styling the Form (Color, Padding, Shadow) */
          form {
              background-color: #fff;
              max-width: 800px;
        max-height: 1060px;
              margin: 50px auto;
              padding: 100px 50px;
              box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
              font-size: 38px;
          }
  
          /* Styling form-control Class */
          .form-control {
              text-align: left;
              margin-bottom: 20px;
          }
  
          /* Styling form-control Label */
          .form-control label {
              display: block;
              margin-bottom: 7px;
          }
  
          /* Styling form-control input,
          select, textarea */
          .form-control input,
          .form-control select,
          .form-control textarea {
              border: 1px solid #777;
              border-radius: 2px;
              font-family: inherit;
              padding: 20px;
              display: block;
              width: 95%;
              font-size: 35px;
          }
  
          /* Styling form-control Radio
          button and Checkbox */
          .form-control input[type="radio"],
          .form-control input[type="checkbox"] {
              display: inline-block;
              width: auto;
          }
  
          /* Styling Button */
          button {
            font-family:'Times New Roman', Times, serif;
              background-color: #05c46b;
              border: 1px solid #777;
              border-radius: 2px;
              font-family: inherit;
              font-size: 35px;
              display: block;
              width: 100%;
              margin-top: 25px;
              margin-bottom: 10px;
          }

          .Form1 {
            text-align: center;
            font-size: 45px;
          }

          .jointext {
            text-align: center;
            font-size: 35px;
          }

          .button1 {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 40px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 40px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
          }
          
          .button1 {
            background-color: #4CAF50; 
            color: black; 
            border: 2px solid #4CAF50;
            display: inline-block;
          }
          
          .button1:hover {
            background-color: rgb(242, 242, 130);
            color: white;
          }

        
          
          .stories {
            font-size: 40px
          }

          * {
            box-sizing: border-box;
          }
          
          .column {
            float: left;
            width: 50%;
            padding: 20px;
          }
          
          /* Clearfix (clear floats) */
          .row::after {
            content: "";
            clear: both;
            display: table;
          }

          .button2 {
            background-color: bisque;
            color: white;
            border: 2px #4CAF50;
            text-align: center;
            display: inline-block;
            width: 15%;
            height: 90%;
            font-size: 40px;
          }

            .button2:hover {
                background-color: rgb(242, 242, 130);
                color: black;
            }


          .button3 {
            background-color: bisque;
            color: white;
            border: 2px #4CAF50;
            text-align: center;
            display: inline-block;
            width: 15%;
            height: 90%;
            font-size: 40px;
          }

          .button3:hover {
            background-color: rgb(242, 242, 130);
            color: black;
        }

          .button4 {
            background-color: bisque;
            color: white;
            border: 2px #4CAF50;
            text-align: center;
            display: inline-block;
            width: 15%;
            height: 90%;
            font-size: 40px;

          }

          .button4:hover {
            background-color: rgb(242, 242, 130);
            color: black;
        }

          .button5 {
            background-color: bisque;
            color: white;
            border: 2px #4CAF50;
            text-align: center;
            display: inline-block;
            width: 15%;
            height: 90%;
            font-size: 40px;

          }

          .button5:hover {
            background-color: rgb(242, 242, 130);
            color: black;
            
        }