main.css

:root {
    --tableSize: 70vw;
    --tableMainColor: rgb(208, 208, 58);
    --tableSecondColor: rgb(227, 57, 57);
    --tableBottomColor: rgb(143, 16, 16);
    --tableLegColor: rgba(174, 91, 91, 0.196);

    --fileColor: rgb(231, 183, 121);
    --fileBorder: 2px solid rgb(190, 29, 29);

    --backgroundWallColor: linear-gradient(to right, rgb(120, 152, 124), rgb(140, 170, 180), rgb(130, 160, 150));


    --certificateSize: 6vw;
    --certificateFrameSize: 8vw;
    --certificateFrameColor: rgba(0, 0, 0, 0.677);

    --darkroom: brightness(0%);
    /* --darkroom: none; */
    --darkRoomFilter: rgb(255, 0, 0);
    /* --darkRoomFilter: none; */
}

@font-face {
    font-family: handWriting;
    src: url(textFonts/HelloKetta-d99oX.ttf);
}


/* *{
    transition: filter 400ms;
} */

body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* background: rgb(236, 223, 207); */
    background-color: black;
    /* background-color: rgb(201 211 175); */
}





/* table section and table animation starts form here  */
#tableSection {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: -1vh;

    perspective: 830px;
}

#table,
#tableBottom,
#tableLegs {
    filter: var(--darkroom);
}

#table {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 8vh;
    width: var(--tableSize);
    height: 35vh;
    transform: rotateX(40deg);
    transform-origin: bottom;
    background-image: radial-gradient(circle, var(--tableMainColor), var(--tableSecondColor) 300%);
    border-bottom: 10px solid rgb(94, 88, 88);

    /* box-shadow: 5vw 29vh 0 -4vw rgba(0, 0, 0, 0.202); */
    box-shadow: 1vw 40vh 1vh rgba(0, 0, 0, 0.202);

    overflow: hidden;
}


#tableBottom {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 3vh;
    width: var(--tableSize);
    height: 5vh;
    background-color: var(--tableBottomColor);
}

#tableLegs {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--tableSize) - 5vw);
    height: 3vh;
    background-color: var(--tableLegColor);
    display: flex;
    justify-content: space-between;
}

.tableLeg {
    width: 7vh;
    height: 100%;
    background-color: rgb(197, 175, 13);
    border-radius: 20px;
}



/* floating circle on the table below the file  */
.floatingCircle {
    pointer-events: none;
    width: .2vw;
    height: .2vw;
    border: 15px solid;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10vw;
    right: -10vw;
    margin: auto;

    opacity: 0;
    transition: opacity .5s;
}

#circle1.active {
    animation: circleToCenter 1s linear infinite;
    border-color: rgba(61, 170, 203, 0.552);
}

#circle2.active {
    animation: circleToCenter 1s 333ms linear infinite;
    border-color: rgba(67, 127, 145, 0.552);
}

#circle3.active {
    animation: circleToCenter 1s 666ms linear infinite;
    border-color: rgba(115, 147, 156, 0.552);
}


@keyframes circleToCenter {
    to {
        width: 75vw;
        height: 75vw;
    }
}



/* file starts form here  */

#file {
    position: absolute;
    bottom: 11vh;
    left: 0;
    right: 0;
    margin: auto;
    width: 9vw;
    height: 23vh;
    cursor: pointer;
    z-index: 2;


    /* display: none; */
    transform: rotateX(40deg);
    transform-origin: bottom;
    transform-style: preserve-3d;
    transition: transform 900ms, scale 900ms, box-shadow 900ms, height 900ms, width 900ms;

    filter: var(--darkroom);
}


#file:hover {
    transform: scale(125%) rotateX(20deg) translateY(-1vh);
    box-shadow: 0px 3vh 3.2vh -1vh black;
}


#upperFile,
#lowerFile {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--fileColor);
    left: 0;
    top: 0;
    border: var(--fileBorder);
    border-left: none;
    pointer-events: none;
}

#upperFile {
    transform: rotateY(-2deg);
    transform-style: preserve-3d;
    z-index: 3;

    box-shadow: 0px 2px 10px -2px black;

    overflow: hidden;

    transform-origin: left;
    transition: background-color 20ms 400ms, transform 1500ms;

    text-align: center;
    font-family: cursive;
    color: #2f3946;

}

#joiningPart {
    pointer-events: none;
    transform: rotateY(0deg);
    transform-origin: left;
    height: 100%;
    width: 2vw;
    background-color: #2f3946;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;

    transition: transform 1.5s;
}

#joiningPart>div {
    border-left: 2px dashed white;
    width: 0;
    height: 100%;
    background-color: rgb(150, 196, 157);
    margin: auto;
}


#fileShine {
    position: absolute;
    top: 115%;
    left: -110%;

    width: 250%;
    height: 20px;
    transform: rotate(40deg);
    background-color: rgba(255, 235, 205, 0.884);
}

@keyframes fileShineLight {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    85% {
        background-color: aliceblue;
    }

    100% {
        top: -1%;
        left: 1%;
    }
}


#file:hover #fileShine {
    animation: fileShineLight 900ms 1 ease-out;
}

/* animation for opening the file  */
#file.open {
    height: 97vh;
    width: 40vw;
    bottom: 3.5vh;
    transform: rotateX(7deg) translateX(0vw);
}

#file.open #upperFile {
    background-color: rgb(201, 165, 119);
    transform: rotateY(-150deg) translateX(2vw);
}

#file.open #upperFile h2 {
    display: none;
}

#file.open #joiningPart {
    transform: rotateY(-149deg);
    width: 2vw;
    border-radius: 10px;
}

#nextBtn,
#previousBtn,
#closeBtn {
    width: 9vw;
    height: 6vh;
    overflow: visible;
    position: absolute;
    z-index: -1;
    border-radius: 22px;
    left: 0%;
    border: 1.3px solid black;
    text-align: end;
    font-size: 1.5vw;
    display: flex;
    justify-content: end;
    align-items: center;

    pointer-events: none;

    transition: left 1000ms;
}

#lowerFile p {
    padding-right: 10%;
    pointer-events: none;
}


/* three buttons design here  */
#nextBtn {
    top: 15%;
}

#file.open #nextBtn {
    background-color: #CFE8A9;
    left: 95%;
    transition: left 700ms;
    /* if file is open only then pointer event is auto, or none  */
    pointer-events: auto;
}


#previousBtn {
    background-color: #FFFDE3;
    top: 25%;
}

#file.open #previousBtn {
    left: 95%;
    pointer-events: auto;
    transition: left 700ms 150ms;
}


#closeBtn {
    top: 40%;
    background-color: #e57c7c;
}

#file.open #closeBtn {
    left: 95%;
    pointer-events: auto;
    transition: left 700ms 300ms;
}

#lowerFile>div:hover {
    border: 3.5px dotted;
}


/* file page decoration starts form here  */
#filePages {
    position: absolute;
    top: 1%;
    width: 100%;
    height: 98%;
    transform-style: preserve-3d;
    z-index: 2;
    background-color: rgb(157, 80, 80);

}

#filePages>div {
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    width: 100%;
    /* transform: rotateY(0deg) ; */
    transform-origin: left;
    background-color: #f0e1d4;
    border-left: 1vw solid #8d7a50;
    left: 0;
    overflow: hidden;
    transition: left 500ms, transform 800ms;
}

#file.open #filePages>div {
    left: -.5vw;

}

#file.open #filePages>.seenPage {
    left: 0;

    transform: rotateY(-149deg) translateX(1.5vw);
}

.pageContent {
    transition: opacity 1ms 300ms;
    padding: 0 1vw;

}

.seenPage .pageContent {
    opacity: 0;
}


/* about me page of the file  */
#aboutMe {
    font-family: cursive;
    font-size: 1vw;
    line-height: 4vh;
    display: grid;
}

#tape {
    position: absolute;
    top: 6vh;
    left: 0;
    width: 10vw;
    transform: rotate(-10deg);
}

#aboutMeTop {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

}

#aboutMeTop>img {
    width: 80%;
    transform: translateY(8vh) rotate(5deg);
    border: .2vw solid white;
    max-width: 240px;
}

#aboutMeTop p {
    margin-left: -.5vw;
    padding: .5vw 0 .5vw .5vw;
}

#aboutMeTop span {
    text-decoration: underline;
    font-weight: bolder;

    /* font-size: 1.2vw; */
}

#aboutMeBottom>div {
    display: flex;
    gap: 1vw;
    margin-top: -1vh;
}

#aboutMeBottom q {
    color: rgb(46, 46, 168);
    font-weight: 700;
}

.smImg {
    width: 11vw;
    border-radius: 5%;
    border: 1px solid white;
    height: fit-content;
    margin: auto;
    /* display: inline; */
}


/* education and skills page  */
/* education and skills page  */

#skills {
    font-size: 1.08vw;
}

#skills h3 {
    width: 100%;
    text-align: center;
}

#skillsTop {
    display: grid;
    grid-template-columns: auto auto;

    /* background-color: yellow; */
}

#schools * {
    margin: 0 1vw;
}

#schools>label {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: rgb(41, 112, 41);
}

#indicator {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
}

#indicator li {
    list-style-type: square;
}

#indicator li:first-child {
    color: rgb(46, 46, 168);
}

#indicator li:nth-child(2) {
    font-weight: bold;
    font-style: oblique;
}

#indicator li:nth-child(3) {
    color: rgb(41, 112, 41);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}


#skillsBottom {
    background-color: #43A6C6;
    width: 94%;
    margin: 2vh auto;
    padding: 1vh;
}

#skillsBottom label {
    display: block;
    margin: 1vh;
    text-align: center;
    font-weight: bold;
    font-style: oblique;
}

#skillsBottom li {
    border-left: 2px solid rgb(46, 46, 168);
    padding-left: 1.1vw;
    margin-left: -1vw;
    list-style-type: circle;

}


#mathAndOthers {
    background-color: #67B7D1;
    padding: 1vh 0;
    width: 95%;
    margin: auto;
    border: 1px solid white;
}

#gITsupport {
    display: grid;
    grid-template-columns: auto auto;

    align-items: center;
    background-color: #8AC7DB;
    width: 85%;
    margin: auto;

    padding: 2vh;
    padding-bottom: 0;
    border: 1px solid white;
}

#gITsupport>label {
    grid-column-start: 1;
    grid-column-end: 3;
}

#webdevByPh {
    background-color: #ADD8E6;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    padding-right: 1vw;
    border: 1px solid white;
}

/* projects page decoration here  */

#projectsPage {
    width: 100%;
    height: 100%;
    padding-top: 1px;
    background-image:
        repeating-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .25) 9px, red 10px),
        repeating-linear-gradient(.25turn, rgba(255, 255, 255, .5), rgba(255, 255, 255, .25) 9px, red 10px);

}

#projectsPage h2 {
    text-align: center;
    font-family: cursive;
    font-size: 4vh;
    margin: 1vh;
}


.projectOnPage {
    background-color: rgb(239 211 174 / 68%);

    width: 75%;
    margin-left: 15%;
    margin-top: 1vh;
    border-radius: 10px;

    display: grid;
    grid-template-columns: 1fr 2fr;

    font-size: 1.1vw;

}

.projectOnPage img {
    background-color: rgba(45, 26, 26, 0.571);
    width: 8vw;
    height: 8vw;
    border-radius: 50%;

    margin-left: -5vw;
    padding: 1vh;
}

.projectOnPage:hover img {
    background-color: white;
    transform: scale(1.1);
}

.projectOnPage img:hover {
    background-color: aqua;
    box-shadow: 2px 2px 20px 2px aqua;
}

.projectOnPage>ul {
    margin: auto;
    margin-left: -6vw;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.projectOnPage>ul>li {
    margin-bottom: .5vh;
}

.projectOnPage>ul>li:first-child {
    font-weight: bold;
}

.projectOnPage>ul a {
    text-decoration: none;
    color: blue;
    display: inline-block;

    margin-left: 1vw;
    margin-top: 1vh;
}

.projectOnPage>ul a:hover {
    text-decoration: underline;
}



.projectOnPage:nth-child(2n-1) {
    grid-template-columns: 5fr 1fr;
    background-color: rgba(203, 179, 174, .68);
    margin-left: 10%;
}

.projectOnPage:nth-child(2n-1) img {
    margin-left: 0;
    margin-right: -5vw;
}

.projectOnPage:nth-child(2n-1)>ul {
    margin-left: 0;
    margin-right: -5vw;
    margin-left: 0;
}

/* resume page start form here  */

#resumePage {
    padding: 1vw;
}

#resumePage h2 {
    display: inline;
}

#resumePage>button {
    height: 100%;
    padding: 4px;
    float: right;
}

#resumePage>button:hover+#resume {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgb(53, 133, 133);
}

#resume {
    background-color: red;
    height: 84vh;

    margin: auto;
    margin-top: 2vh;

    transition: 500ms;
    border: 1px solid black;
}

#resume img {
    width: 100%;
    height: 100%;
}

/* memories page starts here  */

#memories {
    text-align: center;
    font-family: cursive;
    font-size: 1vw;

    pointer-events: none;
}

#memories p {
    font-weight: bolder;
    font-size: 3vh;

    color: rgb(46, 46, 168);
}

#memories h2 {
    background-color: rgba(190, 190, 53, 0.819);
    width: 100%;
    margin: 0;

    font-size: 3vh;

    border-bottom-left-radius: 10%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 30%;

    transform: rotate(270deg);
    transform-origin: left;
    position: absolute;
    bottom: -1vw;
    left: 50%;

}

#memoriesImg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    position: absolute;
    bottom: 1vh;
}

#memoriesImg figure {
    background-color: white;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.286);
    padding: 5px;
    border-radius: 2px;

    width: 15vw;
    height: 19vh;
}

#memoriesImg img {
    width: 100%;
    height: 87%;
}

#memoriesImg figcaption {
    position: relative;
    bottom: 1vh;
}

#memoriesImg figure:nth-of-type(2) {
    transform: rotate(3deg);
}

#memoriesImg figure:nth-of-type(4) {
    margin-left: -1vw;
}

#memoriesImg figure:nth-of-type(5) {
    transform: rotate(3deg);
}

#memoriesImg figure:nth-of-type(8) {
    margin-right: 1vw;
    transform: rotate(-3deg);
}


/* last page text here  */
#lastPageMsg {
    position: absolute;
    top: 60%;
    right: 2vw;
    margin: auto;

    font-family: cursive;
    font-size: large;
    font-weight: bolder;

    opacity: 0;
    pointer-events: none;
}

#file.open #lastPageMsg{
    opacity: 1;
}


#signature {
    font-size: 7vh;
    color: rgb(39 39 97);
    font-family: brush script mt, cursive;
    text-decoration: underline;
}
#signDate {
    text-decoration: none;
    position: relative;
    color: rgb(39 39 97);
    left: 20%;
}


#esterEgg{
    /* background-color: red; */
    position:absolute ;
    display: flex;
    justify-content: center;
    align-items: center;
}
#esterEgg Img{
    height: 5vh;
    margin: 2vh;
}

/* mail section starts form here  */
/* mail section starts form here  */
/* mail section starts form here  */

#mail {
    position: absolute;
    bottom: 11vh;
    left: 20vw;

    transform: rotateX(40deg);
    transform-style: preserve-3d;
    transform-origin: bottom;

    width: 0px;
    height: 3vh;
    background-color: rgb(64 59 41);
    box-shadow: 1px 2px 5px;

    border-top: 4vh solid rgb(138, 175, 238);
    border-left: 3vw solid antiquewhite;
    border-right: 3vw solid antiquewhite;

    transition: border .8s, width .8s, height .8s, transform .8s;

    overflow: hidden;

    filter: var(--darkroom);
}

#mail:hover {
    border: 2px solid whitesmoke;

    width: 15vw;
    height: 25vh;

    transform: rotateX(0deg);
    background-color: antiquewhite;

    overflow: visible;
}

#mail>form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}

#mail input,
textarea {
    width: 96%;
    background-color: rgb(233, 212, 162);
}

#mail button {
    width: 100%;
    text-align: center;
}



/* clip board showing project design here  */
/* clip board showing project design here  */
#projectBoard {
    position: absolute;
    transform-origin: bottom;
    bottom: 10vh;
    left: 31vw;

    width: 7vw;
    height: 16vh;
    background-color: rgba(18, 209, 184, 0.538);
    border-radius: 8%;

    transform: rotateX(30deg) rotateY(16deg) rotateZ(-30deg);

    transition: transform 800ms;

    box-shadow: -1px 1px 1px;

    filter: var(--darkroom);
}

#projectBoard:hover {
    transform: scale(3);
    z-index: 1;
}

#clipOfBoard {
    width: 3vw;
    display: block;
    margin: -.5vh auto;
}

#paperOfClipBoard {
    width: 6vw;
    height: 15vh;
    background: repeating-linear-gradient(antiquewhite, antiquewhite 8%, rgb(64, 61, 61) 9%);

    position: absolute;
    top: 2%;
    left: 5%;
    right: 5%;
    margin: auto;
    z-index: -1;

    overflow: hidden;

    text-align: center;
}

#paperOfClipBoard h2 {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 2vh;
    margin: 1vh 0 0 0;
}


#projects {
    display: grid;
    grid-template-columns: auto auto;
    /* background-color: red; */
}

#projects a {
    text-decoration: none;

}

.project {
    margin-bottom: 1.6vh;
    height: 4vh;
}

.project:hover {
    cursor: pointer;
    text-decoration: underline;
}

.project figure {
    margin: 0;
}

.project img {
    width: 2.5vw;
    height: 3vh;
}

.project figcaption {
    font-family: handWriting;
    font-weight: 900;
    /* text-decoration: underline; */
    color: rgb(94 65 147);

    line-height: 1vh;
    margin-top: -.3vh;
    font-size: 1vw;
}




/* name and designamtion holder  */
/* name and designamtion holder  */
/* name and designamtion holder  */
.designation {
    text-align: center;
    position: absolute;
    bottom: 28vh;
    left: 30vw;

    font-size: 1vw;

    transform: rotateX(10deg);

    filter: var(--darkroom);
}

.designation::after {
    content: 'Web developer';
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;

    width: 8vw;
    height: 5vh;
    background-color: rgba(193, 240, 193, .68);

    box-shadow: 0 1px 5px;
}

.designation::before {
    content: '';
    display: block;
    width: 8vw;
    height: 4vh;
    transform: skewX(10deg) translateX(3%);
    background-color: rgb(108, 118, 17);
}


/* for middle designation  */
#middleDesignation {
    left: 46vw;
    bottom: 29vh;

}

#middleDesignation::before {
    background-color: transparent;
}

#middleDesignation::after {
    content: "Technical support";

}


/* for right designation  */
#rightDesignation {
    left: 62vw;

}

#rightDesignation::before {
    transform: skewX(-10deg) translateX(-3%);
}

#rightDesignation::after {
    content: "Software Engineer";
}


/* tools in penholder section here  */
/* tools in penholder section here  */
/* tools in penholder section here  */

#tools {
    position: absolute;
    bottom: 32vh;
    left: 22vw;

    filter: var(--darkroom);
}


.penHolder {
    position: absolute;
    top: 0;
    left: 0;
    width: 3vw;
}

#allToolsSvg {
    width: 3vw;
    transition: opacity .1s .2s linear, top .8s;
}

#tools:hover>#allToolsSvg {
    top: -5vh;
    opacity: 0;

}


#allTools {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

    width: 2vw;
    padding: 1vh;
    border-radius: 5%;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;

    transition: .7s;

}

#tools:hover>#allTools {
    top: -43vh;
    left: -1vw;

    width: 26vw;
    background-color: rgba(192, 201, 180, 0.687);


}

#allTools img {
    width: 90%;
}



/* fb link design here  */
/* fb link design here  */
#fbLink {
    border-radius: 15%;
    padding: 1vh 0;

    position: absolute;
    transform-origin: bottom;
    transform: rotateX(30deg);
    bottom: 12vh;
    right: 34vw;

    transition: background-color 500ms, box-shadow 900ms;

    cursor: pointer;

    filter: var(--darkroom);
}

#fbLink:hover {
    background-color: rgba(115, 182, 182, 0.401);
    box-shadow: -.3vw .7vw;
}

#fbLink>.socialLogo {
    background-image: url(images/tableProducts/fbLogo.svg);
}

#fbLink:hover .socialLogo {
    transform: translateY(-4.5vw) scale(1.7) rotateY(1440deg);
    opacity: 1;
    box-shadow: 0 0 2vw 1vw rgb(228, 228, 249);

    transition: transform 500ms, opacity 500ms, box-shadow 800ms 400ms;
}

#pencil {
    width: 4vw;
    margin-right: .5vw;

    position: relative;
    left: -10%;
}

#eraser,
#sharpner {
    width: 1vw;
    position: absolute;
    top: .5vw;
    left: 2.5vw;

}

#sharpner {
    top: 2vw;
}

#spectacles {
    width: 1.7vw;
    margin-right: .5vw;
}


/* link for git hub in a pad starts here  */
#gitPad {
    position: absolute;
    background-image: url(images/tableProducts/gitPad.png);
    background-size: cover;
    bottom: 11vh;
    transform: rotateX(40deg);
    transform-origin: bottom;
    width: 6vw;
    height: 16vh;
    right: 25vw;
    border: .3vw solid rgb(220, 214, 214);
    border-radius: 8%;
    box-shadow: -2px 4px 4px;

    transition: transform 500ms, box-shadow 500ms;

    filter: var(--darkroom);
}


#gitPad:hover {
    transform: rotateX(20deg) scale(1.1);
    box-shadow: 0px 10px 15px;

    cursor: pointer;

}

#gitPad::before {
    content: "";
    display: block;
    width: .2vw;
    height: .2vw;
    border-radius: 50%;
    background-color: black;

    margin: auto;
    position: relative;
    top: -.3vw;
}

.socialLogo {
    content: "";
    display: block;
    width: 2vw;
    height: 2vw;

    background-image: url(images/tableProducts/github.svg);
    background-size: cover;

    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;

    background-color: rgba(228, 228, 249, 0.6);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;

}

#gitPad:hover .socialLogo {
    transform: translateY(-4vw) scale(2) rotateY(1440deg);
    opacity: 1;
    box-shadow: 0 0 2vw .5vw rgb(228, 228, 249);

    transition: transform 500ms, opacity 500ms, box-shadow 800ms 400ms;
}


/* link for linkedIn in a cup starts here  */
#linkedInCup {
    width: 3.5vw;
    height: 9vh;
    position: absolute;
    bottom: 21vh;
    right: 21.5vw;
    background-image: url(images/tableProducts/linkedIncup.svg);
    background-size: contain;
    background-repeat: no-repeat;

    filter: var(--darkroom);
}



#linkedInCup:hover {
    transform: translateY(-1vh) scale(1.3);
    cursor: pointer;
}


#linkedInCup>.socialLogo {
    background-image: url(images/tableProducts/linkedin.svg);
}

#linkedInCup:hover .socialLogo {
    transform: translateY(-3vw) scale(1.3) rotateY(1440deg);
    opacity: 1;
    box-shadow: 0 0 2vw .5vw rgb(228, 228, 249);

    transition: transform 500ms, opacity 500ms, box-shadow 800ms 400ms;
}


.coffeeSmoke {
    width: .8vw;
    /* border: 2px solid red; */
    position: absolute;
    top: -30%;
    left: 20%;
    transform-origin: top;
    pointer-events: none;
    opacity: .5;
}

.coffeeSmoke:nth-child(1) {
    left: 50%;
    animation: smokeOnOff 4s infinite alternate;
}

.coffeeSmoke:nth-child(2) {
    left: 20%;
    animation: smokeOnOff 4s 1.5s infinite alternate;

}

@keyframes smokeOnOff {
    to {
        opacity: .1;
        width: 1vw;
    }
}


#cupHolder {
    width: 3vw;
    height: 3vh;
    position: absolute;
    bottom: 20vh;
    right: 22vw;
    border-radius: 45%;
    background: linear-gradient(90deg, rgb(226, 214, 214), rgb(179, 173, 173));
    box-shadow: 1px 2px 2px;

    filter: var(--darkroom);
}






/* character and chair section starts here  */
/* character and chair section starts here  */
/* character and chair section starts here  */
#chair {
    width: 29vw;
    height: 45vh;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 8vh;

    filter: var(--darkroom);

}

#character {
    position: absolute;
    width: 15vw;
    bottom: 20vh;
    right: 0;
    /* left: -40%; */
    left: 0;
    /* background-color: #CFE8A9; */
    margin: auto;
    display: flex;
    flex-direction: column-reverse;

    filter: var(--darkroom);

}

#faceParts {
    position: relative;
    left: 7%;
    right: 0;
    margin: auto;
    width: 65%;
    margin-bottom: -23%;
}


.eyes {
    width: 4vw;
    height: 3vh;
    position: absolute;
    /* top: 55%; */
    bottom: 33%;
    left: 0;
    right: 19%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    animation: eyeClose 3s alternate infinite;
}


@keyframes eyeClose {
    54% {
        height: 3vh;
    }

    60% {
        height: .3vh;
    }

    63% {
        height: 3vh;
    }
}

.eye {
    background-color: rgba(244, 234, 234, 0.413);
    width: 40%;
    height: 100%;
    border-radius: 50%;
    position: relative;



}

.eye::before {
    content: " ";
    position: absolute;
    top: 25%;
    left: 15%;
    width: 1.5vh;
    height: 1.5vh;

    background-color: black;
    border-radius: 50%;
}


#hair {
    position: absolute;
    top: 0;
    width: 100%;
    transform-origin: bottom;
}

#hair.acOn {
    animation: hairSwing 2s infinite alternate;
}

@keyframes hairSwing {

    20% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(-7deg);
    }
}

#face {
    width: 100%;
}

#smile {
    position: absolute;
    left: 0;
    right: 20%;
    margin: auto;
    bottom: 12%;
    /* background-image: url("images/character/excited.svg"); */
    background-image: url("images/character/excited.svg");

    background-repeat: no-repeat;
    background-size: cover;
    width: 26%;
    height: 9%;

}


#faceParts:hover #smile {
    background-image: url("images/character/normalSmile.svg");

}

#bodyParts {
    position: relative;
    bottom: 0;
    width: 100%;
    /* background-color: red; */
}

#body {
    width: 100%;
    /* background-color: #FFFDE3; */
}

#wools {
    position: absolute;
    top: 35%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22%;
}

.wool {
    width: 6%;
    display: block;
    transform-origin: top;

}

#wools.acOn .wool {
    animation: woolSwing 6s infinite alternate;
}

@keyframes woolSwing {

    20% {
        transform: rotate(25deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    90% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(10deg);
    }
}


/* airconditionar and mom  section animation here  */
/* airconditionar and mom  section animation here  */

.middleRow {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 90%;
    /* background-color: #e57c7c; */
    overflow: hidden;
    pointer-events: none;

    filter: var(--darkroom);
}

#ac {
    position: absolute;
    right: -2%;
    width: 13vw;
    bottom: 0;
    pointer-events: auto;
}

#ac img {
    width: 100%;
}

#acVent {
    position: absolute;

    left: 10%;
    top: 10%;
    width: 42%;
    height: 17%;
    transform: skewY(5deg);
}

.ventPlate {
    box-sizing: border-box;
    border-top: 2px solid black;
    width: 100%;
    height: 15%;
    margin-bottom: 2%;
    background-color: #e57c7c;
    transform-origin: top;
    animation: ventSwing 5s infinite alternate-reverse;
}

@keyframes ventSwing {
    20% {
        transform: rotateX(80deg);
    }

    30% {
        transform: rotateX(80deg);
    }

    40% {
        transform: rotateX(0deg);
    }

    70% {
        transform: rotateX(0deg);
    }

    80% {
        transform: rotateX(70deg);
    }

    90% {
        transform: rotateX(70deg);
    }

    100% {
        transform: rotateX(0deg);
    }

}

#acLight {
    position: absolute;
    top: 33%;
    left: 19%;
    width: 26%;
    height: 4.5%;
    border-radius: 50%;
    transform: skewY(5deg);
    cursor: pointer;

    background-color: rgb(0, 255, 0);
}



/* mom and sister sitting div starts here  */
/* mom and sister sitting div starts here  */
#momSisDiv {
    position: absolute;
    bottom: 3%;
    right: 64%;
    width: 45vw;
    /* height: 52vh; */
    /* background-color: blueviolet; */

    box-shadow: -12vw 8vh rgba(0, 0, 0, 0.357);
    border-radius: 50%;
}

#momOnSofaImg {
    width: 100%;
    height: 100%;
}

#momHoveringDiv {
    position: absolute;
    width: 12vw;
    height: 100%;
    /* background-color: #92dd213e; */
    bottom: 0;
    left: 12vw;
    pointer-events: auto;

}

#momHoveringDiv:hover~#momOnSofaImg {
    content: url(images/sittingWoman/MainImages-sittingOnSofaImages/hoveredMomOnSofa.svg);

}

#momHoveringDiv:hover .dialogue {
    display: block;
}

.dialogue {
    width: 15vw;
    height: 17vh;
    position: absolute;
    background-image: url(images/dialogueBox/momDialogueBox.svg);
    background-size: cover;
    top: -30%;
    padding: 0 0 0 1.5vw;
    box-sizing: border-box;
    /* background-color: red; */
    display: none;

}

.dialogue p {
    font-size: 1.5vw;
    margin: 2%;

}

.sisD {
    left: 52%;
    background-image: url(images/dialogueBox/sisDialogueBox.svg);
    display: none;
}


#sisImg {
    position: absolute;
    height: 48vh;
    left: 54%;
    pointer-events: auto;
}

#sisImg:hover {
    content: url(images/sittingWoman/MainImages-sittingOnSofaImages/hoveredSis.svg);
   
}

#sisImg:hover~.sisD {
    display: block;
}


/* background section starts form here   */
/* background section starts form here   */
/* background section starts form here   */

#backgroundWall {
    background-image: var(--backgroundWallColor);
    /* filter: brightness(22%); */
    height: 67vh;
    width: 100%;
    overflow: hidden;

    display: grid;
    grid-template-columns: auto auto auto;

    position: relative;

}


/* filter to give the background element dark room effect  */
.sectionFilter {
    width: 100%;
    height: 150%;
    background-color: var(--darkRoomFilter);
    position: absolute;
    top: 0;
    left: 0;

    pointer-events: none;
}

/* certificates part starts here  */
#courseCertificates {
    width: 45vw;
    height: 80%;
    padding-right: 1vw;
    display: grid;
    grid-template-columns: repeat(5, auto);
    align-items: start;
    justify-items: center;
    position: relative;
    /* filter: var(--darkroom); */
    /* pointer-events: none; */
}

.certificate {
    width: var(--certificateFrameSize);
    margin: .3vw .5vw;
    background-color: var(--certificateFrameColor);
    display: inline-block;
    padding: calc(var(--certificateSize)/10);
    box-sizing: border-box;
}

.certificate img {
    width: var(--certificateSize);
    border: calc(var(--certificateSize)/16) double rgb(216, 224, 56);
}


.certificate:nth-child(n+2):nth-child(-n+5) img {
    border-color: #0F9D58 #DB4437 #F4B400 #4285F4;
}

.certificate:nth-child(n+7):nth-child(-n+10) img {
    border-color: #316feb;
}


.pennUniversityCertificate img {
    border-color: white rgb(151, 28, 0);
}

.ielts img {
    width: 5vw;
    border-color: aliceblue;
}

.ielts {
    width: 7vw;
}

.duekUniversityCertificate img {
    border-color: white rgb(59, 59, 237);
}

.deeplearningCertificate img {
    border-color: #FE8B98;
}

.certificateWithPdf:hover {
    transform: scale(2) translateY(2vh);
    cursor: pointer;
    z-index: 1;
}


/* academic section decoration starts form here  */

#academicSection {
    width: 20vw;
    height: 100%;
    perspective: 800px;
}

#academicPanel {
    width: 85%;
    display: block;
    margin: auto;
    margin-bottom: 1.5vh;
    border-bottom: 2px solid black;

    transform: rotateX(-20deg);
    transform-style: preserve-3d;
}

#academicCertificates img {
    width: 5vw;
    border: 7px double rgb(191, 108, 0);
}

#academicCertificates {
    background-image: linear-gradient(45deg, rgba(128, 107, 0, 0.5), rgba(255, 255, 255, .2) 60%);
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    padding: 1vh;
    width: 87%;
    margin: auto;
    position: relative;

    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
}

#academicCertificates .certificateWithPdf:hover {
    transform: scale(1.5);
}

.glassHolder {
    width: .4vw;
    height: .4vw;
    background-color: rgb(237, 236, 236);
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    margin: .4vw;
}

.glassHolder:nth-child(4) {
    right: 0%;
    background-color: white;
}

.glassHolder:nth-child(5) {
    bottom: 0%;
    background-color: rgb(244, 217, 200);
}

.glassHolder:nth-child(6) {
    bottom: 0%;
    right: 0;
    background-color: rgb(244, 217, 200);
}


#bscDegree {
    grid-column-start: 1;
    grid-column-end: 3;
}

#bscDegree::before,
#sscDegree::before,
#hscDegree:before {
    content: "BSC.(ComputerScience)--avg:82%";
    font-size: .7vw;
    text-align: center;
    display: block;
    border-radius: 3px;
    background-color: rgb(50, 48, 46);
    color: rgb(243, 241, 232);
    margin-bottom: .3vh;
    padding: 2px 0;

}

#sscDegree,
#hscDegree {
    position: relative;
    margin-top: .5vh;
   
}

#hscDegree {
    right: 15%;
}

#sscDegree {
    left: 15%;
}

#sscDegree::before {
    content: "SSC-- GPA:5/5";
}

#hscDegree:before {
    content: "HSC-- GPA:4.5/5";
}



/* madels section starts form here  */
#madels {
    width: 32vw;
    height: 100%;
    padding-top: 1vh;
    position: relative;
}

#competitiveCertificate>div:nth-child(1) {
    margin: auto;
    margin-top: 1vh;
    width: 13vw;
    padding: 0;

    /* border:2px solid green; */
    perspective: 800px;

    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
}


#competitiveCertificate .certificateWithPdf img {
    width: 5.7vw;
    border: .1vw solid rgb(162, 114, 30);
    border-radius: 5px;
    /* to remove below white space of an inline-block element  */
    margin-bottom: -4px;

    transform: rotateX(15deg);
    box-shadow: -2px 1px black;
}


#certificateHolder {
    width: 14vw;
    height: 1.5vh;
    background-image: url(images/others/wood.svg);
    margin: auto;
}

#screw {
    width: 14vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

#screw img {
    width: 2vw;
    margin: 0 1vw;
}


/* madels on hanger section starts form here  */

/* #madels > img:hover{
   

 }    */

.madelsOnHanger:hover {
    transform: scale(1.5);
    transform-origin: center;
    z-index: 1;
    border-radius: 10%;

    background-color: rgba(249, 234, 123, 0.1);
    box-shadow: 0px 0px 20px 2px rgba(249, 234, 123, 0.2);
}

.madelsOnHanger {
    width: 10vw;
    position: absolute;

    top: 30%;
    left: 11vw;
}

#caromMadels {
    top: 50%;
}


.SingleMadelsOnHanger {
    width: 8vw;
    position: absolute;
}

.SingleMadelsOnHanger:hover {
    transform: scale(1.5);
    transform-origin: center;
    z-index: 1;
    border-radius: 10%;

    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0px 0px 20px 2px rgba(255, 255, 255, 0.24);
}

#cricketMadels {
    top: 21%;
    left: 2%;
}

#soccerMadels {
    top: 20%;
    right: 4%;
}

#volleyballMadels {
    top: 41%;
    left: 6%;
}

#athleticsMadels {
    top: 41%;
    right: 10%;
}


#backWallJointPart {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6vh;
    background-color: rgba(54, 54, 203, .2);

    border-top: .1vh solid rgb(55, 52, 50);
   
    display: none;

}

#backWallJointPart::after {
    content: " ";
    color: red;
    text-align: center;
    display: block;

    width: 100%;
    height: 90%;
    position: relative;
    top: 10%;

    background-color: rgb(45, 44, 88);
}


/* iframe section with all certificate pdf here  */

#pdfSection {
    position: absolute;
    top: 5%;
    left: 6.5%;

    box-shadow: 0 0 10vw 5vw rgb(128, 123, 123);
    background-color: rgba(128, 123, 123, 0.771);

    z-index: 1;
}

#pdfSection.outOfview {
    transform: scale(.5) translateY(200vh) rotate(-30deg);
    transition: transform 1s;
    box-shadow: none;
}

/* iframe container  */
#certificatePdf {
    width: 80vw;
    height: 85vh;
    overflow: hidden;

    padding: .2vw;

    background-color: rgba(0, 0, 0, 0.8);

    border-top: 2.5vh solid;
    border-right: 4vw solid;
    border-left: 4vw solid;
    border-bottom: 2.5vh solid;

    border-color: rgba(52, 81, 107, 0.942);

    border-radius: 5%;

    /* display: none; */
}

#certificatePdf iframe {
    border-radius: 1%;
}

#pdfCamera {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 1.5vw;
    box-sizing: border-box;

    width: 1.5vw;
    height: 1.5vw;
    background: linear-gradient(29deg, rgb(14, 38, 57), rgb(121, 116, 116));
    border-radius: 50%;
    border: .4vw solid rgb(19 33 44);
}

#pdfCloseButton {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 1vw;

    width: 2.2vw;
    height: 6.5vw;
    background-color: rgb(14, 38, 57);
    border-radius: 1vw;
    border: 2px solid rgb(253, 230, 230);

    cursor: pointer;
}

#pdfCloseButton:hover {
    transform: scale(1.1);
    background-color: rgb(88 27 47);
}