/* set up fonts */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-Medium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-Semibold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-Bold.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/assets/fonts/SourceSansPro-ExtraBold.otf') format('opentype');
    font-weight: 800;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Medium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Semibold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Bold.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-ExtraBold.otf') format('opentype');
    font-weight: 800;
}

body {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --ff-source-sans-pro: "Source Sans Pro", sans-serif;
    --ff-poppins: "Poppins", sans-serif;
    --white: #FFFFFF;
    --bg-color: #ebedf4;
    --primary: #333333;
    --chrome-yellow: hsl(38.93deg 100% 52.55%);
    --st-patricks-blue: hsl(236, 57%, 28%);
    --razzmatazz: hsl(335, 87%, 51%);
    --ksu-purple: hsl(275, 54%, 33%);
    --royal-blue-dark: hsl(231, 68%, 21%);
    --rajah: hsl(29, 99%, 67%);
    --gradient-1: linear-gradient(90deg, var(--royal-blue-dark) 0, var(--ksu-purple) 51%, var(--royal-blue-dark));
    --gradient-2: linear-gradient(90deg, var(--razzmatazz), var(--rajah));
    --transition-1: 0.15s ease-in-out;
    --transition-2: 0.35s ease-in-out;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F7F7F7;
}

::-webkit-scrollbar
{
	width: 10px;
}

::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(280deg, var(--razzmatazz) 20%, var(--rajah) 70%, transparent 100%, var(--rajah) 15%, transparent);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-source-sans-pro);
    color: var(--st-patricks-blue);
}

h2 {
    font-size: 36px;
    margin-top: 0;
}

p, span, a, label {
    font-family: var(--ff-poppins);
}

p {
    line-height: 1.5em;
}

.container {
    max-width: 1440px;
    margin: auto;
}

.btn-cta {
    font-family: var(--ff-poppins);
    background-image: var(--gradient-2);
    background-size: 200%;
    color: var(--white);
    padding: 12px 35px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0 25px;
    transition: var(--transition-2);
    text-decoration: none;
    display: inline-block;
    border: none;
}

.btn-cta:is(:hover, :focus) {
    background-position: right;
}

button.btn-cta {
    cursor: pointer;
}

button.btn-cta:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: auto;
    user-select: none;
}

.go-top {
    position: fixed;
    bottom: 0;
    right: 15px;
    background-color: hsl(335, 87%, 53%);
    color: var(--white);
    font-size: 10px;
    padding: 12px 14px;
    border-radius: 4px;
    box-shadow: rgba(239, 31, 118, 0.5) -3px 3px 15px 0px;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: 0.15s ease;
}

.go-top.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-15px);
}

.go-top i {
    font-size: 16px;
}

.breadcrumbs ul {
    padding: unset;
    display: flex;
    justify-content: center;
}

.breadcrumbs li {
    list-style: none;
    margin-right: 5px;
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--razzmatazz);
}

.archive .breadcrumbs li, .archive .breadcrumbs a, .archive .breadcrumbs span {
    color: var(--white);
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.underline {
    position: relative;
}

.underline::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    transform: translateX(0);
    width: 10%;
    height: 6px;
    background-image: var(--gradient-2);
    border-radius: 10px;
}

.category .main-navigation a, .category .welcome-message {
    color: var(--white);
}

.floating {
    animation: floatUpDown 3s ease-in-out infinite;
    transform-origin: center;
}

.banner-animation {
    animation: waveAnim 2s linear infinite alternate;
}

@keyframes waveAnim {
    0% {
        transform: translate(0, 0) rotate(0);
    }
    100% {
        transform: translate(2px, 2px) rotate(1deg);
    }
} 

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}