@charset "UTF-8";

/* Fontawesome */
@import url("../vendors/fontawesome-5-pro/css/all.css");

html, body{font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; height: 100%;}

.container-fluid{max-width: 1536px;}

.lxt-logo{font-size: inherit; font-weight: 500;}
.lxt-letter-spacing{letter-spacing: 8px; font-weight: 400;}
.lxt-letter-spacing2{letter-spacing: 3px;}
.navbar-collapse{flex-basis: auto;}
code{background: -webkit-linear-gradient(#d63384, #ff007f); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.cursor-pointer {cursor: pointer;}

#header .navbar{text-shadow: 0 1px 0 rgba(0, 0, 0, 1);}
#body-background{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: #0e1417 url(../images/luanxt.com.background.gif); background-size: cover; background-position: center center; background-repeat: no-repeat; /* filter: grayscale(35%); -webkit-filter: grayscale(35%); */ color: transparent; transition: 1.5s;}
#body .content{z-index: 1; font-size: 24px;}
.content .code-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -68%);}
.content .fa-terminal{color: #e0e0e0; font-size: 14px;}
.content h2{font-size: inherit;}
#footer{font-size: 14px;}
#footer .navbar{text-shadow: 0 1px 0 rgba(0, 0, 0, 1);}
.navbar.bg-dark{background-color: rgba(0, 0, 0, 0.45) !important;}
.navbar-dark .navbar-nav .nav-link{color: rgba(255, 255, 255, .65); font-weight: 300;}
.navbar-dark .navbar-nav .nav-link:hover {color: rgba(255, 255, 255, .9);}
.focus-none:focus {outline: none !important; box-shadow: none !important;}
.btn-menu:focus,
.btn-menu:active {outline: none !important;}
#menu-modal .modal-dialog{padding-top: 4.5rem;}
#menu-modal .heading{top: -41px; text-shadow: 0 1px 2px rgba(255,255,255,0.5);}
#menu-modal .btn-close{top: -48px; background-position: right;}
#menu-modal .nav-link:hover{background-color: #2e3234;}
.modal-backdrop.show{opacity: 0.65;}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: transform .3s ease-out;
  }

  .modal.fade {
    transition: opacity .15s linear;
  }
}

/* RESPONSIVE */
@media screen and (max-width: 600px) {
    #body-background{background-position: 100% 100%;}
}

@media screen and (max-width: 460px) {
	#header .navs{display: none;}
}

@media screen and (max-width: 360px) {
    #body .content{font-size: 20px;}
	.lxt-letter-spacing{letter-spacing: 6px;}
    #footer .navbar-nav .lxt-letter-spacing2{letter-spacing: 1px;}
}