body {
  margin: 0;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

html {
  scroll-behavior: smooth;
}

hr {
  color: #ff1e1e;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: dotted;
  border-width: 1rem;
  width: 10%;
  margin-top: 10rem;
  margin-bottom: 10rem;
}

h1 {
  display: inline;
  color: #ff1e1e;
}

h2 {
  text-align: center;
  font-size: 3rem;
}

h3 {
  color: #ff1e1e;
  font-size: x-large;
}
h4 {
  font-size: x-large;
  color: #ffff00;
}

a {
  text-decoration: none;
  margin-right: 2rem;
}

span {
  text-decoration: underline;
}

/*nav-bar*/

.nav-links {
  display: inline;
  margin-left: 35%;
}

.nav-links a {
  color: #ffffff;
  font-size: 1rem;
  padding: 5px;
}

.nav-links a:hover {
  color: #ffff00;
  text-decoration: underline;
}

.nav-bar {
  background-image: url("images/background.jpg");
  background-color: #cccccc; /* Used if the image is unavailable */
  background-size: cover;
  background-position: center;
  height: auto;
  padding: 2.5rem;
}

.nav-bar-sub {
  background-image: url("images/background1.jpg");
  background-color: #cccccc; /* Used if the image is unavailable */
  background-size: cover;
  background-position: center;
  height: auto;
  padding: 2.5rem;
}

.nav-bar-about {
  background-image: url("images/background3.jpg");
  background-color: #cccccc; /* Used if the image is unavailable */
  background-size: cover;
  background-position: center;
  height: auto;
  padding: 2.5rem;
}

.nav-paragraph-one {
  color: #ff1e1e;
  text-align: center;
  font-weight: bold;
  font-size: 5rem;
  margin-bottom: 3.5rem;
  background-color: #ffff00;
  opacity: 0.7;
  padding: 1rem;
}
.nav-paragraph-two {
  color: #ffffff;
  text-align: center;
  font-size: 1.7rem;
  margin-bottom: 3.5rem;
  font-weight: bold;
}

.myButton {
  background-color: #ff1e1e;
  border: 0px solid #241d13;
  border-radius: 5%;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 13px 27px;
}
.myButton:hover {
  background-color: #ffff00;
  color: #000;
}
.myButton:active {
  position: relative;
  top: 1px;
}
.btn {
  text-align: center;
}

/*nav-bar*/

/*welcome section*/

.welcome {
  margin-top: 8rem;
}
.welcome p {
  text-align: center;
}

.services {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
}

.c {
  padding: 2rem;
}

.c i {
  color: #ffff00;
}

/*welcome section*/

/*photos*/

.photos-div img {
  width: 100%;
  height: 300px;
}
.photos-div img:hover {
  opacity: 0.8;
}

.photos-div {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

/*photos*/

/*footer*/
.footer {
  text-align: center;
  background-color: #ff1e1e;
  padding: 5rem;
}

.footer i {
  color: #ffff00;
  margin: 1rem;
}

.footer .linkedin:hover {
  color: #0072b1;
}

.footer .facebook:hover {
  color: #3b5998;
}

.footer .instagram:hover {
  color: #bc2a8d;
}

footer span {
  color: #ffffff;
}

.up {
  background-color: #ffff00;
  padding: 1rem;
  position: fixed;
  right: 0;
  bottom: 10px;
  border-radius: 100%;
  color: #ff1e1e;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: sans-serif;
}

.up:hover {
  color: #ffff00;
  background-color: #ff1e1e;
}

/*footer*/

/*sub*/
.form {
  background-color: #ff1e1e;
  color: #ffff00;
  padding: 5% 25%;
}

#myPlot {
  margin: 0 auto;
}
/*sub*/

/*coach*/
.coach-photo {
  height: 20rem;
  width: 30rem;
}

.coach-1 {
  overflow: hidden;
}

.coach-1 img {
  float: left;
  margin-left: 2rem;
  margin-right: 2rem;
  border-radius: 10%;
}

.coach-type {
  opacity: 0.5;
}

#file {
  margin-top: 1rem;
  margin-left: 2rem;
  width: 50%;
}

.file1 {
  accent-color: orange;
}
.file2 {
  accent-color: blue;
}
.file3 {
  accent-color: orange;
}
.file4 {
  accent-color: red;
}

label {
  margin-left: 2rem;
  font-weight: bold;
}

/*coach*/

/*alert message*/
.alert {
  margin-top: 10px;
  color: black;
  width: 50%;
  background-color: rgb(0, 255, 100);
  padding: 10px 30px;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  display: none;
}
/*alert message*/

/*form*/
.in {
  border: none; /* <-- This thing here */
  border: solid 1px #ccc;
  border-radius: 7px;
  width: 90%;
  height: 40px;
}

.submit {
  background-color: #ffff00;
  color: #ff1e1e;
  padding: 1rem 4rem;
  text-align: center;
  border: none;
  border-radius: 10px;
  margin: 10px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
}
/*form*/