@import url("https://fonts.googleapis.com/css?family=Trirong");
body{
  margin: 0 !important;
}
main{
  display: flex;
}
.loader{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items:center;
justify-content: center;
background-color: white;
}
.dots-6 {
width:30px;
height:27.6px;
--c:radial-gradient(farthest-side,currentColor 90%,#0000);
background: 
  var(--c) 50%  0,
  var(--c) 0    100%,
  var(--c) 100% 100%;
background-size: 12px 12px;
background-repeat: no-repeat;
position: relative;
animation: d6 1s infinite;
}

@keyframes d6{ 
  50%,100% {background-position: 100% 100%,50% 0,0 100%} 
}
.sload{
  width:100%;
  align-items: center;
  min-height:20px;
  justify-content: center;
  
  left:0px;
  right:0px;
  display:flex;
}
.dots-9 {
  width:12px;
  height:12px;
  border-radius: 50%;
  clip-path: inset(-45px);
  box-shadow: -60px 15px,-60px 15px,-60px 15px;
  transform: translateY(-15px);
  animation: d9 1s infinite linear;
}

@keyframes d9{ 
  16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}
  33.33% {box-shadow:-60px 15px,  0px 15px,19px 15px}
  40%,60%{box-shadow:-19px 15px,  0px 15px,19px 15px}
  66.67% {box-shadow:-19px 15px,  0px 15px,60px 15px}
  83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}
  100%   {box-shadow: 60px 15px, 60px 15px,60px 15px}
}

.topnav {
  overflow: hidden;
  background-color: white;
  border-style: outset;
  
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
  width:100%;
  height:100%;
  font-weight: 700;
  font-family: "Sofia", sans-serif;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: white;
  color: black;
}

.topnav .search-container {

}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 25px;
  border: border: 1px solid #ccc;;
  width:100%;
  height:100%;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: white;
  font-size: 17px;
  border: none;
  cursor: pointer !important;
}

.topnav .search-container button:hover {
  background: #ccc;
}
#tophead h2{
  margin:10px;
  text-align: center;
}
.random, .result  {
  margin: 10px;
  display:grid;
  gap:1rem;

}
.result div,.random div{
  word-wrap: break-word;
  
  overflow:hidden;
  text-overflow:ellipsis
  white-space: nowrap;
  box-sizing: border-box;
  
  background: white;
  cursor:pointer;
  border-radius: 4px;
  
  box-shadow:rgb(0 0 0 / 0.08) 0px 0px 35px 0px;
  text-align: center;
  
}
.result a,.random a{
  text-decoration: none;
  color:black;
}
.column1, .column2{
  float:left
}
.column1{
  position:absolute;
  width:0%;
  height:100%;
}
.column2{
width:100vw;
}
@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a,  .topnav .search-container button {
    float: none;
    display: block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
    font-size: 20px;
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
}