@font-face {
  font-family: "tieng-font";
  src: url("tieng-font.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "tieng-font";
  background-color: #1f2c7c;;
}

h1 { 
  margin: 0;
  font-family: "tieng-font";
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 65px;
  color:#FFFFFF;
  text-transform: uppercase;
  transform: scale(2);
  position: relative;
  top:150px

}

h2{
  font-family: "tieng-font";
  transform: scale(.7);
  position: relative;
  color:#FFFFFF;
  top: 580px;
  bottom: 5px;
  text-align:center;

}
.letter-box {
position: relative;
background: white;
color: #1f2c7c; 
padding: 30px 20px;
font-size: 32px;
text-align: center;
box-shadow: 20px 20px #111d5c; 
border: 4px solid #1f2c7c;
border-radius: 6px;
position: relative;
top: 150 px;
}

ul {
  font-family: "tieng-font";
  font-size: 24px;
  text-align: center;
  list-style-position: inside;
  color: #FFFFFF;
  transform: scale(2);
  position: relative;
  top:350px
}
  .link-list {
      list-style: none;
      padding: 0;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    
    .link-box {
      display: inline-block;
      background: #ffffff;
      color: #1f2c7c;
      text-decoration: none;
      padding: 15px 25px;
      font-size: 20px;
      font-family: 'tieng-font';
      border: 4px solid #1f2c7c;
      border-radius: 6px;
      box-shadow: 12px 12px 0 #111d5c;
      position: relative;
      text-align: center;
    }
    


ul:visited { 
  color:#1f2c7c
}

ul:active {
  color:#1f2c7c
}

ul:active {
  color:#1f2c7c
}

.link-box:hover {
display: inline-block;
background: #1f2c7c;
color: #ffffff;
text-decoration: none;
padding: 15px 25px;
font-size: 20px;
font-family: 'tieng-font';
border: 4px solid #ffffff;
border-radius: 6px;
box-shadow: 12px 12px 0 #ffffff;
position: relative;
text-align: center;
}



#blue-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1; 
  object-fit: cover;
}
