/* #region CSS IMPORTS */
/* ========================================================================== */
@import "/css/header.css";
@import "/css/welcome.css";
@import "/css/about_me.css";
@import "/css/my_works.css";
@import "/css/footer.css";
/* ========================================================================== */
/* #endregion CSS IMPORTS */

/* #region FONT */
/* ========================================================================== */
@font-face {
    font-family: MyriadPro-Bold;
    src: url('/fonts/MyriadPro-Bold.otf');
}

@font-face {
    font-family: MyriadPro-BoldCond;
    src: url('/fonts/MyriadPro-BoldCond.otf');
}

@font-face {
    font-family: MyriadPro-BoldCondIt;
    src: url('/fonts/MyriadPro-BoldCondIt.otf');
}

@font-face {
    font-family: MyriadPro-BoldIt;
    src: url('/fonts/MyriadPro-BoldIt.otf');
}

@font-face {
    font-family: MyriadPro-Cond;
    src: url('/fonts/MyriadPro-Cond.otf');
}

@font-face {
    font-family: MyriadPro-CondIt;
    src: url('/fonts/MyriadPro-CondIt.otf');
}

@font-face {
    font-family: MyriadPro-It;
    src: url('/fonts/MyriadPro-It.otf');
}

@font-face {
    font-family: MyriadPro-Regular;
    src: url('/fonts/MyriadPro-Regular.otf');
}

@font-face {
    font-family: MyriadPro-Semibold;
    src: url('/fonts/MyriadPro-Semibold.otf');
}

@font-face {
    font-family: MyriadPro-SemiboldIt;
    src: url('/fonts/MyriadPro-SemiboldIt.otf');
}
/* ========================================================================== */
/* #endregion FONT */

:root {
    --clr-accent-1: #6ecdf3;
    --clr-accent-2: #9399e8;
    --clr-accent-3: #fbb3e4;
    --clr-accent-4: #fbcf40;

    --clr-primary: #1e4c64;
    --clr-primary-light: #8EA5B1;

    --clr-neutral: #f9fafb;

    --ff-regular: MyriadPro-Regular;
    --ff-semi-bold: MyriadPro-Semibold;
    --ff-bold: MyriadPro-Bold;

    --ff-heading: var(--ff-semi-bold);
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Prevent font size inflation */
* {
    margin: 0;
    padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; 
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), 
                    rgba(255, 255, 255, 0.9)), url('/img/body_bg_img_repetitive.jpg');
    background-size: 50%;
    color: var(--clr-primary);
    font-family: var(--ff-regular);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}
  
/* Improve media defaults */
img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Utility classes */
.text-primary {
    color: var(--clr-primary) !important;
}
.text-accent-1 {
    color: var(--clr-accent-1) !important;
}
.text-accent-2 {
    color: var(--clr-accent-2) !important;
}
.text-accent-3 {
    color: var(--clr-accent-3) !important;
}
.text-accent-4 {
    color: var(--clr-accent-4) !important;
}
.text-neutral {
    color: var(--clr-neutral) !important;
}
.text-primary-light {
    color: var(--clr-primary-light) !important;
}

.bg-primary {
    background-color: var(--clr-primary) !important;
}
.bg-accent-1 {
    background-color: var(--clr-accent-1) !important;
}
.bg-accent-2 {
    background-color: var(--clr-accent-2) !important;
}
.bg-accent-3 {
    background-color: var(--clr-accent-3) !important;
}
.bg-accent-4 {
    background-color: var(--clr-accent-4) !important;
}
.bg-neutral {
    background-color: var(--clr-neutral) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

/* Section Title */
.section-title h2 {
    font-size: 45px;
    font-family: var(--ff-bold);
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 10px;
    text-transform: uppercase;
    margin: 0 0 40px;
}
.section-title h2:after {
    height: 8px;
    width: 50px;
    bottom: -4px;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    z-index: -1;
    transform: skew(-36deg);
    -webkit-transform: skew(-36deg);
}

/* View Port */
.full-view {
    height: 100vh;
}
@media (max-width: 991.98px) {
    .full-view {
        height: calc(100vh - 90px);
    }
}