html, body { height: 100%; margin: 0; padding: 0; }
html {
    max-width: 110%;
    min-height: 100%;
    overflow-y: hidden;
    scroll-behavior:smooth
}
body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #161d32;
    color: #cbbdbd;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
    border: 1px solid rgb(213, 103, 103);
}
/* Navigation header */
header {
    width: 100%;
    background: linear-gradient(#120b1d,#3c5390 75%,transparent); /* #3c5390 */
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 5;
}

.pageContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    border: 1px solid white;
}

.letterContainer {
    text-align: center;
    position: absolute;
    z-index: 9;
}

#j,#u,#s,#t,#i,#n {
    width: 50px;
    height: 50px;
}

#j {
    top: 80px;
    left: 50px;
}
#u {
    top: 80px;
    left: 80px;
}
#s {
    top: 80px;
    left: 110px;
}
#t {
    top: 80px;
    left: 140px;
}
#i {
    top: 80px;
    left: 170px;
}
#n {
    top: 80px;
    left: 200px;
}

canvas {
    image-rendering: auto;
}

.pageArrow {
    margin: auto;
    color: #fff;
    width: 100px;
    height: 200px;
    overflow: hidden;
}

.rightArrow {
    padding-right: 0px;
}

.arrow {
    cursor: default;
    margin-top: 65%;
    border: solid #fff;
    padding: 10px;
    height: 50px;
    width: 50px;
    transform: rotate(45deg) skew(25deg, 25deg);
}

.arrow:hover {
    cursor: pointer;
    border-color: #d0ddec;
    color:rgb(135, 176, 205)
}

.left {
    margin-left: 20%;
    border-width: 0 0 8px 8px;
}

.right {
    margin-left: 0%;
    border-width: 8px 8px 0 0;
}

.arrowP {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 35px 30px 10px 0px;
    transform: skew(-25deg, -25deg) rotate(24deg);
}

.arrowR {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: -9px 30px 10px 0px;
    transform: skew(-25deg, -25deg) rotate(22deg);
}

.arrowP:hover {
    cursor: pointer;
}

.pageBox{
    margin: 4rem 0rem 4rem 0rem;
    height: 25rem;
    width: 80%;
    border-radius: 2px;
    border-left: 5px solid lightslategray;
    border-top: 5px solid lightslategray;
    border-bottom: 5px solid rgb(70, 81, 92);
    border-right: 5px solid rgb(70, 81, 92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-around;
    background-color: rgb(188, 242, 255);
}

.title-container {
    margin-top: 1rem;
    line-height: 0px;
}

.title1 {
    padding-left: 13rem;
    margin-top: 2rem;
    padding-top: .1rem;
    cursor: default;
    font-family: 'Marck Script';
}

.title {
    background-color: #393939;
    color: #fff;
    height: 40px;
    display: inline;    
    margin-bottom: none;
    font-family:Arial, Helvetica, sans-serif;
    padding: .1rem .3rem;
    border-radius: 3px;
    font-weight: 100;
    cursor: default;
}

.title-desc {
    width: 80%;
    padding: 0px 15px 0px 15px;
    background: 
    linear-gradient(white 0 0)top left/ 2px 10%,
    linear-gradient(white 0 0)left top/ 3% 2px;
    background-repeat:no-repeat;
}

.title-desc:after {
    content: '';
    display: block;
    border-bottom: 2px solid #fff;
    width: 50%;
    margin-left: auto;
}

.main-nav {
    height: 100%;
    width: 99%;
    padding-left: 0;
    margin-top: 0;
    display: flex;
    justify-content:space-evenly;
    list-style: none;
}

.main-nav li {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    z-index: 1;
}

.main-nav li a {
    padding-top: 1rem;
    display: block;
    width: inherit;
    text-decoration: none;
    color: #fff;
    height: 100%;
    padding: .5rem 0;
    border-radius: 5px 0 5px 0;
    
}

.main-nav li a:hover {
    
    border-bottom: 1px solid #fff;
    border-right: 1px solid rgb(111, 168, 210);
    background: rgba(193, 198, 215, 0.1);
    color: #d0ddec;
}

/* Animated box */

.background-box {
    position: absolute;
    width: 300px;
    height: 300px;
    background:  rgba(255, 255, 255, 0.1);
    z-index: -1;
}

/* Project Section */

.body {
    min-height: 100vh;
    padding-top: 10rem;
    padding-bottom: 20rem;
}

#project {
    background: linear-gradient(#3c5390,#2c416a);
    z-index: 0;
    padding-top: 30rem;
}
#to-project {
    padding-top: 10rem;
}
.project1 {
    padding: 0px 30px 0px 30px;
    border-radius: 10px;
}

.project2 {
    padding: 0px 30px 0px 30px;
    border-radius: 10px;
}

.project-container {
    margin: 5rem;
    display: flex;
}

.c2 {
    justify-content: end;
}

.text {
    margin: 0 7rem;
    text-align: center;
    cursor: default;
}

.box {
    
    background-color: #d0ddec;
    height: 20em;
    width: 30em;
}

.link {
    display: block;
    font-size: larger;
    width: fit-content;
    text-decoration: none;
    background-color: rgba(217, 220, 231, 0.4);
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    padding: 20px 30px;
    text-align: center;
    margin: auto;
}

.link:hover {
    background-color: rgba(217, 220, 231, 0.7);
    transition-duration: 1s;
}

/* About Section */

#about {
    background: linear-gradient(#2c416a,#322fe6);
    justify-items: center;
    z-index: 0;
}

#contact {
    background: linear-gradient(#322fe6,#272c60);
    z-index: 0;
    padding-bottom: 1rem;
}

.about-outline:after {
    content: '';
    display: block;
    border-bottom: 2px solid #fff;
    width: 50%;
    margin-left: auto;
}

.about-title {
    padding: 3rem 1rem 1rem 3rem;
    border-bottom: 1px solid #fff;
}

/* Contact Section */

.contact-container {
    margin: auto;
    display: flex;
    flex-direction: column;
}

#resume-link {
    text-align: center;
    font-style: italic; 
    margin-bottom: 5rem;
}

#resume-link a {
    margin-left: 15px;
    text-decoration: none;
    color: #fff;
}

#resume-link a:hover {
    text-decoration: none;
    color: #afefff;
}

#contact-button {
    color: #fff;
    font-size: large;
    padding: 2rem;
    border-radius: 5px;
    background-color: rgba(193, 198, 215, 0.1);
    cursor: pointer;
    text-align: center;
}

#contact-button:hover {
    background-color: rgba(60, 94, 207, 0.7);
    border-bottom: 2px solid rgb(46, 109, 163);
    border-right: 2px solid rgb(46, 109, 163);
    border-top: 2px solid aliceblue;
    border-left: 2px solid aliceblue;
}

#contact-list {
    margin: auto;
    list-style: none;
    display: none;
    padding-left: 0;
    cursor: default;
}

#contact-list li {
    text-align: center;
    color: #fff;
}

#contact-list li a {
    text-decoration: none;
    color: #fff;
}

#contact-list li a:hover {
    color: #afefff;
}

.contact-li:nth-child(1) {
    transition-delay: 100ms;
}

.contact-li:nth-child(2) {
    transition-delay: 250ms;
}

.contact-li:nth-child(3) {
    transition-delay: 400ms;
}

.contact-li:nth-child(4) {
    transition-delay: 550ms;
}

.link-btn {
    font-size: inherit;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.link-btn:hover {
    color: #afefff;
}

.tooltip {
    position: relative;
    display: inline-block;
}
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: fit-content;
    background-color: #555;
    font-size: medium;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 10%;
    bottom: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}
  
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
  
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: .7rem;
}

::-webkit-scrollbar-track {
    background: rgba(193, 198, 215, 0.8);
}

::-webkit-scrollbar-thumb {
    background: #888; 
}
  
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* Hidden Section, deals with animations */

.hidden {
    opacity: 0;
    filter: blur(4px);
    transition: all 1s;
}

.hidden1 {
    transform: rotate(-90deg) translateX(-100%);
}

.hidden2 {
    transform: rotate(-20deg) translateX(-80%);
}

.hidden3 {
    transform: translateX(-100%);
}

.hidden4 {
    filter: blur(1px);
    opacity: .2;
    transition-duration: 3000ms;
}

.htitle1 {
    transition-delay: 200ms;
    transform: translateX(50%);
}

.htitle2 {
    transition-delay: 200ms;
    transform: translateX(-100%);
}

.hdesc {
    transition-delay: 300ms;
    transform: translateY(100%);
}

.hidden-box {
    transition-duration: 20000ms;
}

.hbox1 {
    transform: rotate(50deg) translateX(-100%) translateY(-300%);
}

.hbox2 {
    transform: rotate(-100deg) translateX(200%) translateY(-300%);
}

.hbox3 {
    left:50%;
    transform: rotate(-200deg) translateX(-110%) translateY(250%);
}

.hbox4 {
    left:50%;
    transform: rotate(-250deg) translateX(-110%) translateY(250%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translate(0);
    transform: rotate(0);
}

.show-box {
    transform: translate(0) rotate(0);
    transform: scale(.01);
}

/* Screen size compatibility section */

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
    .background-box {
        display: none;
    }
}

/* Screen size minimum 200px */
@media(min-width: 200px) {
    .title, .title1 {
        transform: none;
    }
    .background-box {
        display: none;
    }
    .main-nav li a {
        font-size: 1rem;
    }
    .title-container {
        font-size: 1rem;
        flex-direction: column;
        padding-top: 3rem;
        text-align: center;

    }
    .project-container {
        flex-direction: column;
        width: inherit;
        margin-left: 0;
        padding-left: 0;
    }
    .box {
        margin: auto;
        background-color: none;
        width: 10rem;
        height: 7rem;
    }
    .text {
        
        margin-left: 0;
        padding-left: 0;
    } 
    #video1, #video2 {
        max-width: 10rem;
        max-height: 8rem;
    }
    .hdesc {
        width: inherit;
    }
    .text {
        width: inherit;
    }
    .about-outline {
        max-width: 90%;
        margin: auto;
    }
    .about-container {
        margin: 0 2rem 2rem 0;
        min-height: 30rem;
        background-color: rgba(217, 220, 231, 0.7);
        border-radius: 7px;
        width: 100%;
        cursor: default;
    }
    .about-desc {
        padding-left: .7rem;
        padding-right: .7rem;
    }
    .contact-container {
        max-width: 90%;
    }
    #contact-button {
        margin-left: 0;
        padding-left: 0;
    }
    #contact-list li {
        font-size: 1rem;
    }
    #contact-list li a{
        font-size: 1rem;
        padding-left: 0;
        margin-left: 0;
    }
}
/* Screen size minimum 600px */
@media(min-width: 600px) {
    .main-nav li a {
        font-size: 1.5rem;
    }
    .box {
        width: 20rem;
        height: 15rem;
    }
    #video1, #video2 {
        max-width: 20rem;
        max-height: 17rem;
    }
    .contact-container {
        max-width: 80%;
    }
    #contact-list li {
        font-size: 1.5rem;
    }
    #contact-list li a{
        font-size: 1.5rem;
    }
}
/* Screen size minimum 900px */
@media(min-width: 900px) {
    .title-container {
        font-size: 2rem;
        flex-direction: row;
        padding-top: 8rem;
    }
    .title1 {
        margin-top: 4rem;
    }
    .background-box {
        display: inline;
    }
    .main-nav li a {
        font-size: 2rem;
    }
    .project-container {
        flex-direction: row;
        max-width: 85%;
        margin: 5rem;
    }
    .box {
        background-color: #d0ddec;
        height: 20em;
        width: 30em;
    }
    #video1, #video2 {
        max-width: 50rem;
        max-height: 30rem;
    }
    .text {
        margin: 0 3rem;
    }
    .hdesc {
        width: 95%;
    }
    .about-outline {
        max-width: 50%;
    }
    .about-container {
        width: 100%;
    }
    .about-desc {
        padding-left: 3rem;
        padding-right: 2rem;
    }
    .contact-container {
        width: fit-content;
    }
    #contact-button {
        margin-left: 20px;
        padding: 2rem;
    }
    #contact-list {
        margin: auto;
    }
    #contact-list li {
        font-size: 2rem;
    }
    #contact-list li a{
        font-size: 2rem;
    }
}

@media(min-width: 1300px) {
    .main-nav li a {
        font-size: 3rem;
    }
    #to-project {
        padding-top: 25rem;
    }
    .text {
        max-width: 75%;
    }
}

@media (max-width: 768px) {
  html {
    overflow: scroll;
  }
  .zoom-in {
    transition: transform 0.3s ease-in-out;
  }

  .zoom-in:active {
    transform: scale(.7); /* Zooms in on tap for mobile */
  }
}