:root {
    --fp : clamp(1rem, 0.8rem + 1vw, 1.25rem);
    --fh1: clamp(2rem, 1.5rem + 1vw, 4rem);

}

html {
    scroll-behavior: smooth;
}

body {
    min-height     : 100vh;
    background     : linear-gradient(145deg, #000000, #fffefe) no-repeat;
    font-family    : "Roboto", serif;
    font-size      : var(--fp);
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    color          : hsl(0, 17%, 93%);
}

h1 {
    font-size: var(--fh1);
}

a {
    all: unset;
}

.bg-green-box,
.bg-white-box,
.bg-yellow-box,
.bg-blue-box {
    position: relative;
}

.bg-green-box::after,
.bg-white-box::after,
.bg-yellow-box::after,
.bg-blue-box::after {
    position     : absolute;
    top          : -1px;
    bottom       : -1px;
    left         : -1px;
    right        : -1px;
    content      : "";
    z-index      : -1;
    border-radius: 45px;
}

.bg-green-box::after {
    background: linear-gradient(71deg, #0d1212, #3da077, #0d1212);
}

.bg-white-box::after {
    background: linear-gradient(71deg, #121013, #b0afb0, #121013);
}

.bg-yellow-box::after {
    background: linear-gradient(71deg, #110e0e, #afa220, #110e0e);
}

.bg-blue-box::after {
    background: linear-gradient(71deg, #0c0a0e, #5f6fad, #0c0a0e);
}

/* Nav element styles */
nav {
    width          : 100%;
    display        : flex;
    justify-content: center;
}

.navbar {
    width          : min(90%, 589px);
    padding        : 16px 24px;
    box-sizing     : border-box;
    border-radius  : 30px;
    border         : 2px solid transparent;
    background     : linear-gradient(71deg, #080509, #1a171c, #080509);
    background-clip: padding-box;
    margin         : 30px 0;
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.4);
    position       : relative;
}

.navbar-elements-container {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 24px;
    flex-wrap      : wrap;
}

.nav-element {
    color          : #f0eaea;
    text-align     : center;
    font-family    : 'Inter-Regular', sans-serif;
    font-size      : 20px;
    font-weight    : 400;
    position       : relative;
    width          : 80px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
}

/* Navbar Hover effects */

#nav-111 .link-111 {
    display        : inline-block;
    padding        : 8px 14px;
    text-decoration: none;
    color          : #fff;
    font-size      : 20px;
}

#nav-111 .link-111::after {
    content        : '';
    position       : absolute;
    bottom         : 0;
    left           : 0;
    width          : 100%;
    height         : 2px;
    background     : linear-gradient(90deg, transparent, #ffffff, transparent);
    background-size: 300% 100%;
    opacity        : 0;
    transition     : opacity 0.5s;
}

#nav-111 .link-111:hover {
    color: #ffffff;
}

#nav-111 .link-111:hover::after {
    opacity  : 1;
    animation: shimmer111 2s linear infinite;
}

.navbar::after {
    position     : absolute;
    top          : -1px;
    bottom       : -1px;
    left         : 0px;
    right        : 0px;
    content      : "";
    z-index      : -1;
    border-radius: 45px;
    background   : linear-gradient(71deg, #121013, #b0afb0, #121013);
}


main {
    margin   : 2rem;
    max-width: calc(80rem + 1vw);
}

.hero {
    border-radius  : 30px;
    height         : calc(40rem + 1vw);
    background     : linear-gradient(71deg, #080509, #1a171c, #080509);
    background-clip: padding-box;
    border-radius  : 45px;
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.4);
    padding        : 0 40px;
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    flex-direction : row;
    justify-content: space-between;
    border         : 2px solid transparent;
}

.cube {
    margin: 0 5rem;
}

.hero-text-container {
    text-align: center;
    margin    : 0 1rem;
    max-width : 50%;
}
/* Cube Animation */

.container {
    display        : flex;
    justify-content: center;
    align-items    : center;
    transform-style: preserve-3d;
    font-weight    : bold;
    font-size      : 2rem;
    color          : white;
    text-shadow    : 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.box-card {
    width          : 200px;
    height         : 200px;
    position       : relative;
    transform-style: preserve-3d;
    transition     : transform 1s ease;
    cursor         : pointer;
}

.box-card {
    animation: rotate3d 12s infinite linear;
}

.box-card:hover {
    animation-play-state: paused;
}

.face {
    position           : absolute;
    width              : 100%;
    height             : 100%;
    display            : flex;
    justify-content    : center;
    align-items        : center;
    backface-visibility: visible;
    border-radius      : 12px;
    border             : 2px solid #d1d1d1;
    transition         : all 0.3s ease;
    overflow           : hidden;
    box-shadow         : 0px 0px 4px 2px white;
}

.face::before {
    content   : '';
    position  : absolute;
    width     : 100%;
    height    : 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    top       : -100%;
    left      : -100%;
    transition: all 0.5s ease;
    transform : translateZ(20px);
}

.face::after {
    content : '';
    position: absolute;
    inset   : 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 100%);
    opacity   : 0;
    transition: opacity 0.3s ease;
}

.face:hover::before {
    top : 100%;
    left: 100%;
}

.face:hover::after {
    opacity: 1;
}

.front {
    transform : translateZ(100px);
    background: linear-gradient(145deg, #000000, #003699);
}

.back {
    transform : translateZ(-100px) rotateY(180deg);
    background: linear-gradient(145deg, #000000, #008a60);
}

.right {
    transform : translateX(100px) rotateY(90deg);
    background: linear-gradient(145deg, #000000, #5d0399);
}

.left {
    transform : translateX(-100px) rotateY(-90deg);
    background: linear-gradient(145deg, #000000, #d30202);
}

.top {
    transform : translateY(-100px) rotateX(90deg);
    background: linear-gradient(145deg, #000000, #06bd00);
}

.bottom {
    transform : translateY(100px) rotateX(-90deg);
    background: linear-gradient(145deg, #000000, #fce301);
}

@keyframes rotate3d {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(90deg) rotateY(180deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(360deg);
    }

    75% {
        transform: rotateX(270deg) rotateY(540deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(720deg);
    }
}

@media (max-width: 950px) {
    .box-card {
        width : 150px;
        height: 150px;
    }

    .front {
        transform: translateZ(75px);
    }

    .back {
        transform: translateZ(-75px) rotateY(180deg);
    }

    .right {
        transform: translateX(75px) rotateY(90deg);
    }

    .left {
        transform: translateX(-75px) rotateY(-90deg);
    }

    .top {
        transform: translateY(-75px) rotateX(90deg);
    }

    .bottom {
        transform: translateY(75px) rotateX(-90deg);
    }
}


/* Education & Skills show */

.Qualifications-container {
    width         : 100%;
    height        : 1024px;
    display       : flex;
    align-items   : center;
    flex-direction: column;
    row-gap       : 50px;
    padding       : 20px;
    padding-top   : 50px;
}

.edu-container {
    border-radius: 33px;
    width        : 390px;
    height       : 144px;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.4);
    width        : 390px;
    height       : 144px;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.4);
}

.skill-container {
    border-radius: 33px;
    width        : 390px;
    height       : 144px;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.4);
    border-radius: 33px;
    width        : 390px;
    height       : 144px;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.4);
}

.Qualifications {
    color          : #ffffff;
    text-align     : center;
    font-size      : 66px;
    width          : inherit;
    height         : 114px;
    height         : 114px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.box-black {
    width: 150px;
}

.full-edu-container {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    row-gap       : 40px;
}

.full-skill-container {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    row-gap       : 40px;
}

.edu-icons-container {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : row;
    column-gap     : 5em;
    margin         : 40px 0;
}

/* Card boarder glow*/

:root {
    --card-color: rgba(0, 0, 0, 0.75);
}

.card {
    background-color: var(--card-color);
    cursor          : pointer;
    height          : 114px;
    height          : 114px;
    position        : relative;
}

.card:hover:before {
    opacity: 1;
}

.card:before {
    background: linear-gradient(45deg,
            transparent 5%,
            rgb(235, 235, 235) 50%,
            transparent 99%);
    border-radius: inherit;
    content      : "";
    inset        : -2px;
    opacity      : 1;
    position     : absolute;
    transition   : opacity 400ms;
    z-index      : 0;
}

.s:before {
    inset: -2px;
}
    .s:before {
        inset: -2px;
    }

    .card-content {
        background-color: var(--card-color);
        border-radius   : inherit;
        inset           : 1px;
        position        : absolute;
    }




    @keyframes shimmer111 {
        0% {
            background-position: 200% 0;
            background-position: 200% 0;
        }


        100% {
            background-position: -200% 0;
            background-position: -200% 0;
        }
    }

    @media (max-width: calc(1000 / 16 * 1rem)) {
        .hero {
            justify-content: center;
        }
    }

    @media (max-width: calc(768 / 16 * 1rem)) {
        .hero-text-container {
            margin   : 0;
            max-width: 100%;
        }
    }

    @media (max-width: calc(400 / 16 * 1rem)) {
        .hero {
            padding: 0.5rem;
        }

        .navbar-elements-container {
            flex-direction: column;
        }
    }

    @media (max-width: calc(350 / 16 * 1rem)) {
        main {
            width: 100%;
        }
}