* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

* {
    scroll-behavior: smooth;
}

/* * {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
} */

@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
    }
}

body {
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

h1 {
    font-size: calc(12px + .5vw);
    color: white;
    font-family: 'Quicksand', sans-serif;
}

h2 {
    font-size: calc(35px + 1.5vw);
    color: white;
    font-family: 'Caveat', cursive;
    line-height: 90%;
    margin-bottom: 10px;
}

h3 {
    font-size: 14px;
    color: white;
    font-family: 'Quicksand', sans-serif;
    white-space: normal;
    line-height: 1.6;
}

h4 {
    font-size: calc(14px + 2vw);
    color: white;
    font-family: 'Hina Mincho', serif;
    white-space: normal;
}

h5 {
    font-size: calc(34px + .5vw);
    color: white;
    font-family: 'Caveat', cursive;
    line-height: 90%;
    margin-bottom: 10px;
}

a, pre {
    font-size: 18px;
    color: white;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    line-height: 1.6;
}

p {
    font-size: min(calc(12px + .5vw), 16px);
    color: white;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    line-height: 1.6; 
}

.container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------- */

.homeBtn {
    transition: all .5s ease-in-out;
}
.homeBtn a {
    font-family:'Syne Mono', monospace;
    animation: fadeinsLow 2s;
}
.homeBtn:hover {
    transform: translateX(8px);
    transition: 0.2s ease;
}

.myselfBtn {
    transition: all .5s ease-in-out;
}
.myselfBtn a {
    font-family:'Syne Mono', monospace;
    animation: fadeinsLow 2.5s;
}
.myselfBtn:hover {
    transform: translateX(8px);
    transition: 0.2s ease;
}

.portfolioBtn {
    transition: all .5s ease-in-out;
}
.portfolioBtn a {
    font-family:'Syne Mono', monospace;
    animation: fadeinsLow 3s;
    background-color: #787878;
}
.portfolioBtn:hover {
    transform: translateX(8px);
    transition: 0.2s ease;
}



.contactBtn {
    transition: all .5s ease-in-out;
}
.contactBtn a {
    font-family:'Syne Mono', monospace;
    animation: fadeinsLow 3.5s;
}
.contactBtn:hover {
    transform: translateX(8px);
    transition: 0.2s ease;
}

.menu-btn-arrow:hover {
    transition: 1s ease;
}

/* Top Section */

#background {
    background-image: url(./img/DSC01592_changi3-min.png);
    background-size: cover;
    background-position: 25% 50%;
    position: fixed;
}

.top{
    position: relative;
}

.scrollTriggerDiv {
    margin-bottom: 1px;
}

.scrollTriggerDivTwo {
    margin-bottom: 1px;
}



@keyframes fade-inout {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes fadeinsLow{
    0% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}

.helloText {
    animation: fade-inout 3s;
    max-width: 100%;
    text-align: center;
    padding: 50px;
}

.menu-btn {
    position: absolute;
    cursor: pointer;
    z-index: 1;
    animation: fade-inout 6s;
    transition-delay: 2s;
    left: 0;
    top: 0;
    padding: 30px;
    transition: all .5s ease-in-out;
}

.menu-btn-arrow {
    position: absolute;
    background-image: url(./img/output-onlinepngtools.png);
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: top center;
    transition: all .5s ease-in-out;
    cursor: pointer;
    opacity: .9;
}

.leftPanel {
    position: relative;
    top: 50px;
  }
  
.leftPanel::before {
    content: '';
    position: absolute;
    opacity: .4; 
    background: rgba(224, 224, 224, 0.897);
}


/* Animation */

.menu-btn.close .menu-btn-arrow {
    transform: rotateY(180deg)
}

.menu-btn.close .leftPanel .homeBtn {
    transform: translateX(-200px);
    transition-delay: .1s;
}

.menu-btn.close .leftPanel .myselfBtn {
    transform: translateX(-200px);
    transition-delay: .15s;
}

.menu-btn.close .leftPanel .portfolioBtn {
    transform: translateX(-200px);
    transition-delay: .2s;
}

.menu-btn.close .leftPanel .contactBtn {
    transform: translateX(-200px);
    transition-delay: .30s;
}

.menu-btn.close .leftPanel {
    transform: translateX(-300px);
    transition-delay: 1s;
}

/* End Animation */

#wrapper {
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 0;
    height: 200vh;
}

.contact {
    position: relative;
}

/* Introducing Section */

.profilePicture {
    position: relative;
    align-items: center;
    display: inline-block;
    height: 100vh;
    max-height: 100%;
    width: 100%;
}

.profilePicture-pic {
    position: relative;
    align-items: center;
    display: flex;
    height: 100vh;
    max-height: 100%;
    width: 100%;
    background-image: url(./img/DSC00903_2.JPG);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 1%;
}

.profilePicture-info {
    background: linear-gradient(to bottom, transparent, 25%, rgb(29, 29, 29));
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 70%;
    align-items: center;
    display: flex;
    border-radius: 1.5%;
    padding: 30px;
}

.profileText {
    margin-top: auto;
    width: 100%;
}

/* --- End Introducing Section */



/* Portfolio Section */

.right-arrow-btn {
    position: relative;
    justify-content: center;
    align-items: center;
    background-image: url(./img/output-onlinepngtools.png);
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: top center;
    transition: all .2s ease-in-out;
    cursor: pointer;
    opacity: .25;
    transform: rotate(180deg);
}

.right-arrow-btn:hover{
    transform: rotate(180deg) translateX(-5px) scale(1.1);
    opacity: 0.85;
}

.left-arrow-btn {
    position: relative;
    justify-content: center;
    align-items: center;
    background-image: url(./img/output-onlinepngtools.png);
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: top center;
    transition: all .2s ease-in-out;
    cursor: pointer;
    opacity: .25;
}

.left-arrow-btn:hover{
    transform: translateX(-5px) scale(1.1);
    opacity: 0.85;
}

.scrolling-wrapper {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    margin: 5px;
    width: 80vw;
    height: 100vh;
    border-radius: 1%;

    white-space: nowrap;
    overflow-y: hidden;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.project {
    position: relative;
    display: inline-block;
    /* background-color: rgb(114, 114, 114); */
    width: 100%;
    height: 100%;
    border-radius: 1%;
    transition: 1s;
    scroll-snap-align: start;
    overflow-y: hidden;
}

.project-top {
    position: relative;
    height: 50%;
}

.project-bottom {
    position: relative;
    height: 50%;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.project-bottom::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.card {
    position: absolute;
    border: 1px solid #f7f7f7;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 1%;
    scroll-snap-align: start;
    bottom: 0px;
}

.youtube {
    position: absolute;
    border-radius: 1%;
}

.thumbnail.notAlone {
    position: absolute;
    background-image: url(./img/blake-hunter-Ju8UiPC5WjE-unsplash.jpg);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 1%;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 1s;
}

.thumbnail.agEditChallenge {
    position: absolute;
    background-image: url(./img/maksym-ivashchenko-SNe46i8NQG0-unsplash.jpg);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 1%;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 1s;
}

.thumbnail.audrey {
    position: absolute;
    background-image: url(./img/audreyPic11-mat.png);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 1%;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 1s;
}

.thumbnail.khang {
    position: absolute;
    background-image: url(./img/khang-mat.png);
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 1%;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 1s;
}

.card:hover  {
    opacity: 1;
}

.card:hover > .thumbnail {
    opacity: 1;
}

.card:hover .project-info {
    opacity: 1;
}

.project-info {
    background: linear-gradient(to bottom, rgba(207,216,222,0) 11%, rgba(9,9,121,0) 44%, rgba(11,12,94,0) 51%, rgba(15,21,22,1) 98%);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1%;
    opacity: 0;
    transition: 1s;
    display: flex;
}

.inner-description {
    display: none;
    position: absolute;
    bottom: 0px;
    height: 20%;
    width: 50%;
    margin: 50px;
}

/* links */
.inner-description a {
    font-size: 14px;
    color: white;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    line-height: 1.6;
    text-decoration: underline;
}

.outer-description {
    padding: 10px;
    position: absolute;
    height: 200px;
}

.video-play-button {
    background-image: url(./img/play-button-whitee.png);
    background-size: cover;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    right: 0;
    opacity: .8;
    margin: 20px;
    transition: .5s;
    cursor: pointer;
}

.video-play-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.video-play-button.notAlone {
    display: none;
}

.header {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* --- End Portfolio Section */



/* Contact Section */


.mailBrush {
    width: 100%;
    position: relative;
    transition: all .5s ease-in-out;
    opacity: 1;
}

.message {
    text-align: center;
    margin-bottom: 50px;
}

.mail {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.mail h2 {
    font-size: calc(22px + .5vw);
    color: aliceblue;
    font-family: 'Bentham', serif;
}


/* --- End Contact Section */



@media only screen and (max-width: 400px) {
    .mail h2 {
        font-size: calc(18px + .5vw);
        color: aliceblue;
        font-family: 'Bentham', serif;
    }
}




@media only screen and (min-width: 620px) {

    .menu-btn {
        padding: 50px;
        position: fixed;
        z-index: 0;
    }

    .profilePicture {
        position: absolute;
        align-items: center;
        display: flex;
        padding-top: 5%;
        padding-bottom: 5%;
        max-width: min(100vh, 70%);
    }
    
    .profilePicture-pic {
        position: relative;
        flex: 1;
        background-image: url(./img/DSC00903_2.JPG);
        background-position: 50% 50%;
        max-width: 50%;
        max-height: 100%;
        margin: 10px;
    }
    
    .profilePicture-info {
        background: none;
        position: relative;
        flex: 1;
        height: 100%;
        width: 20%;
        margin: 10px;
        padding: 0;
        max-width: 40%;
    }
    
    .profileText {
        margin-top: unset;
        width: 100%;
    }

    /* portfolio */

    .outer-description {
        display: none;
        width: 70%;
        left: 0;
    }

    .inner-description {
        display: flex;
        flex-direction:column; 
        flex:1;
        bottom: 0;
        left: 0;
        height: 50%;
        width: 70%;
        margin: 30px;
    }

    .inner-description.notAlone {
        width: 90%;
    }

    .inner-description h4 {
        margin-top: auto;
        left: 0;
    }

    .inner-description h3 {
        left: 0;
    }

    .project-top {
        position: relative;
        height: 100%;
    }
    
    .project-bottom {
        display: none;
    }
    
    .card {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .scrolling-wrapper {
        max-width: 65%;
    }

    .video-play-button {
        height: calc(40px + 1.5vw);
        width: calc(40px + 1.5vw);
    }
}