* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

:root {
  --fullWidth: 100%;
}

html,
body {
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  max-width: 100vw;
  font-family: "Roboto", sans-serif;
  list-style-type: none !important;
}

a {
  text-decoration: none;
}

/* padding for standlone text and  heading */
.main-header {
  padding: 8px 10px;
}

.about-me {
  padding: 5px 0;
}

/* center text */
.about-me,
.course-infor {
  text-align: center;
}


/* header styles start  */
header {
  width: var(--fullWidth);
  height: 65px;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}

.logo-container {
  display: flex;
  width: 160px;
  height: 100%;
}

.logo {
  align-self: center;
}

/* logo svg fit styles */
.site-logo {
  width: 86px;
  height: 45px;
}

.logo-text {
  align-self: center;
}

.logo-text p {
  font-size: 14.9px;
  color: red;
}

.hamburger-icon-container {
  display: flex;
  /* width: 50px; */
  height: 100%;
}

.hamburger-icon {
  align-self: center;
}

/* make hamburger more clickable  */
.fa-bars,
.fa-x {
  padding: 13px 5px;
  font-size: 22px;
}

/* under this function  */
.hamburger-icon-container .fa-x {
  display: none;
}

.hamburger-icon-container.open .fa-bars {
  display: none;
}

.hamburger-icon-container.open .fa-x {
  display: block;
}

/* header styles end */

/* nav styles start  */
.nav-links {
  background-color: grey;
  display: block;
}

li:hover {
  background-color: rgb(195, 195, 195);
}

a:hover {
  color: #000 !important;
}

.nav-closed {
  background-color: grey;
  display: none;
}

ul>li {
  width: var(--fullWidth);
  padding: 5px 0 5px 10px;
}

.links a {
  font-size: 18px;
  color: black;
}

/* nav styles end*/

/* main styles start  */
.main {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: var(--fullWidth);
  height: fit-content;
  padding: 0 10px;
  margin-bottom: 15px;
}

.about-me {
  background-color: #000;
  color: white;
  text-align: center;
}

.about-me-infor,
.about-me-image {
  background-color: grey;
}

.about-me-infor {
  /* height: ; */
}

.about-me-infor p {
  padding: 5px 5px;
}

.about-me-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--fullWidth);
  height: fit-content;
}

.image-1 {
  width: 60%;
}

.image-1>img {
  width: var(--fullWidth);
  height: 100px;
  object-fit: contain;
}

.courses-1 {
  display: flex;
  justify-content: space-around;
  width: var(--fullWidth);
  padding: 10px 5px;
}

/* i dont know if this wil cause any problem */
.courses-1>div {
  border-radius: 5px;
  width: 25%;
  padding: 2px;
  background-color: grey;
}

#js-button {
  padding: 8px 10px;
  border-radius: 5px;
  background-color: #ddd;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.courses-2>div {
  width: var(--fullWidth);
  padding: 2px;
  margin-bottom: 7px;
  background-color: grey;
}

.logo-links {
  width: var(--fullWidth);
  padding: 10px 5px;
  margin: 7px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo-links>div {
  width: 25%;
  height: 50px;
}

.js-render {
  /* border: 1px solid #000; */
  padding: 10px 0;
}

.fa-brands {
  color: black;
  font-size: 50px;
}

footer {
  width: 100%;
  padding: 10px 0;
}

footer {
  margin-top: 10px;
  padding: 10px;
}

footer p {
  text-align: center;
}

#lastModified {
  font-size: 16px;
}

#currentyear {
  color: rgb(0, 0, 0);
}

/* main styles end  */