/* ---------------------------- General ----------------------------------  */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}
.section{
    display: flex;
    align-items: center;
    justify-content: baseline;
    width: 96%;
    padding: 2%;
}

/* ---------------------------- Welcome Section ----------------------------------  */
.menu{
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: #ffffff00;
    width: 99%;
    padding-left: 1%;
}
.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0%;
    width: 100%;
    height: 100vh;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    background-image: url('../img/code.gif');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
.welcome::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: -1;
}
.menulabel{
    padding-left: 0.5%;
    font-size: 0.75vw;
}
.whoamilabel, .experiencelabel, .skillslabel, .techlabel, .proyectslabel{
    text-decoration: underline;
    color: inherit;
}
#welcomemsg{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
}
#welcomemsg p {
    margin: 1vw;
}
#welcomemsg1{
    font-size: 3.5vh;
    font-weight: bold;
    text-shadow: 0 0 2vh rgb(67, 163, 247);
}
#welcomemsg2{
    font-size: 1vw;
}
#btmwhoami{
    background: linear-gradient(145deg, rgb(0, 37, 169), rgb(189, 203, 254));
    border: none;
    color: white;
    font-size: 1vw;
    padding: 1vh 1vw;
    margin: 1vh 0;
    border-radius: 0.7vw;
    cursor: pointer;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease;
}
#btmwhoami:hover {
    background: linear-gradient(145deg, rgb(189, 203, 254), rgb(0, 37, 169));
    transform: scale(1.1);
}

/* ---------------------------- Whoami Section ----------------------------------  */
#whoami{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    background-image: url('../img/whoami.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
#whoami::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: -1;
}
#whoamimsg{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    padding: 5vh 4vw;
    margin: 0;
    width: 45%;
    height: 100vh;
}
#whoamimsg1{
    font-size: 3vw;
    font-weight: bold;
    animation: colorChange 1.5s infinite alternate;
}
@keyframes colorChange {
    0% {
        text-shadow: 0.5vh 0.5vh 1.2vh #0084ff;
    }
    100% {
        text-shadow: 0.5vh 0.5vh 1.2vh #30c016;
    }
}
#whoamimsg2{
    font-size: 2.75vh;
}

/* ---------------------------- Experience ----------------------------------  */
#experience{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    background-image: url('../img/code2.gif');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
.exp-cont{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 90vw;
    gap: 2vw;
}
#experience #techlabel{
    margin-bottom: 5vh;
}
#experience::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: -1;
}
.exp{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 28vw;
    height: 50vh;
    border-radius: 3vh;
    background-color: rgba(12, 69, 120, 0.3);
}
.exp h2{
    font-size: 3vh;
    margin: 2vh 0 1vh 0;
    padding: 0;
    text-shadow: 0 0 2vh rgb(67, 163, 247);
    text-align: center;
}
.exp p{
    margin: 0 0 2vh 0;
    padding: 0;
    font-size: 2vh;
    text-align: center;
}
.exp button{
    margin: 0 0 2vh 0;
    padding: 1vh 1vw;
    background: linear-gradient(145deg, rgb(0, 37, 169), rgb(189, 203, 254));
    border: none;
    color: white;
    font-size: 1vw;
    border-radius: 0.7vw;
    cursor: pointer;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease;
}
.exp button:hover {
    background: linear-gradient(145deg, rgb(189, 203, 254), rgb(0, 37, 169));
    transform: scale(1.1);
}
.exp img{
    height: auto;
    width: 22vw;
    object-fit: cover;
}
.imge{
    height: 22vh;
}
.imge img{
    height: 100%;
    width: auto;
    object-fit: cover;
}
.modal {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}
.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 3vh;
    background-color: rgba(0, 0, 10, 0.75);
    margin: 15% auto;
    padding: 3vh 10vh;
    box-shadow: 0 0 1vh rgba(0, 132, 255, 1);
    width: 80vw;
    height: 50vh;
    position: relative;
}
.modal-content p, li{
    font-size: 3vh;
    text-align: justify;
    margin: 0;
    padding: 0;
}
.modal.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0s;
}

/* ---------------------------- Skills ----------------------------------  */
#skills{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    background-image: url('../img/speaker.jfif');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
#skills::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: -1;
}
#skills h2{
    margin-top: 2vh;
    margin-bottom: 2vh;
    padding: 0;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 3vw;
    text-shadow: 0.5vh 0.5vh 1.2vh #0084ff;
}
.skills-cont {
    display: flex;
    flex-wrap: wrap;
    gap: 1vh;
    justify-content: space-between;
    align-items: center;
    width: 87vw;
    height: 81vh;
    padding: 1vh;
}
.inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35vh;
    border-radius: 3vh;
    background-color: rgba(12, 69, 120, 0.3);
}
.skills-cont .inner:nth-child(1),
.skills-cont .inner:nth-child(2),
.skills-cont .inner:nth-child(3),
.skills-cont .inner:nth-child(4),
.skills-cont .inner:nth-child(5),
.skills-cont .inner:nth-child(6) {
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.inner h3{
    font-size: 4vh;
    margin: 2vh 0 1vh 0;
    padding: 0;
    text-shadow: 0 0 2vh rgb(67, 163, 247);
    text-align: center;
}
.inner p{
    margin: 0 0 3vh 0;
    padding: 0 5vh;
    font-size: 2.3vh;
    text-align: center;
}
.skills-cont .inner:nth-child(1),
.skills-cont .inner:nth-child(3),
.skills-cont .inner:nth-child(5){
    animation: boxskill1 2s infinite alternate;
}
.skills-cont .inner:nth-child(2),
.skills-cont .inner:nth-child(4),
.skills-cont .inner:nth-child(6){
    animation: boxskill2 2s infinite alternate;
}
@keyframes boxskill1 {
    0% {
        box-shadow: 0 0 2vh rgba(0, 132, 255, 1);
    }
    100%{
        box-shadow: 0 0 2vh rgb(85, 67, 247);
    }
}
@keyframes boxskill2 {
    0%{
        box-shadow: 0 0 2vh rgb(85, 67, 247);
    }
    100% {
        box-shadow: 0 0 2vh rgba(0, 132, 255, 1);
    }
}
/* ---------------------------- Technologies ----------------------------------  */
#tech{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    background-image: url('../img/back.png');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
#tech::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
}
.slider{
    width: 100vw;
    height: auto;
    margin: auto;
    overflow: hidden;
    background-color: rgba(47, 47, 47, 0.4);
}
.slider .slide-track{
    display: flex;
    animation: scroll 50s linear infinite;
    width: calc(8vw*42);
}
.slider .slide{
    width: 8vw;
}
.slider .slide img{
    width: 100%;
}
.slide{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh;
}
@keyframes scroll{
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(calc(-8vw*21))
    }
}
#techlabel{
    margin-top: 2vh;
    margin-bottom: 0;
    padding: 0;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 3vw;
    animation: colorChange 1.5s infinite alternate;
}
#techlabel1{
    margin-bottom: 3vh;
    padding: 0;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 1.2vw;
}

/* ---------------------------- My Projects ----------------------------------  */
#projects{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    background-image: url('../img/setup.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
#projects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0,0,0,1) 0%, rgb(0,0,0,0.95) 35%, rgb(0,0,0,0.8) 50%, rgb(0,0,0,0.8) 70%, rgb(0,0,0,0.85) 90%, rgb(0,0,0,0.9) 100%);
    z-index: -1;

}
.projct-cont{
    display: flex;
    flex-wrap: wrap;
    gap: 2vw 2vw;
    padding: 2vh 3vw 3vw 3vw;
    width: 100vw;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.projct{
    flex: 1 1 45vw;
    height: 35vh;
    width: 100%;
    background-color: rgba(12, 69, 120, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4vh;
    animation: boxChange 5s infinite alternate;
}
@keyframes boxChange {
    0% {
        box-shadow: 0 0 1vh rgba(0, 132, 255, 0);
    }
    100% {
        box-shadow: 0 0 1vh rgba(0, 132, 255, 1);
    }
}
#projectlabel{
    margin-top: 2vh;
    margin-bottom: 0;
    padding: 0;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 3vw;
    animation: colorChange 1.5s infinite alternate;
}
#projectlabel1{
    margin-bottom: 0.5vh;
    padding: 0;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 1.2vw;
}
.img-pjt {
    flex: 0 0 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.img-pjt img {
    height: 22vh;
    width: auto;
    object-fit: cover;
}
.desc-pjt {
    flex: 1;
    padding: 0 3vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
}
.desc-pjt h2{
    font-size: 4vh;
    animation: pjtChange 5s infinite alternate;
    padding: 0;
    padding-top: 1vh;
    margin: 0;
}
.desc-pjt p{
    font-size: 1.8vh;
    padding: 0;
    text-align: justify;
    padding-bottom: 0;
    margin: 0;
}
@keyframes pjtChange {
    0% {
        color: rgb(255, 255, 255);
        text-shadow: 0.5vh 0.5vh 1vh #0084ff00;
    }
    100% {
        color: rgb(211, 232, 252);
        text-shadow: 0.1vh 0.1vh 0.75vh rgba(0, 132, 255, 1);
    }
}
.btn-pjt{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.btn-pjt button{
    background: linear-gradient(145deg, rgb(189, 203, 254), rgb(0, 37, 169));
    border: none;
    color: white;
    font-size: 1vw;
    padding: 1vh 1vw;
    margin: 0 0;
    border-radius: 0.7vw;
    cursor: pointer;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease;
}
.btn-pjt button:hover{
    background: linear-gradient(145deg, rgb(0, 37, 169), rgb(189, 203, 254));
    transform: scale(1.1);
}

/* ---------------------------- Footer ----------------------------------  */
footer{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5vh;
    background-color: rgb(0, 0, 5);
    color: white;
    text-shadow: 0.1vh 0.1vh 1vh rgba(0, 132, 255, 1);
    font-family: 'Lucida Console', Monaco, monospace;
    overflow-y: hidden;
}
.footerlabel{
    padding: 3vh;
    font-size: 0.75vw;
}
.footer-label{
    text-decoration: underline;
    color: inherit;
}
#contact{
    animation: fade 1.5s infinite alternate;
}
@keyframes fade {
    0% {
        color: rgba(255, 255, 255, 0);
        text-shadow: 0.5vh 0.5vh 1vh #0084ff00;
    }
    100% {
        color: rgb(255, 255, 255);
        text-shadow: 0.1vh 0.1vh 1vh rgba(0, 132, 255, 1);
    }
}

/*------------------------ Web Responsive ------------------------------ */

/* Mobile less than 480px */
@media (max-width: 480px) {
    /* General Layout */
    *, *::before, *::after {
        box-sizing: border-box;
      }
    html, body {
      font-size: 2.5vh;
      overflow-x: hidden;
    }
    .section {
      flex-direction: column !important;
      padding: 4vw;
      width: 100%;
      height: 100vh;
    }
  
    /* Menu */
    .menu {
      flex-wrap: wrap;
      justify-content: center;
      gap: 2vw;
      padding: 0;
      margin: 0;
    }
    .menulabel {
        font-size: 3.5vw;
        margin: 0;
        padding: 0;
    }
    .menulabel p{
        margin: 0;
        padding: 0;
    }
    /* Welcome Section */
    #welcomemsg {
      width: 100%;
      padding: 5vh 2vw;
    }
    #welcomemsg1 {
      font-size: 4.5vh;
      padding: 0 5vw;
    }
    #welcomemsg2 {
      font-size: 2.2vh;
      padding: 0 5vw;
    }
    #btmwhoami {
      font-size: 2.5vh;
      padding: 1.5vh 5vw;
    }

    /* Whoami */
    #whoamimsg {
        width: 100%;
        padding: 5vh 2vw;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    #whoamimsg2 {
        font-size: 1.5vh;
        margin-bottom: 2vh;
        line-height: 1.4;
        padding: 0 5vw;
    }
    #whoamimsg1 {
      font-size: 4.5vh;
    }
  
    /* Experience Section */
    .exp-cont {
        flex-direction: column;
        width: 100vw;
        gap: 3vh;
    }
    .exp {
        width: 95vw;
        height: 27vh;
        padding: 1vh 2vw;
        margin: 0;
    }
    .exp img{
        width: 80%;
        height: auto; 
    }
    .imge{
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .imge img {
        height: 10vh;
        width: auto;
    }
    .exp h2 {
      font-size: 2vh;
    }
    .exp p {
      font-size: 1.5vh;
    }
    .exp button {
      font-size: 2vh;
      padding: 1vh 4vw;
    }
    .modal-content{
        padding: 2vw;
        margin: 0;
    }
    .modal-content p, li{
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: justify;
        font-size: 1.5vh;
    }
    #experience #techlabel{
        font-size: 4.5vh;
        margin-bottom: 2vw;
        padding-bottom: 2vw;
    }
  
    /* Skills */
    #skills h2{
        font-size: 4.5vh;
    }
    .skills-cont {
      flex-direction: column;
      width: 100%;
      height: auto;
      gap: 0;
    }
    .inner {
      width: 100%;
      height: 30%;
      padding: 2vw;
      margin: 0;
      padding: 0;
    }
    .inner h3 {
      font-size: 3.5vw;
      margin: 0.5vh 2vh;
      padding: 0;
    }
    .inner p {
      font-size: 2.75vw;
      margin: 0.5vh 2vh;
      padding: 0;
    }
  
    /* Technology Slider */
    .slider{
        width: 100vw;
        height: auto;
        margin: auto;
        overflow: hidden;
        background-color: rgba(47, 47, 47, 0.4);
    }
    .slider .slide-track{
        display: flex;
        animation: scroll 80s linear infinite;
        width: calc(90vw*42);
    }
    .slider .slide{
        width: 90vw;
    }
    .slider .slide img{
        width: 100%;
    }
    .slide{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1vh;
    }
    @keyframes scroll{
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-90vw*21))
        }
    }
    #techlabel{
        font-size: 4.5vh;
        padding: 12vh 3vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    #techlabel1{
        font-size: 2vh;
        padding: 0 5vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }

    /* Projects */
    #projects{
        height: 165vh;
    }
    .projct-cont {
      flex-direction: column;
      gap: 2vh;
    }
    .projct {
        flex: 1 1 45vw;
        height: 50%;
        background-color: rgba(12, 69, 120, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4vh;
        animation: boxChange 5s infinite alternate;
    }
    .img-pjt {
      width: 40%;
      height: auto;
    }
    .img-pjt img {
      width: 100%;
      height: auto;
    }
    .desc-pjt {
      padding: 2vh;
    }
    .desc-pjt h2 {
      font-size: 2vh;
    }
    .desc-pjt p {
      font-size: 1vh;
    }
    .btn-pjt button {
      font-size: 2vh;
      padding: 1vh 4vw;
    }
    #projectlabel{
        font-size: 4.5vh;
        padding: 3vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    #projectlabel1{
        font-size: 2vh;
        padding: 0 5vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    /* Footer */
    .footerlabel {
      font-size: 1vh;
      padding: 1vh;
    }
}  

/* Vertical Monitors */
@media screen and (max-aspect-ratio: 10/16) {
    /* General Layout */
    *, *::before, *::after {
        box-sizing: border-box;
      }
    html, body {
      font-size: 2.5vh;
      overflow-x: hidden;
    }
    .section {
      flex-direction: column !important;
      padding: 4vw;
      width: 100%;
      height: 100vh;
    }
  
    /* Menu */
    .menu {
      flex-wrap: wrap;
      justify-content: center;
      gap: 2vw;
      padding: 0;
      margin: 0;
    }
    .menulabel {
        font-size: 3.5vw;
        margin: 0;
        padding: 0;
    }
    .menulabel p{
        margin: 0;
        padding: 0;
    }
    /* Welcome Section */
    #welcomemsg {
      width: 100%;
      padding: 5vh 2vw;
    }
    #welcomemsg1 {
      font-size: 4.5vh;
      padding: 0 5vw;
    }
    #welcomemsg2 {
      font-size: 2.2vh;
      padding: 0 5vw;
    }
    #btmwhoami {
      font-size: 2.5vh;
      padding: 1.5vh 5vw;
    }

    /* Whoami */
    #whoamimsg {
        width: 100%;
        padding: 5vh 2vw;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    #whoamimsg2 {
        font-size: 1.5vh;
        margin-bottom: 2vh;
        line-height: 1.4;
        padding: 0 5vw;
    }
    #whoamimsg1 {
      font-size: 4.5vh;
    }
  
    /* Experience Section */
    .exp-cont {
        flex-direction: column;
        width: 100vw;
        gap: 3vh;
    }
    .exp {
        width: 95vw;
        height: 27vh;
        padding: 0.5vh 2vw;
        margin: 0;
    }
    .exp img{
        width: 60%;
        height: auto; 
    }
    .imge{
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .imge img {
        height: 10vh;
        width: auto;
    }
    .exp h2 {
      font-size: 2vh;
    }
    .exp p {
      font-size: 1.5vh;
    }
    .exp button {
      font-size: 2vh;
      padding: 1vh 4vw;
    }
    .modal-content{
        padding: 2vw;
        margin: 0;
    }
    .modal-content p, li{
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: justify;
        font-size: 1.5vh;
    }
    #experience #techlabel{
        font-size: 4.5vh;
        margin: 0;
        padding: 0;
    }
  
    /* Skills */
    #skills h2{
        font-size: 4.5vh;
    }
    .skills-cont {
      flex-direction: column;
      width: 100%;
      height: 80%;
      gap: 0 0 0 0;
    }
    .inner {
      width: 100%;
      height: 26%;
      margin: 0;
      padding: 0;
    }
    .inner h3 {
      font-size: 3.5vw;
      margin: 0.5vh 2vh;
      padding: 0;
    }
    .inner p {
      font-size: 2.75vw;
      margin: 0 2vh;
      padding: 0;
    }
  
    /* Technology Slider */
    .slider{
        width: 100vw;
        height: auto;
        margin: auto;
        overflow: hidden;
        background-color: rgba(47, 47, 47, 0.4);
    }
    .slider .slide-track{
        display: flex;
        animation: scroll 80s linear infinite;
        width: calc(90vw*42);
    }
    .slider .slide{
        width: 90vw;
    }
    .slider .slide img{
        width: 100%;
    }
    .slide{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1vh;
    }
    @keyframes scroll{
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-90vw*21))
        }
    }
    #techlabel{
        font-size: 4.5vh;
        padding: 8vh 3vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    #techlabel1{
        font-size: 2vh;
        padding: 0 5vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }

    /* Projects */
    #projects{
        height: 135vh;
    }
    .projct-cont {
      flex-direction: column;
      gap: 2vh;
    }
    .projct {
        flex: 1 1 45vw;
        height: 50%;
        background-color: rgba(12, 69, 120, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4vh;
        animation: boxChange 5s infinite alternate;
    }
    .img-pjt {
      width: 40%;
      height: auto;
    }
    .img-pjt img {
      width: 100%;
      height: auto;
    }
    .desc-pjt {
      padding: 2vh;
    }
    .desc-pjt h2 {
      font-size: 2vh;
    }
    .desc-pjt p {
      font-size: 1vh;
    }
    .btn-pjt button {
      font-size: 2vh;
      padding: 1vh 4vw;
    }
    #projectlabel{
        font-size: 4.5vh;
        padding: 3vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    #projectlabel1{
        font-size: 2vh;
        padding: 0 5vw;
        padding-bottom: 0;
        margin-bottom: 0;
        text-align: center;
    }
    /* Footer */
    .footerlabel {
      font-size: 1vh;
      padding: 1vh;
    }
}