/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--hero-gradient-start), var(--hero-gradient-end));
    z-index: 9999;
    transition: width 0.1s ease-out;
}

[data-theme="dark"] .scroll-progress {
    background: linear-gradient(90deg, #ffffff, #8ab4ff);
}

li{
    list-style-type: "// ";
    margin-left: 2rem;
}

h1{
    font-family: 'Overpass', Arial, Helvetica, sans-serif;
}

h2{
    background: linear-gradient(90deg, var(--h2-gradient-start) 0%, var(--h2-gradient-end) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Overpass', Arial, Helvetica, sans-serif;
}

h3{
    font-family: 'Overpass', Arial, Helvetica, sans-serif;
}

.hero{
    min-height: 20vh;
    margin-top: 8rem;
    padding-right: 5rem;
    margin-bottom: 10rem;
    padding-top: 3rem;
    max-width: 1024px;
}

.hero_emoji{
    font-size: var(--font-size-xxl);
    margin-left: -1rem;
    background: linear-gradient(90deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.hi{
    font-size: 72px;
    background: linear-gradient(90deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 1024px;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.hero-text{
    padding: 2rem 1rem 2rem 0rem;
    max-width: 1024px;
    will-change: opacity, transform;
}

[data-theme="dark"] .hero-text {
    color: #ffffff;
}

.like-display{
    background: linear-gradient(90deg, var(--like-gradient-start) 0%, var(--like-gradient-end) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box{
    background-color: hsl(218, 100%, 70%);
    padding: 5rem;
    margin-bottom: 10rem;
    box-shadow:
        -1px 1px hsl(218, 100%, 40%),
		-2px 2px hsl(218, 100%, 40%),
		-3px 3px hsl(218, 100%, 40%),
		-4px 4px hsl(218, 100%, 40%),
		-5px 5px hsl(218, 100%, 40%);
}

[data-theme="dark"] .box {
    background-color: hsl(218, 60%, 30%);
    box-shadow:
        -1px 1px hsl(218, 60%, 20%),
		-2px 2px hsl(218, 60%, 20%),
		-3px 3px hsl(218, 60%, 20%),
		-4px 4px hsl(218, 60%, 20%),
		-5px 5px hsl(218, 60%, 20%);
}

.container1{
    background-color: hsl(79, 100%, 85%);
    padding: 5rem 10rem 5rem 5rem;
    margin-top: 5rem;
    box-shadow:
       inset 1px 1px hsl(79, 73%, 16%),
       inset 2px 2px hsl(79, 73%, 16%),
       inset 3px 3px hsl(79, 73%, 16%),
       inset 4px 4px hsl(79, 73%, 16%),
       inset 5px 5px hsl(79, 73%, 16%),
       0px 8px 32px 0 hsla(79, 100%, 80%, 0.3);
    color: hsl(84, 32%, 18%);
    will-change: opacity, transform;
}

[data-theme="dark"] .container1 {
    background-color: hsl(79, 60%, 25%);
    box-shadow:
       inset 1px 1px hsl(79, 60%, 15%),
       inset 2px 2px hsl(79, 60%, 15%),
       inset 3px 3px hsl(79, 60%, 15%),
       inset 4px 4px hsl(79, 60%, 15%),
       inset 5px 5px hsl(79, 60%, 15%),
       0px 8px 32px 0 hsla(79, 60%, 40%, 0.3);
    color: hsl(79, 50%, 85%);
}
.container2{
    background-color: hsl(255, 100%, 85%);
    padding: 5rem 10rem 5rem 5rem;
    margin-top: 5rem;
    box-shadow:
       inset 1px 1px hsl(255, 100%, 60%),
       inset 2px 2px hsl(255, 100%, 60%),
       inset 3px 3px hsl(255, 100%, 60%),
       inset 4px 4px hsl(255, 100%, 60%),
       inset 5px 5px hsl(255, 100%, 60%),
       0px 8px 32px 0 hsla(255, 100%, 80%, 0.3);
    color: hsl(255, 82%, 11%);
    will-change: opacity, transform;
}

[data-theme="dark"] .container2 {
    background-color: hsl(255, 60%, 25%);
    box-shadow:
       inset 1px 1px hsl(255, 60%, 15%),
       inset 2px 2px hsl(255, 60%, 15%),
       inset 3px 3px hsl(255, 60%, 15%),
       inset 4px 4px hsl(255, 60%, 15%),
       inset 5px 5px hsl(255, 60%, 15%),
       0px 8px 32px 0 hsla(255, 60%, 40%, 0.3);
    color: hsl(255, 50%, 85%);
}
.container3{
    background-color: hsl(324, 100%, 85%);
    padding: 5rem 10rem 5rem 5rem;
    margin-top: 5rem;
    box-shadow:
       inset 1px 1px hsl(324, 47%, 34%),
       inset 2px 2px hsl(324, 47%, 34%),
       inset 3px 3px hsl(324, 47%, 34%),
       inset 4px 4px hsl(324, 47%, 34%),
       inset 5px 5px hsl(324, 47%, 34%),
       0px 8px 32px 0 hsla(324, 100%, 80%, 0.3);
    color: hsl(323, 100%, 10%);
    will-change: opacity, transform;
}

[data-theme="dark"] .container3 {
    background-color: hsl(324, 60%, 25%);
    box-shadow:
       inset 1px 1px hsl(324, 60%, 15%),
       inset 2px 2px hsl(324, 60%, 15%),
       inset 3px 3px hsl(324, 60%, 15%),
       inset 4px 4px hsl(324, 60%, 15%),
       inset 5px 5px hsl(324, 60%, 15%),
       0px 8px 32px 0 hsla(324, 60%, 40%, 0.3);
    color: hsl(324, 50%, 85%);
}
.container4{
    background-color: hsl(26, 100%, 85%);
    padding: 5rem 10rem 5rem 5rem;
    margin-top: 5rem;
    box-shadow:
       inset 1px 1px hsl(26, 100%, 40%),
       inset 2px 2px hsl(26, 100%, 40%),
       inset 3px 3px hsl(26, 100%, 40%),
       inset 4px 4px hsl(26, 100%, 40%),
       inset 5px 5px hsl(26, 100%, 40%),
       0px 8px 32px 0 hsla(26, 100%, 80%, 0.3);
    color: hsl(25, 100%, 15%);
    will-change: opacity, transform;
}

[data-theme="dark"] .container4 {
    background-color: hsl(26, 60%, 25%);
    box-shadow:
       inset 1px 1px hsl(26, 60%, 15%),
       inset 2px 2px hsl(26, 60%, 15%),
       inset 3px 3px hsl(26, 60%, 15%),
       inset 4px 4px hsl(26, 60%, 15%),
       inset 5px 5px hsl(26, 60%, 15%),
       0px 8px 32px 0 hsla(26, 60%, 40%, 0.3);
    color: hsl(26, 50%, 85%);
}
.portfolio{
    background-color: hsl(218, 100%, 90%);
    padding: 5rem;
    margin-top: 5rem;
    border-top: 1rem ridge;
    border-bottom: 1rem ridge;
    border-color: hsla(218, 100%, 80%);
}

[data-theme="dark"] .portfolio {
    background-color: hsl(218, 60%, 20%);
    border-color: hsla(218, 60%, 40%);
}

.listspace{
    padding-left: 2rem;
}

.refresh-icon{
        height: 1.5rem;
        width: 1.5rem;
        background: url("../img/refresh.svg");
        vertical-align: -0.25rem;
        animation: rotate 5000ms 5 linear;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
        filter: brightness(0.3);
    }

.refresh-icon:hover{
        transform: rotate(180deg);
    }

[data-theme="dark"] .refresh-icon {
    filter: invert(1);
}


span.email b {
	display: none !important;
}


/* #media queries */
@media screen and (min-width: 1200px) {
        .hero{
        padding-right: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .hero{
        padding-right: 2rem;
    }
    .hero-text{
        padding-right: 1rem;
        max-width: 768px;
    }
    .box{
        padding: 1.5rem;
        padding-top: 4rem;
    }
    h2{
        padding-right: 7rem;
    }
    .container1, .container2, .container3, .container4{
        padding: 5rem 1rem 2rem 2rem;
    }
    .bullets{
        margin-left: 4.5rem;
        list-style-position: outside;
    }
}