/* ----- fonts ----- */
@font-face { 
    font-family: 'Bai Jamjuree'; 
    src: url("../fonts/Bai_Jamjuree/BaiJamjuree-SemiBold.woff2") format('woff2');
    font-display: swap;
}
@font-face { 
    font-family: 'Poppins'; 
    src: url("../fonts/Poppins/Poppins-Regular.woff2") format('woff2');
    font-display: swap;
}
@font-face { 
    font-family: 'Roboto'; 
    src: url("../fonts/Roboto/Roboto-Regular.woff2") format('woff2');
    font-display: swap;
}
@font-face { 
    font-family: 'IBM Plex Mono'; 
    src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2") format('woff2');
    font-display: swap;
}

/* ----- vars ----- */
:root {
    --pirate-doubloon: #BB9645;
    --pirate-neon: #ffbd30;
    --pirate-goldensands: #f2de99;
    --pirate-leviathan: #141414;

    --pirate-calmseas: #3f52b7;
    --pirate-deepblue: #171621;
    --pirate-navyblue: #202036;
    --pirate-royalblue: #201633;  
    
    --pirate-darkseas: #071642;
    --pirate-crest: #082db2;
    --pirate-storm: #2f3466ff;
    --pirate-fog: #6d6d6d;
    --pirate-cloud: #ffffff;  

    --pirate-font-primary: 'Bai Jamjuree';
    --pirate-font-secondary: 'Roboto', sans-serif;
    --pirate-font-tertiary:'IBM Plex Mono', sans-serif;
    --pirate-font-alternative: 'Poppins';

    --dark: #23252d; /* #242526; */
    --text-main: #a2a6ad;
    --discord-color: #5865ed;
    --red-highlight: #ff1b54;
    --pancake-blue: #24cad6;

    --button-hover: var(--pirate-goldensands);
    --button-color: var(--pirate-neon); 
    --nav-hover: #3A3B3C;   
}

/* ----- main ----- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    background-color: var(--dark); 
    width: 100%; 
    height: 100%; 
    scroll-behavior: smooth; 
}
body {
    line-height: 28px;
    font-size: 16px;
    letter-spacing: 0.7px;
    color: var(--text-main);
    font-family: var(--pirate-font-alternative);
    overflow-x: hidden;     
}
img {
    height: auto;
}
a {
    color: var(--pirate-doubloon);
    text-decoration: none;
}
a:-webkit-any-link {
    cursor: pointer;
 }
h1 {
    color: var(--pirate-doubloon);;
    font-size: 48px;
    font-family: var(--pirate-font-primary);
}
h2 {
    font-size: 29px;
    font-weight: 200;
    color: var(--pirate-cloud);
    font-family: var(--pirate-font-primary);
}
h3 {
    color: var(--pirate-cloud);
    font-family: var(--pirate-font-secondary);
}
@media screen and (max-width:400px) {
    h1 {
        font-size: 32px;
    } 
}
.highlight-txt {
    color: var(--pirate-neon);
}
.a-btn {
    background-color: var(--button-color);
    color: var(--pirate-leviathan);
    padding: 10px 40px;
    font-family: var(--pirate-font-secondary);
    border: none;
    display: inline-block;
    margin: auto;
    text-align: center;
    text-decoration: none;
    font-size: 16;
    font-weight: 700;
    transition-duration: 0.4s;
    cursor: pointer;
}
.a-btn:hover {
    outline:2px solid var(--button-color);
    outline-offset:6px;
    background-color: var(--button-hover);
    color: var(--pirate-leviathan);
}

/* ----- backtotop button ----- */
#return-to-top {
    opacity: 0;
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 1000;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-image: url(../img/icons/circle-up.svg);
    box-sizing: cover;
    transition: all 0.5s ease-in-out;
}

/* ----- scrollbar ----- */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--pirate-doubloon) #262626;
}
*::-webkit-scrollbar {
    width: 15px;
    background: #262626;
}  
*::-webkit-scrollbar-track {
    background: #262626;
    border-radius: 3px;
}  
*::-webkit-scrollbar-thumb {
    background-color: #393939;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--pirate-doubloon) !important;
}
::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
  }

/* ----- Sections ----- */
.full-width {
    width: 100%;
    padding: 60px 0px;
}
.lightbg {    
    background-color: var(--pirate-navyblue);    
}
.deepbg {
    background-color: var(--pirate-deepblue);
}
.darkbg {
    background-color: var(--dark);
}
.content {
    max-width: 1300px;
    margin: auto;    
    height: auto;
    padding: 0px 15px;
}
.middle-box {
    margin: auto;
    max-width: 800px;  
}
.box-container {
    width: 100%;
    margin: auto;
    text-align: left;
    display: inline-block;     
} 
.box {  
    text-align: left;
    float: left;
    width: 48%;
}
.box-right {
    text-align: left;
    float: right;
    width: 48%;
}
.pirate-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 700px;
    margin: 120px auto 95px;
}
.pirate-divider::before,
.pirate-divider::after {
    content: "";
    flex: 1;
    height: 1px;
}
.pirate-divider::before {
    background: linear-gradient(90deg, transparent, #B38C30);
}
.pirate-divider::after {
    background: linear-gradient(90deg, #F2DE98, transparent);
}
.pirate-divider img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}
@media screen and (max-width: 800px) {
    .pirate-divider {
        gap: 10px;
        margin: 90px auto 75px;
    }
    .pirate-divider img {
        width: 28px;
        height: 28px;
    }
}
.deepglowdown {
    background: linear-gradient(rgb(40, 36, 70) 0%, rgb(21,19,38) 30%);
} 
.deepglowup {
    background: linear-gradient(0deg,rgb(40, 36, 70) 0%, rgb(21,19,38) 30%);
}
.lightglowdown {
    background: linear-gradient(rgb(42, 42, 71) 0%, rgb(32,32,54) 30%);
} 
.lightglowup {
    background: linear-gradient(0deg,rgb(42, 42, 71) 0%, rgb(32,32,54) 30%);
}
.glowup {
    background: linear-gradient(0deg,rgb(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 30%);
}
.glowdown {
    background: linear-gradient(rgb(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 30%);
}

/* ----- footer ----- */
footer {
    background-color: var(--dark);
    width: 100%;
    overflow: hidden;
    padding: 0px 20px;  
    z-index: 999;  
}
footer a {
    margin: 0px 10px;
}
footer .wrap { 
    max-width: 1300px;
    margin: auto;
    margin-top: 10px;
}
footer img {
    margin: 0px 20px;
    height: 26px;
}
.footer-left {
    float: left;
}
.footer-right {
    float:right;
    vertical-align:middle;
    line-height: 26px;
}  

/* ----- aimations----- */
.floating { 
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: floating;   
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    60%  { transform: translate(3px, 12px); }
    100%   { transform: translate(0, -0px); }   
}
.floating2 { 
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.66s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: floating2;   
}
@keyframes floating2 {
    0% { transform: translate(0,  0px); }
    60%  { transform: translate(5px, 9px); }
    100%   { transform: translate(0, -0px); }   
}
.floating3 { 
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.33s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: floating3;   
}
@keyframes floating3 {
    0% { transform: translate(0,  0px); }
    60%  { transform: translate(6px, 4px); }
    100%   { transform: translate(0, -0px); }   
}
.pivot { 
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.33s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: pivot;  
    transform-origin: 50px 50px; 
}
@keyframes pivot {    
    0% { transform: rotate(4deg); }
    60%   { transform: rotate(-2deg); }  
    100% { transform: rotate(4deg); } 
}
.rings-rotate { 
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: rings-rotate;   
}
@keyframes rings-rotate {
    0% { transform: translate(0px, -12px); }
    50%  { transform: translate(-8px, 0px); }
    100%   { transform: translate(0px, -12px); }   
}
.moon-rotate { 
    animation-duration: 200s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: moon-rotate;   
}
@keyframes moon-rotate  {
    100% {transform: rotate(360deg);}
}

/* ---- loading ----- */
@keyframes arrow-spin {
    100% {
        transform: rotate(179deg);
    }
    }
    
    @-webkit-keyframes arrow-spin {
    100% {
        -webkit-transform: rotate(179deg);
    }
    }    
    .psoload,
    .psoload *,
    .psoload *:before,
    .psoload *:after {
    box-sizing: border-box;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    }    
    .psoload {
    position: relative;
    margin: 30px auto;
    height: 150px;
    width: 150px;
    }    
    .psoload .straight,
    .psoload .curve {
    position: absolute;
    top: 17.5%;
    left: 17.5%;
    width: 65%;
    height: 65%;
    border-radius: 100%;
    animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite;
    -webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite;
    }    
    .psoload .straight:before,
    .psoload .straight:after {
    content: '';
    position: absolute;
    width: 15%;
    border-bottom: 3px solid #eee;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    }    
    .psoload .straight:before {
    top: 5px;
    left: 5px;
    }    
    .psoload .straight:after {
    bottom: 5px;
    right: 5px;
    }    
    .psoload .curve:before,
    .psoload .curve:after {
    content: '';
    position: absolute;
    width: 45px;
    height: 10px;
    border: solid 3px transparent;
    border-top-color: #eee;
    border-radius: 50%/10px 10px 0 0;
    z-index: 90001;
    }    
    .psoload .curve:before {
    transform: rotate(-63deg) translateX(-27px) translateY(-4px);
    -webkit-transform: rotate(-63deg) translateX(-27px) translateY(-4px);
    }    
    .psoload .curve:after {
    bottom: 5px;
    right: 5px;
    transform: rotate(115deg) translateX(-26px) translateY(-12px);
    -webkit-transform: rotate(115deg) translateX(-26px) translateY(-12px);
    }    
    .psoload .center {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    border-radius: 100%;
    border: 3px solid #eee;
    }    
    .psoload .inner {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 100%;
    animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse;
    -webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse;
    }    
    .psoload .inner:before,
    .psoload .inner:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-width: 11px;
    border-bottom-color: #eee;
    }    
    .psoload .inner:before {
    top: 12px;
    left: 12px;
    transform: rotate(128deg);
    -webkit-transform: rotate(128deg);
    }    
    .psoload .inner:after {
    bottom: 12px;
    right: 12px;
    transform: rotate(-48deg);
    -webkit-transform: rotate(-48deg);
    }