@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@font-face {
    font-family: 'instagram';
    src: url('../media/fonts/instagram/Demo_Fonts/Fontspring-DEMO-blue_vinyl_regular_ps_ot.otf');
    font-style: normal;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    background-color: whitesmoke;
}

main {
    position: relative;
    top: 1rem;
    display: flex;
    /* height: 97vh; */
    width: 98vw;
    /* border: .25rem solid; */
    flex-direction: column;
    align-items: center;
}

.main {
    display: flex;
    align-items: center;
    /* width: 80%; */
    /* border: 3px solid green; */
    font-family: 'Times New Roman', Times, serif;
    flex-direction: column;
}

ul {
    display: flex;
    gap: 1rem;
    /* border: 3px solid green; */
    margin: 0;
    padding: 0;
}

.personalInfo ul li {
    list-style: none;
    display: flex;
    align-items: center;
    /* border: 3px solid green; */
}

a {
    color: black;
    text-decoration: none;
}

.icon {
    height: 1.5rem;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem 3rem;
}

.navbarName {
    font-size: 3rem;
    /* font-weight: ; */
}

.navbarName .currentTemp {
    font-size: 1rem;
}

.currentLocation,
.email,
.line,
.phoneNumber {
    display: flex;
    align-items: center;
}

.personalInfo {
    display: flex;
    margin-top: 1rem;
}

.line {
    font-size: 1.1rem;
}

a:hover {
    color: cornflowerblue;
}

.aboutMe,
.projects,
.experience,
.education,
.interests {
    display: flex;
    justify-content: flex-start;
    width: 80%;
    flex-direction: column;
    margin-bottom: 3rem;
}

.aboutMe {
    width: 50%;
    /*text-align: center;*/
}

hr {
    position: relative;
    top: -1rem;
    width: 80%;
    border: .15rem solid;
}

.box2 {
    background: whitesmoke;
    border-radius: .5rem;
    margin: 20px;
    box-shadow: inset -5px -5px 9px rgba(255, 255, 255, 0.45), inset 5px 5px 9px rgba(94, 104, 121, 0.3);
}

h2 {
    font-family: sans-serif;
}

.currentLocationInfo {
    font-size: .7rem;
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper {
    width: 100%;
    padding: 0 2rem;
    text-align: center;
}

.polaroid {
    background: #fff;
    padding: 1rem;
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);

}

.polaroid>img {
    max-width: 100%;
    height: auto;
}

.caption {
    font-size: 1.6rem;
    text-align: center;
    line-height: 2em;
    font-family: 'Permanent Marker'
}

.card {
    width: 30%;
    display: inline-block;
    margin-top: 2rem;
    filter: grayscale(100%);
    cursor: pointer;
}

.card .polaroid:before {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.35s;
}

.card:nth-of-type(4n+1) {
    transform: scale(0.8, 0.8) rotate(5deg);
    transition: all 0.35s;
}

.card:nth-of-type(4n+1) .polaroid:before {
    transform: rotate(6deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    right: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.card:nth-of-type(4n+2) {
    transform: scale(0.8, 0.8) rotate(-5deg);
    transition: all 0.35s;
}

.card:nth-of-type(4n+2) .polaroid:before {
    transform: rotate(-6deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    left: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}

.card:nth-of-type(4n+4) {
    transform: scale(0.8, 0.8) rotate(3deg);
    transition: all 0.35s;
}

.card:nth-of-type(4n+4) .polaroid:before {
    transform: rotate(4deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    right: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.card:nth-of-type(4n+3) {
    transform: scale(0.8, 0.8) rotate(-3deg);
    transition: all 0.35s;
}

.card:nth-of-type(4n+3) .polaroid:before {
    transform: rotate(-4deg);
    height: 20%;
    width: 47%;
    bottom: 30px;
    left: 12px;
    box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
}

.card:hover {
    filter: none;
    transform: scale(1, 1) rotate(0deg) !important;
    transition: all 0.35s;
}

.card:hover .polaroid:before {
    content: '';
    position: absolute;
    z-index: -1;
    transform: rotate(0deg);
    height: 90%;
    width: 90%;
    bottom: 0%;
    right: 5%;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    transition: all 0.35s;
}

.job,
.education,
.jobDetails {
    display: flex;
    flex-direction: column;
    list-style: circle;
    /* font-family: sans-serif; */
}

.job,
.school {
    margin-top: 1rem;
    /* font-family: sans-serif; */
}

.jobHeader,
.schoolHeader {
    width: 100%;
}

.chevron img {
    height: 100%;
    width: 1.5rem;
    cursor: pointer;
    transition: transform 1s ease;
}

.rotate {
    transform: rotate(180deg);
}

.chevron {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
    margin-left: 1rem;
}

.jobHeaderBase,
.schoolHeaderBase {
    display: flex;
}

.jobDetails li {
    list-style: circle;
    margin: 0;
}

.jobDetails {
    display: none;
    margin-top: 1rem;
    position: relative;
    left: 1rem;
    gap: .5rem;
}


.jobName,
.jobTitle,
.schoolName,
.schoolDegree {
    display: flex;
    justify-content: space-between;
}

.job,
.school {
    /* border: 2px solid darkgray; */
    border-radius: 1rem;
    padding: 1rem;
    transition: transform 500ms ease;
    cursor: pointer;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.job:hover,
.school:hover {
    transform: scale(1.05);
}

.schoolMajor,
.schoolMinor,
.languages {
    display: flex;
}

h4,
p {
    margin: 0;
}
.flipgive,
.fortra,
.thriveworks,
.cybereason,
.smartbear {
    height: 1rem;
}

.neu {
    height: 2rem;
}

.wcoding,.flipgive {
    height: 1.5rem;
}

.languages img {
    height: 1.2rem;
}

.schoolInfo {
    margin-top: 1rem;
    display: none;
}

.schoolName {
    display: flex;
    align-items: center;
}

.jasongram {
    margin-bottom: 0;
    font-size: 2.5rem;
    font-family: 'instagram';
    text-align: center;
}

.instaPic,
.activeStory {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 3px solid; */
}

.instaPic {
    padding: 1rem;
    margin: 2rem 3rem;
}

.activeStory img {
    height: 13rem;
    width: 13rem;
    border-radius: 50%;
    object-fit: cover;
    border: .3rem solid whitesmoke;
    position:relative;
    top:53%;
    right:-60%;
    transform: scale(3.3);
    /*z-index:-1;*/
}

.activeStory {
    height: 14rem;
    width: 14rem;
    border-radius: 50%;
    background: linear-gradient(to top right, #eaff00, #FD1D1D, rgb(250, 28, 250));
    cursor: pointer;
    overflow:hidden;
}

.instagram {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    /* border: 2px solid; */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.instaName {
    font-size: 2rem;
}


.instaFSTop,
.instaFSMid,
.instaBio,
.posts,
.followers,
.following {
    display: flex;
    align-items: center;
}

.instaFollowSection {
    display: flex;
    flex-direction: column;
}

.instaFSTop {
    gap: 1rem;
    padding: 1rem;
    position: relative;
}

.instaFSTop button {
    height: 2rem;
    font-weight: bold;
    border-radius: 7px;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background-color: rgb(230, 226, 226);
    cursor: pointer;
}

.instaFSTop button:hover {
    background-color: rgb(216, 215, 215);
}

.instagramLogo {
    height: 2.7rem;
}

.downarrow {
    height: 1rem;
}

.instaName {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.firstButton {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    position: relative;
}

.followingButton {
    display: none;
    align-items: center;
    position: static;
}

.instaFSTop .followButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: cornflowerblue;
    color: white;
}

.instaFSTop .followButton:hover {
    background-color: rgb(85, 127, 206);
    color: white;
}


.instaFSTop .unfollowButton {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: firebrick;
    color: white;
    position: absolute;
    bottom: -2.3rem;
}

.instaFSTop .unfollowButton:hover {
    background-color: rgb(144, 26, 26);
}

.dotdotdot {
    font-size: 2rem;
    position: relative;
    top: -.6rem;
    cursor: pointer;
}

/* instagram middle of bio section */

.instaFSMid {
    gap: 3rem;
    padding: 1rem;
}

.number {
    font-weight: bold;
}

.posts,
.followers,
.following {
    gap: .3rem;
}

/* instagram bottom of bio section */

.instaFSBot {
    margin-top: -0.5rem;
    padding: 1rem;
}

.frontendStack span:first-child {
    color: cornflowerblue
}

.backendStack span:first-child {
    color: rgb(229, 166, 177)
}

.followedBy {
    margin-top: .2rem;
    font-size: .7rem;
    color: darkgray;
}

.followedBy span {
    font-weight: bold;
    color: gray
}

/* little instagram bubble section */

.instaStories {
    display: flex;
    width: 60%;
    justify-content: flex-start;
    gap: 4rem;
}

.storyBackground {
    display: flex;
    justify-content: center;
    align-items: center;
}


.bubbles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: bold;
}

.bubbles img {
    height: 6.3rem;
    width: 6.3rem;
    border-radius: 50%;
    object-fit: cover;
    /* border: .2rem solid darkgray; */
    cursor: pointer;
}

.storyBackground {
    height: 6.65rem;
    width: 6.65rem;
    border-radius: 50%;
    border: .13rem solid rgb(198, 197, 197);
}

.instaHR {
    margin-top: 3rem;
    border: .1rem solid rgb(222, 218, 218);

}

/* suggested section */

.suggested {
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    width: 80%;
}

h3 {
    color: rgb(141, 139, 139);
}

.suggestedCards {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;
    height: fit-content;
    overflow: auto;
    box-sizing: border-box;
    position: relative;
    padding: .5rem;
}

.suggestedCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 16rem;
    width: 10rem;
    /* border: 1px solid rgb(213, 213, 213); */
    border-radius: 5px;
    padding: .5rem;
    /* box-sizing: border-box; */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.suggestedCardName {
    font-weight: bold;
}

.suggestedCardImg {
    width: 100%;
    height: 45%;
}

.suggestedCardImg img {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

.suggestedCardDesc {
    font-style: italic;
    font-size: .8rem;
}

.suggestedCardFEStack {
    color: cornflowerblue;
    font-size: .7rem;
    margin-top: 1rem;
    ;
}

.suggestedCardBEStack {
    color: pink;
    font-size: .7rem;
}

.suggestedCardButtons {
    margin-top: 1rem;
    gap: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.suggestedCardButtons button {
    border-radius: 10px;
    border: 0;
    padding: .5rem;
}





/* instagram tabs section */
.instaTabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}

.instaPosts,
.instaTagged {
    position: relative;
    top: -1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    gap: .5rem;
    font-weight: bold;
    letter-spacing: .08rem;
    padding: 1rem;
    cursor: pointer;
}

.topborder {
    border-top: 3px solid gray;
}

/* posts area of insta */
.uploads,
.tags {
    width: 80%;
    display:flex;
    flex-direction:column;
}


.instaUploaded,
.instaTags {
    display: flex;
    gap: .3rem;
    width: 100%;
    margin-bottom: .3rem;
}

.instaUploaded .photo,
.instaTags .photo {
    /* border: 1px solid; */
    flex: 1;
    cursor: pointer;
}

.photo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}

footer {
    padding: 3rem;
}

/* message button on instagram */

.contactForm {
    position: absolute;
    display: none;
    /* height: 100%; */
    width: 70%;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* backdrop-filter: blur(7px); */
}

.contactHeader {
    position: relative;
    /* border: 2px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contactHeader svg {
    border-radius: 10px;
}

.xbox {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.hidden {
    display: flex;
    flex-direction: column;
}

form {
    border-radius: 10px;
    width: 100%;
    z-index: 5;
    background-color: white;
    color: black;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 2px solid;
}

.submitButton {
    display: none;
    background-color: cornflowerblue;
    color: white;
    height: 3rem;
    border: 0;
    border-radius: 10px;
}

input,
textarea {
    border: 2px solid gray;
    height: 2rem;
    border-radius:5px;
}

textarea {
    border-radius: 10px;
}

label,
.contactHeader div {
    color: cornflowerblue
}

/* .instagram> :not(:first-child) {
    display: none;
} */

.instaStories,
.instaTabs,
.uploads,
.tags,
.instaHR {
    display: none;
}

.instagram .private {
    height: 20rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 2px inset;
    margin-top: 2rem;
}