* {
  color: #d1b890;
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: "Xanh Mono";
  font-size: 26px;
  ;
}

a {
  text-decoration: none;
}

code {
  font-style: normal;
  background: #1B434B;
  padding: 0 5px;
}

small {
  font-size: 16px;
}

small a {
  font-size: 16px;
}

#container {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #10282D;
  margin: 0 auto;
  max-width: 700px;
}

h1 {
  color: #BCCA15;
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

h2 {
  color: #BCCA15;
  font-size: 50px;
}

h3 {
  color: #BCCA15;
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

.contribute {
  display: flex;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #BCCA15;
}

.contribute:hover {
  background: #ecff14;
}

.contribute p {
  color: #10282d;
}

.colours {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.item p {
  color: #007F99;
}

#buttons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
  align-self: stretch;
  flex-wrap: wrap;
}

.button {
  display: flex;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFB02E;
  color: #10282d;
}

.button:hover {
  background: #ffd694;
}

.button a {
  text-decoration: none;
  color: #10282d;
}

.code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.code-block {
  display: flex;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #132F35;
  font-size: 20px;
  text-align: left;
}




#bg {
  height: 100px;
  align-self: stretch;
  background: #132f35;
}

#fg {
  height: 100px;
  align-self: stretch;
  background: #d1b890;
}

#bred {
  height: 100px;
  align-self: stretch;
  background: #ff5757;
}

#byellow {
  height: 100px;
  align-self: stretch;
  background: #ffd694;
}

#bgreen {
  height: 100px;
  align-self: stretch;
  background: #ecff14;
}

#bcyan {
  height: 100px;
  align-self: stretch;
  background: #35ffb6;
}

#bblue {
  height: 100px;
  align-self: stretch;
  background: #4cbfff;
}

#bpink {
  height: 100px;
  align-self: stretch;
  background: #ff4cc2;
}

#bblack {
  height: 100px;
  align-self: stretch;
  background: #235662;
}

#bwhite {
  height: 100px;
  align-self: stretch;
  background: #ffd48f;
}

#nred {
  height: 100px;
  align-self: stretch;
  background: #da4949;
}

#nyellow {
  height: 100px;
  align-self: stretch;
  background: #ffb02e;
}

#ngreen {
  height: 100px;
  align-self: stretch;
  background: #bcca15;
}

#ncyan {
  height: 100px;
  align-self: stretch;
  background: #38c995;
}

#nblue {
  height: 100px;
  align-self: stretch;
  background: #35a6e6;
}

#npink {
  height: 100px;
  align-self: stretch;
  background: #d343a2;
}

#nblack {
  height: 100px;
  align-self: stretch;
  background: #183c44;
}

#nwhite {
  height: 100px;
  align-self: stretch;
  background: #ffe8c1;
}

img {
  width: 100%;
  margin: 20px 0;
}

body {
  background: #10282D;
}