/*Root custom CSS style section*/
:root {
  --primary-color: rgb(0, 0, 0);
  --secondary-color: rgb(255, 255, 255);
  --tertiary-color: rgb(230, 230, 230);
  --card-color: rgb(194, 216, 223);
  --shadow: rgb(60, 97, 219);
  --outline: rgb(21, 66, 214);
  --button: rgb(33, 51, 109);
}

/*HTML, body section*/

/* * {
  border: 0;
  margin: 0;
} */

html {
  background-color: rgb(255, 255, 255);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

/*Header and Nav styling*/

header {
  background: linear-gradient(to top, rgb(0, 79, 224), rgb(1, 151, 252));
}

header h1 {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 50px;
  text-shadow: 1px 1px 6px #000000;
  text-align: center;
}

header h3 {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 30px;
  text-shadow: 1px 1px 6px #000000;
  text-align: center;
}

/*end of Header section*/

/*General styling*/
h3 {
  text-align: center;
  font-weight: bold;
}

/*Contact Section --- Using Bootstrap classes currently*/

/*.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 800px;
  margin: auto;
  font-size: 22px;
  background-color: var(--card-color);
  border: 2px solid var(--outline);
  border-radius: 4px;
  box-shadow: 3px 3px 10px var(--shadow);
}*/

.contact p {
  margin: 15px 15px 15px 15px;
}

.contact a {
  text-decoration: none;
}

.contact a:hover {
  font-weight: bolder;
}

/*End of contact seciton*/

/*Card styling*/

h4 {
  text-align: center;
  font-weight: bold;
}

.card-header {
  background-color: lightgray;
}

.card-title {
  font-weight: bold;
}

.card-shadow {
  box-shadow: 2px 2px 6px var(--shadow);
  border: 4px solid var(--outline);
}

/*Footer styling*/

footer {
  margin-top: 200px;
  height: 60px;
  background: linear-gradient(to bottom, rgb(29, 142, 248), rgb(0, 70, 184));
  color: var(--secondary-color);
  text-shadow: 1px 1px 3px var(--primary-color);
}

footer h4 {
  text-shadow: 2px 2px 2px var(--primary-color);
}

/*End of Footer styling*/