:root {
    --font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bg-color:#5e1814;
    --btn-color:radial-gradient(ellipse farthest-corner at right bottom,#fedb37 0,#fdb931 8%,#9f7928 30%,#8a6e2f 40%,transparent 80%),radial-gradient(ellipse farthest-corner at left top,#fff 0,#ffffac 8%,#d1b464 25%,#5d4a1f 62.5%,#5d4a1f 100%);
}

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: white;
    top: 0;
    font-size: 1rem;
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background: white;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;

}
main {flex: 1;}

a {
    text-decoration: none;
    color: #ffc107;
}

.main-content {
    flex: 1;
}

.bg-head {
    background: var(--bg-color);
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

.bg-content {
    background: var(--bg-color);
    border-radius: 1.5rem;
}

.btn-click {
    color: white;
    background:var(--btn-color);
}

.btn-click:hover,
.btn-click:active {
    color: white;
    background:var(--btn-color);
    transform: scale(1.2);
}

.img-border {
    border-radius: 20px;
    width: 80%;
}

.btn-content {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    background:var(--btn-color);
    border-radius: 10px;
    color: white;
}

.btn-content:hover,
.btn-content:active {
    background:var(--btn-color);
    color: white;
    transform: scale(1.2);
}

.border-content {
    border-radius: 15px;
    border: 1px solid #fecc00;
    padding: 20px 10px;
}

.img-border {
    border-radius: 20px;
    width: 80%;
}

.bg-nav {
    background: var(--bg-color);
}

.navbar-toggler:focus, .navbar-toggler:hover, .navbar-toggler:active {
    box-shadow: none;
    border: 2px solid white;
} 

.nav-btn {
    border: 2px solid white;
    padding: .5rem;
    border-radius: 10px;
}
.logo-head {max-width: 100px; height: 38px;}
.line-img {max-width: 45px;}
.logo-about {width: 200px;}
.cont-ellips {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.navbar-collapse {
    text-align: center;
}
.bg-nav.fixed-top {
    animation: stuckMoveDown .6s;
  }
  @keyframes stuckMoveDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
  }

@media (max-width: 768px) {
    p {
        font-size: 12px;
    }

    .btn-content:hover,
    .btn-content:active {
        transform: scale(1.1);
    }

    .img-border {
        width: 100%;
    }
    .btn-foot1 { background:transparent linear-gradient(180deg,#9d2d29,#000) 0 0 no-repeat padding-box; color: white !important;}
    .btn-foot1:hover,.btn-foot1:active  { transform: scale(1.1); color: white !important;}
    .btn-foot2:hover,.btn-foot2:active  { transform: scale(1.1); color: white !important;}
    .btn-foot2 { background: transparent linear-gradient(180deg,#d72e29,#f58122) 0 0 no-repeat padding-box; color: white !important;}

}