html, body { overflow-x: hidden; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; display: block; }
/* ^^^ Fix Right Scroll ^^^ */


body,.html {
    margin: 0;
    padding: 0;
    font-family: 'DMSherif', serif;
}
@font-face {
    font-family: 'DMSherif';
    src: url(../sources/fonts/DMSerifText-Regular.ttf);
}
.wrapper {
    height: auto;
    min-height: 100vh;
    width: 100%;
}
.intro {
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
}
.filter {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
}
.filter img{
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
.filter-background {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    filter: brightness(2);
    background: rgba(6, 9, 15, 0.85);
    background: linear-gradient(0deg,rgba(6, 9, 15, 1) 0%, rgba(6, 9, 15, 0.85) 54%, rgba(6, 9, 15, 0.75) 100%);
}
.landing {
    display: contents;
    z-index: 3;
}
/*Start Navbar*/
.navbar {
    grid-area: 1 / 1 / 2 / 21;
    z-index: 3;
    display: inline-flex;
}
.navbar.sticky {
    position: fixed;
    width: 100vw;
    z-index: 5;
    grid-area: 1 / 1 / 2 / 21;
    border-bottom: gray 1px solid;
    background: rgba(31, 32, 48, 0.7);
    border-bottom: rgba(76, 77, 139, 0.384) 1px solid;
    backdrop-filter: blur(8px);
}
.nav-links.sticky-links {
    width: 35.8vw;
}
.nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    width: 35vw;
}
.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 1.8vh;
    font-weight: 500;
    margin-right: 2rem;
}
.contact-link a{
    color: black;
    font-size: 2vh;
    font-weight: 500;
    text-decoration: none;
    background: rgb(0, 130, 220);
    padding: 4px 25px;
    border-radius: 6px;
}
.logo {
    margin-left: 10%;
    color: white;
    font-size: 1.2vh;
    font-weight: 600;
}
.logo-dot {
    color: rgb(0, 130, 220);
}
/*End Navbar*/
/*Start Landing Image and Text Container*/
.landing-image {
    grid-area: 6 / 11 / 13 / 16;
    z-index: 3;
}
.image-msg {
    grid-area: 7 / 13 / 10 / 17;
    background: rgba(31, 32, 48, 0.7);
    border-radius: 12px;
    border: rgba(76, 77, 139, 0.384) 1px solid;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 3;
    backdrop-filter: blur(8px);
    animation: MoveUpDown 3s ease-in-out infinite;
}
@keyframes MoveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.image-msg p, .image-msg .img-msg-con {
    z-index: 4;
}
.img-msg-con {
    margin-left: 1rem;
    font-size: 1.2vh;
    margin-top: 0.5rem;
}
.img-msg-con-p {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    color: white;
    font-size: 1.2rem;
    word-spacing: 1rem;
    text-align: left;
    margin-left: 2rem;
    color: rgb(150, 150, 150);
}
.img-msg-con-p .img-msg-con-p-color-a {
    color:rgb(40, 90, 165);
}
.img-msg-con-p .img-msg-con-p-color-b {
    color: rgb(65, 177, 65);
}

.landing-image img {
    width: 100%;
    height: auto;
    z-index: 3;
}
/*End Landing Image and Text Container*/
/*Start Header Sections*/
.little-header {
    grid-area: 6 / 3 / 7 / 5;
    z-index: 3;
    color: rgb(0, 130, 220);
}
.little-header h4 {
    background: rgba(40, 90, 165, 0.2);
    padding: 4px 12px;
    border-radius: 16px;
    border: rgba(40, 90, 165, 0.5) 1px solid;
    font-weight: 50;
}
.checkmark{
    color: rgb(65, 177, 65);
    margin-right: 0.5rem;
}
.header {
    grid-area: 7 / 3 / 10 / 8;
    z-index: 3;
}
.header h1 {
    color: white;
    font-size: 6vh;
    word-spacing: 1rem;
    margin-top: -0.5rem;
}
.header h1 span {
    color: rgb(0, 130, 220);
}
.description {
    grid-area: 10 / 3 / 12 / 8;
    z-index: 3;
}
.description p {
    color: rgba(200, 200, 200, 0.685);
    font-size: 1.8vh;
    line-height: 2.5vh;
}
.buttons {
    grid-area: 12 / 3 / 14 / 8;
    z-index: 3;
}
.buttons .project-btn {
    background: rgb(0, 130, 220);
    color: black;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1.8vh;
    font-weight: 600;
    margin-right: 1.5rem;
    cursor: pointer;
}
.buttons .contact-btn {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1.8vh;
    font-weight: 600;
    cursor: pointer;
}
.arrow-down-content {
    grid-area: 20 / 1 / 20 / 20;
    z-index: 3;
    color: rgba(255, 255, 255, 0.685);
    font-weight: 800;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    animation: MoveUpDown 2s ease-in-out infinite;
}



/*2nd Section*/

.skills-projects-contact {
    display: grid;
    margin-top: 0;
    height: 100vh;
    width: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
    background: red;
}
.filter-b {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
}
.filter-b img{
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
.filter-background-b {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    filter: brightness(2);
    background: rgba(6, 9, 15, 0.85);
    background: linear-gradient(0deg,rgba(6, 9, 15, 1) 0%, rgba(6, 9, 15, 1) 54%, rgba(6, 9, 15, 1) 100%);
}