/* Fonts */

@font-face {
    font-family: Offbit;
    src: url('./fonts/OffBitTrial-DotBold.otf');
}

@font-face {
    font-family: Porcine;
    src: url('./fonts/Porcine-Heavy.ttf');
}

@font-face {
    font-family: Remboy;
    src: url('./fonts/RemboyRegular.ttf');
}

@font-face {
    font-family: Chillax;
    src: url('./fonts/Chillax-Light.otf');
}

/* No Select */

.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

input,
textarea,
button,
select,
a,
svg,
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::selection {
    background-color: transparent;
}

/* Loading Page */

.loadingPage {
    display: flex;
    position: fixed;
    background-color: #f7f7f7;
    width: 100vw;
    height: 100vh;
    z-index: 90000000000000000000000000000000000000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadingPageCircle {
    width: 15rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7.5rem;
    cursor: pointer;
    background-color: #7676e4;
    box-shadow: 0 0 10px 1px #0000003a;
}

/* Defaults */

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

html {
    font-size: 10px;
    color: #000000;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: transparent;
    box-sizing: border-box;
    z-index: 100;
    font-size: 10px;
    box-sizing: border-box;
    width: 100vw;
    overflow-x: hidden;
}

.webgl {
    position: fixed;
    outline: none;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    z-index: -9999999999999;
    pointer-events: none;
}

main {
    position: fixed;
    overflow-x: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100vw;
}

a {
    text-decoration: none;
    color: #000000;
    cursor: pointer;
}

/* Responsive */

/* Max-Width 1080px */

@media screen and (max-width: 1180px) {
    /* Responsive Common */

    /* .frontCover, .backCover {
        display: flex !important;
    }

    .backCanvas, .frontCanvas {
        display: none !important;
    } */

    @media (orientation: portrait) {
        /* Portrait */
        .slider {
            width: 90vw !important;
        }
    }
      
    @media (orientation: landscape) {
        /* Landscape */

        .flipSlider {
            justify-content: flex-end !important;
            align-items: flex-start !important;
            /* padding-bottom: 8rem; */
        }

        .slider {
            transform: rotateZ(-90deg) translateX(-50vh) translateY(35vh);
            width: 90vh !important;
        }
        
    }
}

.bodyHalfContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Business Card */

.perspectiveChangeDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    perspective: 110rem;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.businessCardFront {
    position: absolute;
    /* background-color: #3a3a3a; */
    background-color: #7676e410;
    width: 110rem;
    height: calc(2/3.5 * 110rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    /* opacity: 0; */
    overflow: hidden;
    /* box-shadow: 0 0 10px 1px #0000005a; */
    z-index: 1;
}

.businessCardBack {
    position: absolute;
    /* background-color: #3a3a3a; */
    background-color: #7676e410;
    width: 110rem;
    height: calc(2/3.5 * 110rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    /* opacity: 0; */
    /* overflow: hidden; */
    /* box-shadow: 0 0 10px 1px #0000005a; */
}

/* Top Div */

.topDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #7676e41a;
}

/* Header */

.headerDiv {
    width: 20rem;
    height: 20rem;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2.5rem;
    /* background-color: #ffffff; */
    background-color: #7676e430;
    /* background: linear-gradient(to right, #45e2b6d0, 60%, #ac2dd6d0); */
    border-radius: 10rem;
    box-shadow: inset 0 0 10px 1px #0000003a;
    overflow: hidden;
}

.headerSliderBody {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.mainPhoto {
    position: absolute;
    width: 15rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7.5rem;
    opacity: 0;
}

.mainPhotoSlider {
    width: 15rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7.5rem;
    cursor: pointer;
    margin-right: 2.5rem;
    background-color: #7676e4;
    box-shadow: 0 0 10px 1px #0000003a;
}

.headerTextDiv {
    position: absolute;
    width: 35rem;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    margin-left: 17.2rem;
    color: #7676e4;
}

.nameRight {
    width: 100%;
    height: 100%;
    font-size: 10rem;
    font-family: Porcine;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    transform: translateY(-0.9rem);
}

.fnRight {
    position: relative;
    transform: scaleY(1.2);
    line-height: 7.6rem;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    /* overflow: hidden; */
}

.lnRight {
    position: relative;
    transform: scaleX(1.19) scaleY(1.2);
    line-height: 7.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    /* overflow: hidden; */
}

.titleTopRightContainer {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.titleTopRightParallax {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.titleTopRight {
    width: 50rem;
    position: absolute;
    font-size: 5rem !important;
    color: #45e2b6;
    z-index: 2;
    font-family: Offbit;
    font-weight: bold;
    transform: translateY(3.8rem) translateX(11.8rem);
}

.titleDupeTopRight {
    color: #000000 !important;
    z-index: 1 !important;
    transform: translateY(4rem) translateX(12rem) !important;
}

.titleBotRightContainer {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.titleBotRightParallax {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.titleBotRight {
    width: 50rem;
    position: absolute;
    font-size: 5rem !important;
    color: #45e2b6;
    z-index: 2;
    font-family: Offbit;
    font-weight: bold;
    transform: translateY(3.8rem) translateX(0.2rem);
}

.titleDupeBotRight {
    color: #000000 !important;
    z-index: 1 !important;
    transform: translateY(4rem) translateX(0rem) !important;
}

.headerTextReverseDiv {
    position: absolute;
    width: 37.5rem;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    text-align: right;
    margin-left: -38.5rem;
    color: #7676e4;
}

.nameLeft {
    width: 100%;
    height: 100%;
    font-size: 10rem;
    font-family: Porcine;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    transform: translateY(-0.9rem);
}

.fnLeft {
    position: relative;
    transform: scaleY(1.2);
    line-height: 7.6rem;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* overflow: hidden; */
}

.lnLeft {
    position: relative;
    transform: scaleX(1.19) scaleY(1.2);
    line-height: 7.6rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* overflow: hidden; */
}

.titleTopLeftContainer {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.titleTopLeftParallax {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.titleTopLeft {
    width: 50rem;
    position: absolute;
    font-size: 5rem !important;
    color: #45e2b6;
    z-index: 2;
    font-family: Offbit;
    font-weight: bold;
    transform: translateY(3.8rem) translateX(-12rem);
}

.titleDupeTopLeft {
    color: #000000 !important;
    z-index: 1 !important;
    transform: translateY(4rem) translateX(-12.2rem) !important;
}

.titleBotLeftContainer {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.titleBotLeftParallax {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.titleBotLeft {
    width: 50rem;
    position: absolute;
    font-size: 5rem !important;
    color: #45e2b6;
    z-index: 2;
    font-family: Offbit;
    font-weight: bold;
    transform: translateY(3.8rem) translateX(0rem);
}

.titleDupeBotLeft {
    color: #000000 !important;
    z-index: 1 !important;
    transform: translateY(4rem) translateX(0.2rem) !important;
}

/* Summary */

.quotationDiv {
    font-family: 'Lobster', cursive;
    position: absolute;
    text-align: center;
    font-size: 16rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quotationGap {
    width: 22.5rem;
}

.leftQuote {
    /* background: linear-gradient(to right, #45e2b6d0, 50%, #3b37d0d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #7676e4;
    padding-inline: 1rem;
    transform: translateY(5rem);
}

.rightQuote {
    /* background: linear-gradient(to right,#3b37d0d0, 50%, #ac2dd6d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #7676e4;
    padding-inline: 1rem;
    transform: translateY(5rem) translateX(-1.9rem);
}

.topSummaryTextDiv {
    position: absolute;
    text-align: center;
    font-size: 3.25rem;
    transform: translateY(-22.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-style: italic;
    font-family: Remboy;
}

.bottomSummaryTextDiv {
    position: absolute;
    text-align: center;
    font-size: 3.25rem;
    transform: translateY(-17.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-style: italic;
    font-family: Remboy;
}

.adjective {
    width: 16.5rem;
    height: 5rem;
    color: #7676e4;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.adjectiveContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 4rem;
    overflow: hidden;
}

.adjectiveText {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 4rem;
}

/* Skills Div */

.skillsDiv {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    transform: translateY(19.28rem);
    font-size: 2.25rem;
}

.skill {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    cursor: pointer;
}

.skillText {
    margin-right: 2rem;
    transform: translateX(30rem);
    font-family: Chillax;
    font-weight: bold;
}

.skillUnderline {
    width: 200%;
    height: 0.7rem;
    z-index: -1;
    background-color: #7676e4;
    margin-block: 0.25rem;
}

.bracketDiv {
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    text-align: center;
    font-size: 7.725rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftBracket {
    /* background: linear-gradient(to right, #45e2b6d0, 50%, #3b37d0d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #7676e4;
    padding-inline: 1rem;
    transform: translateY(-1rem);
}

.rightBracket {
    /* background: linear-gradient(to right,#3b37d0d0, 50%, #ac2dd6d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #7676e4;
    padding-inline: 1rem;
    transform: translateY(-1rem);
}

.bracketGap {
    width: 35rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-0.2rem);
}

.bracketSkillsContainer {
    width: 40rem;
    height: 100%;
    font-size: 4rem !important;
    font-family: Porcine;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.bracketSkills {
    width: 100%;
    height: 100%;
    position: absolute;
    color: #7676e8;
    /* color: #45e2b6 !important; */
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bracketSkillsDupe {
    width: 100%;
    height: 100%;
    position: absolute;
    /* color: #E6E6FA; */
    color: #45e2b8;
    transform: translateX(-0.4rem) translateY(0.4rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bottom Div */

.bottomDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    background-color: #f5f5f5;
}

.contactForm {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    font-family: Chillax;
    transform: translateX(-20rem) translateY(-0.8rem);
}

.inputDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-block: 1rem;
}

.messageDiv {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    font-size: 2rem;
    margin-top: 1.5rem;
}

.inputContainerDiv {
    height: 4rem;
    width: 30rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.inputText {
    background-color: transparent;
    border: none;
    outline-color: #7676e4;
    width: 100%;
    height: 100%;
    font-family: Chillax;
    text-align: left;
    font-size: 2rem;
}

.inputUnderline {
    width: 100%;
    height: 1px;
    background-color: #7676e4;
    position: absolute;
    transform: translateY(-1rem);
    z-index: -1;
}

#emailContainerDiv {
    width: 40rem !important;
}

textarea {
    width: 62.5rem;
    height: 25rem;
    background-color: transparent;
    border: 1px solid #7676e4;
    border-radius: 5px;
    outline-color: #7676e4;
    font-family: Chillax;
    font-size: 2rem;
    resize: none;
    padding: 1rem;
}

textarea::selection, input::selection {
    background-color: #7676e4;
    color: white;
}

.inputEmail {
    background-color: transparent;
    border: none;
    outline-color: #7676e4;
    width: 100%;
    height: 100%;
    font-family: Chillax;
    text-align: left;
    font-size: 2rem;
}

.formHeader {
    font-family: Porcine;
    color: #7676e4;
}

.submitButtonDiv {
    position: absolute;
    width: 16rem;
    height: 6rem;
    border-radius: 3rem;
    border: 1px solid #7676e4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Porcine;
    font-size: 3rem;
    cursor: pointer;
    color: #7676e4;
    padding-bottom: 0.3rem;
    transform: translateX(3rem) translateY(24rem);
    overflow: hidden;
}

.submitBackground {
    background-color: #45e2b6;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 200%;
    transform: translateX(-20rem);
    opacity: 0.6;
}

.mailToLink {
    width: 200%;
    height: 200%;
    position: absolute;
    pointer-events: none;
}

.checkboxDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    margin-top: 1.5rem;
    cursor: pointer;
}

.checkboxInputText {
    margin-left: 2rem;
}

.checkbox {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid #7676e4;
    border-radius: 5px;
    padding: 2px;
}

.tick {
    width: 100%;
    height: 100%;
    background-color: #7676e4;
    border-radius: 3px;
    transform: scale(0);
}

/* Link Div */

.linkDiv {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Offbit;
    position: absolute;
    font-size: 3rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    background-color: #7676e4;
}

.linkDivDupe {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Offbit;
    position: absolute;
    font-size: 3rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    background-color: #45e2b6;
    border: 2px solid #7676e4;
}

#linkDiv1 {
    width: 18.5rem !important;
    transform: translateX(35rem) translateY(-25rem);
}

#linkDiv2 {
    transform: translateX(30rem) translateY(-18.3rem);
}

#linkDiv3 {
    transform: translateX(43rem) translateY(-17rem);
}

#linkDiv4 {
    transform: translateX(40rem) translateY(-10.35rem);
}

.linkText {
    color: #45e2b6;
    position: absolute;
    z-index: 1;
}

.linkTextDupe {
    color: #000000;
    transform: translateX(-0.2rem) translateY(0.2rem);
}

a {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* Canvas */

.frontCanvas {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.backCanvas {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    /* transform: translateY(calc((100vh - (2/3.5 * 110rem))/2 * -1)); */
}

/* Logo */
.logoSVGPath {
    stroke: #45e2b6;
    stroke-width: 1px;
}

/* Flip Slider */
.flipSlider {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 8rem;
}

.slider {
    pointer-events: auto;
    width: calc(100rem);
}

.slider {
    -webkit-appearance: none;
    width: calc(100rem);
    height: 2px;
    background: #7676e4;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #7676e4;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #7676e4;
    cursor: pointer;
}

.sliderText {
    position: absolute;
    font-size: 3rem;
    color: #7676e4;
    font-family: Porcine;
    z-index: -1;
    transform: translateY(6rem);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sliderFlipText {
    margin-inline: 2rem;
}

.sliderDot1 {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #45e2b6;
    margin-inline: 0.5rem;
}

.sliderDot2 {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #45e2b6;
    margin-inline: 0.5rem;
}

.sliderDot3 {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #45e2b6;
    margin-inline: 0.5rem;
}

/* Covers */

.frontCover {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

.strip {
    width: 16rem;
    height: 100%;
    background-color: #45e2b6;
    transform: translateX(-41.5rem);
}

.backCover {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#logoSVGBack {
    position: absolute;
    transform: scale(4.5) translateX(7rem) translateY(3rem) rotateZ(-20deg);
}

.logoSVGPathBack {
    stroke: #7676e4;
    stroke-width: 1px;
}