@font-face {
    font-family: Windlass;
    src: url(../fonts/Windlass.ttf) format("truetype");
}

@font-face {
    font-family: BrushTipTexe;
    src: url(../fonts/BrushTipTexe.otf) format("opentype");
}

/* Variables */
:root{
    --sr-brand-color: #fdf5ed;
    --sr-hover-color: #ff9d5c;
    --sr-header-color: #ff9544;
}
/* Utility */
.font-heading{
    font-family: 'Windlass', serif;
}

.font-text{
    font-family: 'BrushTipTexe', serif;
}

.overlay-box{
    background: url(../img/overlay-box.svg) no-repeat 100% 100% / 100% 100%,
    url(../img/overlay-box-bg.svg) no-repeat 100% 100% / 100% 100%;
}

.clip-path{
    clip-path: polygon(
            56.56% 3.64%, 2.37% 0%, 0.96% 18.42%, 3.27% 19.55%, 0.03% 26.20%, 1.98% 70.01%, 0.63% 81.06%,
            3.49% 85.94%, 1.03% 91.70%, 0% 99.10%, 6.75% 99.85%, 11.96% 99.97%, 22.88% 97.84%,
            36.57% 98.36%, 89.71% 99.20%, 93.28% 99.20%,
            99.61% 98.36%, 99.02% 94.25%, 97.42% 80.29%, 96.05% 78.28%, 97.02% 75.80%,
            98.97% 32.60%, 97.29% 25.20%, 100% 22.18%, 99.45% 1.13%, 85.41% 1.38%, 56.56% 3.64%
    );
}

.parchment{
    background: #ffefc3 url(../img/paper-fibers.png);
    color: #3b2f1e!important;
    border: 2px solid #c2b280;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    border-radius: 0;
    padding: 1rem;
}

.gold-text {
    background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-shadow: 0 0 1px #FFD700, 0 0 5px #FFA500;
}

body{
    font-family: 'BrushTipTexe', serif;
    background: url(../img/sea-of-thieves-bg.png) center center / cover;
    color: #fdf5ed;
}

/* Navigation */
nav {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.05));
    padding: 1rem 2rem;
    font-size: 1.6rem;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.8rem;
    color: var(--sr-brand-color)!important;
}

.nav-link {
    color: #fdf5ed;
    margin-right: 1rem;
    transition: color ease-in-out 200ms, transform ease-in-out 100ms;
}

.nav-link:hover{
    color: var(--sr-hover-color);
    transform: rotate(2deg);
}

/* Buttons */
.btn-discord {
    background: url(../img/btn-discord.svg) no-repeat 100% 100% / 100% 100%;
    display: inline-block;
    background-size: 100% 100%;
    color: #E0E3FF;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    transition: color ease-in-out 300ms, filter ease-in-out 250ms;
}

.btn-discord:hover{
    filter: hue-rotate(0deg) brightness(1.2);
}

.btn{
    border-radius: 0;
}

.btn-red{
    background-color: #86372b;
    color: #fdf5ed;
    transition: background-color ease-in-out 250ms;
}

.btn-red:hover{
    background-color: #a03e36;
    color: #fdf5ed;
}

.btn-green{
    background-color: #33cdb0;
    color: #212121;
    transition: background-color ease-in-out 250ms;
}

.btn-green:hover{
    background-color: #27a790;
    color: #363636;
}
/* Hero Unit */
.hero {
    background: url(../img/sea-of-thieves-hero.jpg) center center / cover no-repeat;
    padding: 12rem 2rem;
    text-align: center;
    color: #fdf5ed;
    border-bottom: 2px solid var(--sr-header-color);
    margin-bottom: 50px;
}

.hero h1 {
    font-size: 4rem;
    text-shadow: 2px 2px 5px #000;
}

/* Section */
.section{
    margin-bottom: 50px;
}
.section-heading {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--sr-header-color);
}

.section-images img {
    width: 100%;
    border-radius: 2px;
    margin-bottom: 50px;
}

.discord-embed {
    border-radius: 10px;
    overflow: hidden;
    width: 90%;
    height: 350px;
}


.slider-nav img {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.slider-nav .slick-current img {
    opacity: 1;
    border: 2px solid #fff;
}

.slider-for img,
.slider-nav img {
    width: 100%;
}

.slider-nav {
    margin-top: 15px;
}

.slider-nav .slick-slide {
    margin: 0 12px;
}

.slider-nav {
    margin-left: -12px;
    margin-right: -12px;
}

.slider-nav img {
    max-height: 80px;
    object-fit: cover;
    width: auto;
}

.slick-dots {
    margin-top: 20px !important;
    display: block;
    bottom: -50px;
    color: var(--sr-header-color);
}

.slider-for {
    padding-bottom: 40px;
}

footer {
    padding: 1rem 0;
    text-align: center;
    color: #fdf5ed;
}