style.css

/*/* Import Google Fonts and set default styles */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap");

:root {
  --gred: rgb(233, 67, 53);
  --gyellow: rgb(255, 191, 0);
  --gblue: rgb(60, 117, 232);
  --green: rgb(52, 168, 87);
  --gwhite: #eaf1fb;
  --grey: rgb(119, 115, 115);
  --white: white;
  --lightblue: #eaf1fb;
}

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

a {
      text-decoration: none;
    }

h4 {
  color: var(--grey);
}

.main-content {
  padding: 3rem 6rem;
}

.main-content .GCSJ-title {
  text-align: center;
  margin: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}



.main-content .GCSJ-title .GCSJ-text {
  display: flex;
  justify-content: center;
  align-self: center;
}

.main-content .GCSJ-title .GCSJ-text h4 {
  font-size: 2rem;
  padding: 0px 2px;
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(1) {
  color: red;
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(2) {
  color: var(--gyellow);
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(3) {
  color: var(--green);
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(4) {
   color: var(--gblue);
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(5) {
  color: var(--gblue);
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(6) {
  color: var(--grey);
}

.main-content .GCSJ-title .GCSJ-text h4:nth-child(7) {
  color: orangered;
}

/* Search Bar styles */

.main-content .search-box {
  display: flex;
  margin-bottom: 10px;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto;
}

.search-box i {
  position: absolute;
  top: 1rem;
  left: 10.4rem;
}

.alert-slider {
  width: 70%;
  margin: auto;
  margin-bottom: 2rem;
  background-color: var(--lightblue);
  color: red;
  border-radius: 2rem;
}

.alert-slider marquee {
  padding-top: 0.6rem;
  font-size: 1.2rem;
}

/* Table styles */
.table-box {
  border: black solid 2px;
  margin: 3rem auto;
  width: 100%;
  background-color: rgb(248, 248, 248);
}

.table-box thead {
  border: black solid 2px;
}

.table-box tr {
  border-bottom: 1px solid black;
  text-align: center;
}

.table-box thead tr th {
  color: black;
  font-size: 1rem;
}

.table-box #gccp-body tr {
  padding: 2rem 1rem;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  font-size: 1rem;
  padding: 1rem 0rem;
}

/* Footer */


@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}