@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';

* {
    margin: 0;
    padding: 0;
    /* font-family: "Source Sans Pro", "Nunito", sans-serif; */
    /* --bg-color: white;
    --typewriterSpeed: 2s;
    --typewriterCharacters: 24; */
}

main {
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    overflow-y: auto;
}

/* Main Container */
.mainContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* About Me Container */
.aboutMeContainer {
    display: flex;
    justify-content: center;
    gap: 5rem;
}

.aboutMe {
    width: 55%;
}

/* .aboutMe>div{
    max-width: 55%;
} */
.aboutMe>div>h1 {
    font-size: 42pt;
    margin-top: 1.5rem;
}

.aboutMe>div>p {
    margin-top: 1.5rem;
    font-size: 18pt;
    color: rgb(116, 116, 116);
}

.aboutMe>div>h1>span {
    color: #06b6d4;
}

/* Image Container */
.imageContiner {
    width: 14rem;
    height: 14rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.imageContiner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buyMeACoffee {
    margin-top: 0.6rem;
    padding: 0 1rem;
}

.buyMeACoffee>a {
    display: block;
    width: 12rem;
    height: 4rem;
}

.buyMeACoffee>a>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mainContainer>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.extraAboutInfo {
    width: calc(55% + 14rem + 5rem);
    margin-top: 1.5rem;
    font-size: 18pt;
    color: rgb(116, 116, 116);
}

/* Link Container */
.linkLogoContainer {
    margin-top: 2rem;
    background-color: #79ebff28;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.linkLogoContainer>i {
    font-size: 20pt;
}

.linkLogoContainer>svg {
    height: 24px;
    width: 24px;
    font-size: 20pt;
}

.linkLogoContainer>i:hover {
    cursor: pointer;
}

.linkLogoContainer>svg {
    cursor: pointer;
}

/* For Mobile View */
.mobileView {
    display: none !important;
}

.aboutMePhoneContainer {
    margin-top: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.aboutMePhoneContainer>p {
    padding: 0 0.5rem;
    color: rgb(116, 116, 116);
}

.aboutMePhoneContainer>h1 {
    margin-top: 1.5rem;
}

.aboutMePhoneContainer>h1>span {
    color: #06b6d4;
}

/* Media Querie for small laptop */
@media only screen   and (min-width: 1024px) and (max-width: 1024px) and (min-height: 874px) and (max-height: 874px){
    .pcView {
        margin-top: 0rem;
        padding-bottom: 5rem;
    }

    .aboutMeContainer {
        margin-top: 20rem;
    }

    .aboutMe>div>h1 {
        font-size: 32pt;
    }

    .aboutMe>div>p,
    .extraAboutInfo {
        font-size: 16pt;
    }
}

/* Target iPad Pro portrait and landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 834px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .pcView {
        margin-top: -30rem;
        padding-bottom: 5rem;
    }

    .aboutMe>div>h1 {
        font-size: 32pt;
    }

    .aboutMe>div>p,
    .extraAboutInfo {
        font-size: 16pt;
        color: greenyellow;
    }
}

/* Media Querie for tablet */
@media only screen and (max-width: 768px) {
    .pcView {
        margin-top: 8rem;
        padding-bottom: 5rem;
    }

    .aboutMe>div>h1 {
        font-size: 28pt;
    }

    .aboutMe>div>p,
    .extraAboutInfo {
        font-size: 14pt;
    }
}

/* Media querry  for mobile view */
@media only screen and (max-width: 600px) {
    .pcView {
        display: none !important;
    }

    .mobileView {
        display: block !important;
        padding-bottom: 4rem;
    }

    .introductionAboutMe {
        font-size: 22pt;
    }

    .linkLogoContainer {
        gap: 15px;
    }

    .linkLogoContainer>i {
        font-size: 15pt;
    }

    .linkLogoContainer>svg {
        height: 19px;
        width: 19px;
        font-size: 15pt;
    }
}

/* Media querry  for mini+ mobile mobile view */
@media only screen and (max-width: 400px) {
    .pcView {
        display: none !important;
    }

    .mobileView {
        display: block !important;
        padding-bottom: 4rem;
    }

    .introductionAboutMe {
        font-size: 19pt;
    }

    .linkLogoContainer {
        gap: 15px;
    }

    .linkLogoContainer>i {
        font-size: 15pt;
    }

    .linkLogoContainer>svg {
        height: 19px;
        width: 19px;
        font-size: 15pt;
    }

    .imageContiner {
        margin-top: 3.5rem;
    }
}

/* Media querry  for mini mobile mobile view */
@media only screen and (max-width: 320px) {
    .pcView {
        display: none !important;
    }

    .mobileView {
        display: block !important;
        padding-bottom: 4rem;
    }

    .introductionAboutMe {
        font-size: 16pt;
    }

    .linkLogoContainer {
        gap: 15px;
    }

    .linkLogoContainer>i {
        font-size: 15pt;
    }

    .linkLogoContainer>svg {
        height: 19px;
        width: 19px;
        font-size: 15pt;
    }

    .imageContiner {
        margin-top: 20rem;
    }
}