html {
    background-color: #0d0f12;  
    margin: 0;
}

body {
    background-color: #333333;  
    color: #ffffff;  
    width: 80%;
    margin: 0 auto;
    padding: 10px;
}

h2 {
  font-family: "Kanit", serif;
  font-weight: 500;
  font-style: italic;
}

h3 {
    font-family: "Kanit", serif;
    font-weight: 400;
    font-style: normal;
  }

p {
  font-family: "Kanit", serif;
  font-weight: 100;
  font-style: normal;
}

/* ------ L O G O ------ */
#logo {
  width: 5em;
  height: auto;
}

#logo h1 {
  font-family: "Kanit", serif;
  font-weight: 800;
  font-style: normal;
}

#logo h3 {
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: normal;
}

/* ------ N A V I G A T I O N  M E N U ------ */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

/* ------ S E C T I O N S ------ */
#hidden-first {
  display:none;
  }

#projects img {
  width: 80%;
}

.projectsContainer {
  display: flex;
  flex-direction: row-reverse;
}

.projectsContainer div {
  background-color: rgba(28, 33, 38, 0.5);
  border-radius: 25px;
  margin: 10px;
  padding: 1.5em;
  width: 50%;
}

.skillsContainer {
  display: flex;
  flex-direction: row;
}

.skillsContainer div {
  margin: 5px;
}

.skillsContainer img {
  width: 5em;
}

/*
.kanit-thin {
  font-family: "Kanit", serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-extralight {
  font-family: "Kanit", serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-semibold {
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: normal;
}

.kanit-bold {
  font-family: "Kanit", serif;
  font-weight: 700;
  font-style: normal;
}

.kanit-extrabold {
  font-family: "Kanit", serif;
  font-weight: 800;
  font-style: normal;
}

.kanit-black {
  font-family: "Kanit", serif;
  font-weight: 900;
  font-style: normal;
}

.kanit-thin-italic {
  font-family: "Kanit", serif;
  font-weight: 100;
  font-style: italic;
}

.kanit-extralight-italic {
  font-family: "Kanit", serif;
  font-weight: 200;
  font-style: italic;
}

.kanit-light-italic {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: italic;
}

.kanit-regular-italic {
  font-family: "Kanit", serif;
  font-weight: 400;
  font-style: italic;
}

.kanit-medium-italic {
  font-family: "Kanit", serif;
  font-weight: 500;
  font-style: italic;
}

.kanit-semibold-italic {
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: italic;
}

.kanit-bold-italic {
  font-family: "Kanit", serif;
  font-weight: 700;
  font-style: italic;
}

.kanit-extrabold-italic {
  font-family: "Kanit", serif;
  font-weight: 800;
  font-style: italic;
}

.kanit-black-italic {
  font-family: "Kanit", serif;
  font-weight: 900;
  font-style: italic;
}
*/