:root {
    --color-domn-dark: #000;
    --color-domn-dark-sec: hsla(0, 0%, 7%, 1);
    --color-domn-med: hsla(220, 11%, 11%, 1);
    --color-domn-light: #fff;
    --color-sec-teal: hsla(180, 60%, 50%, 1);
    --color-sec-teal-light: hsla(180, 57%, 77%, 1);
    --color-sec-purple: hsla(290, 35%, 61%, 1);
    --color-acc-purple: hsl(248, 35%, 61.5%);
    --color-acc-lemon: hsla(160, 80%, 50%, 1);
    --padding-section-tb: 2rem;
}

*, *::before, *::after {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html {
    height: 100%;
}

body {
    background-color: var(--color-domn-dark);  
    position: relative;
    padding-bottom: 1.5rem;
    min-height: 100%;
    min-width: 343px;
    max-width: 1600px;
    margin: 0px auto;
}

main {
    max-width: 1350px;
    margin: 0px auto;
    /*position: relative;*/
}

.sctn-bg-blk {
    color: var(--color-domn-light);
}

.sctn-mg-lr {
    margin-left: 4vw;
    margin-right: 4vw;
}

.sctn-pd-tb {
    padding-top: var(--padding-section-tb);
    padding-bottom: var(--padding-section-tb);
}

.text-lg-1 {
    font-size: 1.63rem;
    text-transform: uppercase;
}

.text-lg-2 {
    font-size: 1.4rem;
    margin-bottom: 0.45em;
}

.text-sm {
    font-size: 1rem;
}

.text-xs {
    font-size: 0.875rem;
}

/*Header*/
header {
    position: sticky;
    top: 0px;
    height: 3em;
    background-color: var(--color-domn-med);
    color: var(--color-acc-purple);
    z-index: 100;
    padding-left: 2vw;
    padding-right: 2vw;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

header ul {
    list-style-type: none;
}

header nav {
    display: none;
}

nav li {
    float: right;
    padding-left: 1.5em;
}

header a, #about a, #works a {
    color: var(--color-acc-purple);
    text-decoration: none;
}

header aside {
    width: 10%;
    height: 35%;
    max-width: 30px;
}

.menu-btn {
    width: 102%;
    height: 100%;
    color: transparent;
    position: absolute;
    opacity: 0;
}

#open-menu-lbl {
    width: 100%;
    height: 100%;
    border-bottom: 2px solid var(--color-acc-purple);
    display: block;
    position: relative;
}

#open-menu-lbl::before {
    content: "";
    width: 100%;
    border-bottom: 2px solid var(--color-acc-purple);
    display: inline-block;
    position: absolute;
    top: 0%;
}

#open-menu-lbl::after {
    content: "";
    height: 10%;
    width: 100%;
    border-bottom: 2px solid var(--color-acc-purple);
    display: inline-block;
    position: absolute;
    top: 50%;
}

header aside ul {
    position: absolute;
    right: 0px;
    background-color: var(--color-domn-dark);
    z-index: 50;
    bottom: -12em;
    height: 12em;
    min-width: 20%;
    padding: 1em 0px;
    border-radius: 6px;
    box-shadow: -0px 0px 5px 5px var(--color-domn-med);
    display: none;
}

header aside:focus-within ul {
    display: block;
}

header aside li a {
    line-height: 2.5em;
    padding: 0px 3.5em 0px 1.5em;
    color: var(--color-domn-light);
}

header aside li:hover {
    background-color: var(--color-domn-med);
}

#about {
    display: grid;
    grid-template-columns: 100%;
    text-align: center;
    row-gap: 0.6rem;
    justify-items: center;
}

#email {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: left;
    color: var(--color-acc-purple);
}

#h1-1 {
    grid-area: 2 / 1 / 3 / 2;
}

h1 span, h2 span {
    display: inline-block;
}

#h1-1 > span:nth-child(1) {
    animation: display 0.4s ease-in 0.4s 1 normal both;
}

#h1-1 > span:nth-child(2) {
    animation: display 0.4s ease-in 0.8s 1 normal both;
}

#about .img-container {
    grid-area: 3 / 1 / 4 / 2; 
    width: 100%;
    aspect-ratio: 1.8 / 1;
    max-width: 700px;
    min-height: 260px;
    position: relative;
    contain: size;
}

#h1-2 {
    grid-area: 4 / 1 / 5 / 2;
}

#h1-2 > span:nth-child(1) {
    animation: display 0.4s ease-in 1.4s 1 normal both;
}

#h1-2 > span:nth-child(2) {
    animation: display 0.4s ease-in 1.8s 1 normal both;
}

#bt-txt {
    grid-area: 5 / 1 / 6 / 2;
    line-height: 1.5;
    word-break: break-word;
}

#about .img-container .img, .cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 67% 33% 28% 72% / 59% 52% 48% 41%;
}

#about .img-container .img {
    z-index: 3;
    position: relative;
}

#about .img-container::before {
    content: "";
    top: -1%;
    box-shadow: /*inset 10px 10px 5px hsla(0, 0%, 5%, 1),*/
                inset -15px -15px 15px hsla(0, 0%, 5%, 1);
    height: 102%;
    width: 102%;
    object-fit: cover;
    border-radius: 67% 33% 28% 72% / 59% 52% 48% 41%;
    position: absolute;
    left: -1%;
    z-index: 6;
}

#about .img-container::after {
    content: "";
    top: 0px;
    box-shadow: inset 15px 15px 10px hsla(0, 0%, 100%, 0.4),
                inset 10px -10px 15px hsla(0, 0%, 100%, 0.4);
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 67% 33% 28% 72% / 59% 52% 48% 41%;
    position: absolute;
    left: 0px;
    z-index: 5;
}

@keyframes display {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    
    25% {
        opacity: .25;
        filter: blur(7.5px);
    }
    
    50% {
        opacity: .5;
        filter: blur(5px);
    }
    
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

/*Skills & Works*/
#skills .icon-wrapper {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.7rem;
    column-gap: 15px;
}

.icon-wrapper.text-sm .logo {
    width: 35px;
    aspect-ratio: 1/1;
}

.icon-wrapper.text-sm figure, .icon-wrapper.text-xs figure {
    padding: 0.3em 0.8em 0.3em 0.3em;
    background-color: var(--color-domn-med);
    border-radius: 5px;
    display: flex;
    align-items: center;
    column-gap: 0.5em;
}

.icon-wrapper figure * {
    text-transform: capitalize;
}

/*Works*/
#works .wrapper {
}

#works .scn-txt h3, #works .scn-txt p {
    margin-bottom: 0.4em;
}

#works .scn-txt p svg {
    width: 0.6rem;
    height: 0.6rem;
    vertical-align: top;
}

#works .icon-wrapper {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 10px;
}

.icon-wrapper.text-xs .logo {
    width: 15px;
    aspect-ratio: 1/1;
}

#smedia, #plist {
    background-color: var(--color-domn-dark-sec);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

#works .img-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 2.3 / 1;
}

#smedia {
    margin-bottom: var(--padding-section-tb);
}

#works .scn-txt {
    padding: 0.7em;
}

#works .img-container a {
    width: 100%;
    height: 100%;
}

#works .img-container img {
    width: calc(100% + 30px);
    height: calc(100% + 5px);
    object-fit: cover;
    object-position: left -30px top -5px;
    animation: figRot 6s ease infinite alternate;
}

#works .img-container a::after{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    content: "";
}

#works .img-container a p {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    text-align: center;
    animation: figRot 6s ease -6s infinite alternate;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    background-color: var(--color-sec-teal-light);
    color: var(--color-domn-dark-sec);
}

#works .img-container::before {
    content: '';
    display: block;
    height: 102%;
    width: 102%;
    background-color: var(--color-sec-teal);
    clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
    position: absolute;
    top: -1%;
    z-index: 5;
    box-shadow: inset 60px 35px 70px #000/*,
                inset 0px -25px 30px hsla(220, 11%, 11%, 1)*/;
    animation: showTop 3s ease infinite alternate backwards;
    left: -1%;
}

#works .img-container::after {
    content: '';
    display: block;
    height: 102%;
    width: 102%;
    background-color: var(--color-sec-teal);
    clip-path: polygon(100% 100%, 0% 100%, 100%  0%);
    position: absolute;
    bottom: -1%;
    z-index: 6;
    box-shadow: inset -60px -35px 70px #000/*hsla(220, 11%, 11%, 1)/*,
                inset 0px -25px 30px hsla(220, 11%, 11%, 1)*/;
    animation: showBottom 3s ease infinite alternate backwards;
    right: -1%;
}

@keyframes showTop {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    }
    60% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
    } 
}

@keyframes showBottom {
    0% {
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
    60% {
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
    100% {
        clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
    } 
}

@keyframes figRot {
    0% {
        transform: rotate(0deg) scale(1);
    }
    30% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-100deg) scale(4.5);
        visibility: hidden;
    }
    100% {
        transform: rotate(-100deg) scale(4.5);
        visibility: hidden;
    }
}

/*Ed-Ex*/
#ed {
    padding-bottom: var(--padding-section-tb);
}

#ex .slides-container {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    aspect-ratio: 3 / 1;
    scrollbar-color: var(--color-domn-med) var(--color-domn-dark);
    max-height: 200px;
}

#ex .slide {
    flex: 0 0 85%;
    position: relative;
    border: 0px;
    margin-left: 7.5%;
    margin-bottom: 1rem;
}

#ex .slide .detail.co {
    width: 109%;
    padding-left: 12%;
    border-bottom: 15px solid var(--color-domn-light);
    height: 100%;
    align-content: center;
    padding-right: 13%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#ex .slide .detail.start {
    position: absolute;
    width: 17%;
    aspect-ratio: 1 / 1;
    left: -7.5%;
    bottom: 30%;
    border: none;
}

#ex .slide .detail.co::before {
    content: "";
    position: absolute;;
    height: 30%;
    border: 2px solid var(--color-domn-light);
    left: 0%;
    bottom: 0px;
}

#ex .detail p {
    color: var(--color-sec-purple);
}

#contact {
    align-content: center;
    text-align: center;
}

#contact a {
    text-decoration: none;
    padding: 0.1em 0.2em;
    display: inline-block;
    border-radius: 5px;
    background-color: var(--color-acc-lemon);
    line-height: 2em;
    color: var(--color-domn-dark-sec);
    position: relative;
    overflow: hidden;
}

#contact a:hover {
    background-color: transparent;
    color: var(--color-acc-lemon);
}

#contact svg {
    width: 2em;
    height: 2em;
    float: left;
    vertical-align: bottom;
    padding-right: 0.1em;
}

#contact a::after {
    content: "";
    background-color: var(--color-domn-light);
    filter: blur(10px);
    transform: skew(-20deg);
    height: 100%;
    width: 3px;
    position: absolute;
    left: -100%;
    inset-block: 0;
    animation: action 4s ease-in-out infinite;
}

@keyframes action {
    0% {
        left: -100%;
    }
    50% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}

/*Footer*/
footer {
    align-content: center;
    position: absolute;
    bottom: 0px;
    height: 1.5rem;
    width: 100%;
}

@media only screen and (min-width: 400px) {
    .text-lg-1 {
        font-size: 1.8rem;
    }
}

@media only screen and (min-width: 600px) {
    .sctn-mg-lr {
        margin-left: 6vw;
        margin-right: 6vw;
    }
    
    header {
        padding-left: 3vw;
        padding-right: 3vw;
    }
    
    header nav {
        display: block;
    }
    
    header aside {
        display: none;
    }
    
    .text-lg-1 {
        font-size: 5.5vw;
    }
    
    .text-lg-2 {
        font-size: 2rem;
    }
    
    .text-md {
        font-size: 0px;
    }
    
    .text-sm {
        font-size: 1.15rem;
    }
    
    .text-xs {
        font-size: 1rem;
    }
    
    #skills .icon-wrapper {
        column-gap: 25px;
        row-gap: 1rem;
    }

    .icon-wrapper.text-sm .logo {
        width: 40px;
    }
    
    .icon-wrapper.text-xs .logo {
        width: 20px;
    }
    
    #ed-ex {
        display: flex;
        column-gap: 1.5em;
        flex-wrap: wrap;
        overflow: hidden;
    }
    
    #ed {
        flex: 1 0 0px;
    }
    
    #ex {
        flex: 12 1 50px;
        min-width: 450px;
        max-width: 930px;
    }
}

@media only screen and (min-width: 1021px) {
    .sctn-mg-lr {
        margin-left: 4vw;
        margin-right: 4vw;
    }
    
    header {
        padding-left: 2vw;
        padding-right: 2vw;
    }
    
    #about {
        column-gap: 0.5rem;
        grid-template-columns: auto max(47%, 400px);
        grid-template-rows: min-content 5.2vw 5.2vw auto;
        text-align: left;
        justify-items: normal;
        row-gap: 0.5rem;
    }
    
    #email {
        grid-area: 1 / 1 / 2 / 3;
    }
    
    #h1-1 {
        grid-area: 2 / 1 / 3 / 3;
        z-index: 3;
    }
    
    #h1-2 {
        grid-area: 3 / 1 / 4 / 3;
        z-index: 1;
    }
    
    #about .img-container {
        grid-area: 2 / 2 / 5 / 3;
        z-index: 2;
        aspect-ratio: 1.5 / 1;
    }
    
    #bt-txt {
        grid-area: 4 / 1 / 5 / 2;
    }
    
    #skills .icon-wrapper {
        column-gap: 40px;
    }

    .icon-wrapper.text-sm .logo {
        width: 50px;
    }
    
    #works .wrapper {
        display: flex;
        column-gap: 3%;
    }
    
    #smedia, #plist {
        flex: 1 0 50px;
        margin: 0px;
    }
    
    #ex .slide .detail.start {
        width: 13%;
    }
}

@media only screen and (min-width: 1155px) {
    #about {
        grid-template-rows: min-content 65px 65px auto;
    }
    
    #about .img-container {
        aspect-ratio: 1.6 / 1;
    }
    
    .text-lg-1 {
        font-size: 65px;
    }
}

@media only screen and (min-width: 1300px) {
    .sctn-mg-lr {
        margin-left: 6%;
        margin-right: 6%;
    }
    
    header {
        padding-left: 3%;
        padding-right: 3%;
    }
}