* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
}

main {
    width: 826px;
    margin: 0 auto;
}

main > div {
    position: relative;
} 

.topIntroDiv {
    width: 100%;
    padding-top: 130px;
    padding-bottom: 90px;
}

.topIntroDiv > p {
    font-family: 'GmarketSansMedium';
    font-size: 73px;
    line-height: 70px;
    color: #313131;
    margin-left: 40px;
}

.topIntroDiv > p > span {
    font-family: 'GmarketSansBold';
}

.hashtags {
    font-family: 'GmarketSansMedium';
    font-size: 28px;
    color: #498DE5;
}

.topIntroDiv > img {
    position: absolute;
    right: 40px;
    top: 71px;
}


/* Who AM I */
.whoAmI {
    background-color: #1E2128;
    padding: 30px;
    border-top-left-radius: 50px;
    border-top-Right-radius: 50px;
}

.mainTitle {
    color: white;
    font-size: 55px;
    font-family: 'GmarketSansBold';
    margin-top: -10px;
}

#myIntro {
    text-align: justify;
    margin-top: 20px;
    font-size: 27px;
    color: white;
    font-family: 'GmarketSansLight';
}

#myIntro > span {
    font-family: 'GmarketSansMedium';
}

#myIntro > a:link {
    text-decoration: none;
    color: rgb(109, 185, 255);
}

#myIntro > a:visited {
    text-decoration: none;
    color: rgb(109, 185, 255);
}

#myIntro > a:hover {
    text-decoration: none;
    color: rgb(255, 109, 109);
}

.myGitHub {
    display: inline-block;
    padding: 10px;
    padding-bottom: 3px;
    background-color: white;
    border-radius: 20px;
    font-family: 'GmarketSansMedium';
    color: #1E2128;
    cursor: pointer;
    transition: all 0.4s;
    position: relative;
    width: calc(100% - 20px);
}

.myGitHub.tistory {
    background-color: #EA5220;
    color: white;
}

.myGitHub > i {
    font-size: 30px;
}

.myGitHub > p {
    display: inline-block;
    font-size: 20px;
    transform: translateY(-3px);
}

.myGitHub:hover {
    background-color: rgba(255, 255, 255, 0.055);
    transition: all 0.4s;
}

.myGitHub > p.clickToMove {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);
    color: white;
    opacity: 0;
    font-family: 'GmarketSansBold';
    transition: all 0.4s;
    font-size: 22px;
}

.myGitHub:hover > p.clickToMove {
    opacity: 1;
    transition: all 0.4s;
}

.whoAmI .whoAmIinnerBox {
    margin: 10px;
    display: inline-block;
}

.whoAmI .whoAmIinnerBox > p {
    display: inline-block;
    font-family: 'GmarketSansLight';
    color: white;
    font-size: 21px;
    transform: translateY(-10px);
}

.whoAmI .whoAmIinnerBox > i {
    display: inline-block;
    font-size: 35px;
    color: white;
}

/* My Skills */
.skills {
    padding: 30px;
    padding-bottom: 60px;
    background-color: #3142B4;
}

.skills > .part {
    background-color: white;
    width: calc(95% - 20px);
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}

.skills .innerTitle {
    color: #353941;
    font-family: 'GmarketSansBold';
    font-size: 30px;
}

.skills .imageDiv {
    text-align: center;
    margin-top: 17.5px;
}

.skills .imageDiv > img {
    height: 90px;
    margin-left: 10px;
    margin-right: 10px;
    transition: all 0.5s;
}

.skills .imageDiv > img:hover {
    opacity: 0.3;
    transition: all 0.5s;
}

/* Projects */
.projects {
    padding: 30px;
    padding-bottom: 60px;
    background-color: #1E8228;
}

.projects > .project {
    background-color: white;
    width: calc(95% - 20px);
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    margin-top: 30px;
}

.projects .innerTitle {
    color: #353941;
    font-family: 'GmarketSansBold';
    font-size: 36px;
}

.dateOfWork {
    font-size: 70%;
    opacity: 80%;
}

.teamProj {
    position: absolute;
    top: 26px;
    right: 31px;
    opacity: 60%;
    transition: all 0.4s;
}

.teamProj:hover {
    opacity: 90%;
    transition: all 0.4s;
    cursor: pointer;
}

.soloProj {
    position: absolute;
    top: 32px;
    right: 31px;
    opacity: 60%;
    transition: all 0.4s;
}

.soloProj:hover {
    opacity: 90%;
    transition: all 0.4s;
    cursor: pointer;
}

/* Project Intro */
.projectIntro {
    font-family: 'GmarketSansLight';
    margin-top: 30px;
    font-size: 21px;
    text-align: justify;
}

.projectIntro > span {
    font-family: 'GmarketSansMedium';
}

.projectDes {
    text-align: justify;
    font-family: 'GmarketSansLight';
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
}

.projectDes > span {
    font-family: 'GmarketSansMedium';
}


.specfic {
    background-color: rgb(211, 211, 211);
    border-radius: 25px;
    margin-top: 20px;
}

.specfic > img {
    margin-top: 10px;
    margin-left: 20px;
    display: inline-block;
}

.specfic > p {
    display: inline-block;
    font-size: 23px;
    font-family: 'GmarketSansLight';
    font-weight: 600;
    transform: translateY(-13px);
}


.toGitHub {
    display: inline-block;
    padding: 10px;
    padding-bottom: 3px;
    background-color: #24292F;
    border-radius: 20px;
    font-family: 'GmarketSansMedium';
    color: white;
    cursor: pointer;
    transition: all 0.4s;
    position: relative;
    width: calc(100% - 20px);
}

.toGitHub > i {
    font-size: 30px;
}

.toGitHub > p {
    display: inline-block;
    font-size: 20px;
    transform: translateY(-3px);
}

.toGitHub:hover {
    background-color: #24292f2a;
    transition: all 0.4s;
}

.toGitHub > p.clickToMove {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);
    color: black;
    opacity: 0;
    font-family: 'GmarketSansBold';
    transition: all 0.4s;
    font-size: 22px;
}

.toGitHub:hover > p.clickToMove {
    opacity: 1;
    transition: all 0.4s;
}


.projDemo {
    display: inline-block;
    padding: 10px;
    padding-bottom: 3px;
    background-color: #1E8228;
    border-radius: 20px;
    font-family: 'GmarketSansMedium';
    color: white;
    cursor: pointer;
    transition: all 0.4s;
    position: relative;
    width: calc(100% - 20px);
    height: 39.250px;
}

.projDemo > i {
    font-size: 30px;
}

.projDemo > p {
    display: inline-block;
    font-size: 20px;
    transform: translateY(-3px);
}

.projDemo:hover {
    background-color: #24292f2a;
    transition: all 0.4s;
}

.projDemo > p.clickToMove {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);
    color: black;
    opacity: 0;
    font-family: 'GmarketSansBold';
    transition: all 0.4s;
    font-size: 22px;
}

.projDemo:hover > p.clickToMove {
    opacity: 1;
    transition: all 0.4s;
}



/* Project Stacks */
.projStacks {
    margin-top: 20px;
    font-family: 'GmarketSansMedium';
}

.projStacks hr {
    margin-top: 5px;
}

.projStacks > .stack-half {
    width: calc(48% - 40px);
    background-color: rgb(228, 228, 228);
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
}

.stack-half.full {
    width: calc(100% - 40px);
}

.projStacks > .stack-half  > hr {
    color: black;
}

.projStacks .stackImageDiv {
    margin-top: 13px;
}

.projStacks .imgDiv {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgb(156, 156, 156);
    margin-left: 5px;
}

.projStacks .imgDiv > img {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.projStacks > .stack-half  > .title {
    font-size: 18px;
}

.projStacks .stackImageDiv > a {
    transition: all 0.4s;
    text-decoration: none;
}

.projStacks .stackImageDiv > a:hover img:first-child {
    opacity: 0.2;
    transition: all 0.4s;
}

.projStacks .stackImageDiv > a .stackMoveTo {
    transition: all 0.4s;
    opacity: 0;
}

.projStacks .stackImageDiv > a:hover .stackMoveTo {
    transition: all 0.4s;
    opacity: 0.8;
}

/* Awards */
.awards {
    padding: 30px;
    padding-bottom: 60px;
    background-color: rgb(49, 172, 202);
}

.award {
    background-color: rgb(245, 245, 245);
    border-radius: 25px;
    margin-top: 10px;
    position: relative;
}

.award.moveTo {
    cursor: pointer;
}

.awards > div:first-of-type {
    margin-top: 20px;
}

.award > img {
    margin-top: 10px;
    margin-left: 20px;
    display: inline-block;
    transition: all 0.4s;
}

.award > p {
    display: inline-block;
    font-size: 23px;
    font-family: 'GmarketSansLight';
    font-weight: 600;
    transform: translateY(-13px);
    transition: all 0.4s;
}

.award.moveTo:hover > img, .award.moveTo:hover > p {
    opacity: 0.2;
    transition: all 0.4s;
}

.award > p.clickToMove {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);
    color: black;
    opacity: 0;
    font-family: 'GmarketSansBold';
    transition: all 0.4s;
    font-size: 22px;
}

.award:hover > p.clickToMove {
    opacity: 1;
    transition: all 0.4s;
}

/* ACTIVITIES */
.activities {
    padding: 30px;
    padding-bottom: 60px;
    background-color: #1d4b81;
    position: relative;
    font-family: 'GmarketSansLight';
}

/* .award.logo {
    margin-right: 20px;
} */

/* Educations */

.educations {
    padding: 30px;
    padding-bottom: 60px;
    background-color: #F2F2F2;
    position: relative;
    font-family: 'GmarketSansLight';
}

.educations > .edu:first-of-type {
    margin-top: 15px;
}

.edu {
    background-color: rgb(94, 94, 94);
    border-radius: 25px;
    margin-top: 10px;
    position: relative;
    padding: 10px;
    color: white;
    font-size: 24px;
}

.edu.include {
    margin-left: 50px;
}

.edu > p {
    display: inline-block;
    margin-left: 50px;
    font-weight: 600;
}

.edu > i {
    position: absolute;
    font-size: 50px;
    transform: translateY(-6px);
    color: rgb(48, 48, 48);;
}

.edu-line {
    position: absolute;
    background-color: rgb(48, 48, 48);
    width: 3px;
    height: 490px;
    top: 140px;
    left: 63px;
}

.edu-line-include {
    width: 46px;
    height: 3px;
    background-color: rgb(48, 48, 48);
    position: absolute;
    top: 27px;
    left: -15px;
}

.edu-des {
    padding-left: 30px;
    font-size: 20px;
    color: #d6d6d6;
}

/* GPA */
.gpa {
    padding: 30px;
    padding-bottom: 60px;
    background-color: #32327A;
    position: relative;
    font-family: 'GmarketSansLight';
}

.summaryBox {
    font-family: 'GmarketSansMedium';
    text-align: center;
    width: 100%;
    margin-top: 25px;
    font-size: 0;
}

.summaryBox > .summary {
    font-size: 20px;
    padding: 5px;
    display: inline-block;
    background-color: white;
    width: 40%;
    padding-top: 10px;
    border-radius: 15px;
    font-family: 'GmarketSansBold';
}

.summaryBox > .summary:nth-child(2) {
    margin-left: 5%;
}

.summary > p {
    display: inline-block;
    color: #2c2c2c;
}

p.sumTitle {
    font-size: 30px;
}

p.sumScore {
    margin-left: 10px;
    font-size: 43px;
    color: #32327A;
}

p.sumMax {
    margin-left: -7px;
    font-size: 24px;
    opacity: 0.73;
}

/* GPA TABs */
.selectBox {
    margin-top: 20px;
    /* height: 52.2px; */
    background-color: #32327A;
}

.tabs {
    font-family: 'GmarketSansBold';
    list-style-type: none;
    font-size: 30px;
}

.tabs > li {
    float: left;
    /* padding: 10px; */
    width:  calc((100% / 8) - 1%);
    text-align: center;
    margin: 0px calc(1% / 2);
    /* padding-bottom: 3px; */
    background-color: #B6E9D9;
    color: #434343;
    border-radius   : 15px 15px 0px 0px;
    cursor: pointer;
    height: 50px;
}

.tabs > li.selected, .tabs > li.selected:hover {
    background-color: #0FA555;
    color: white;
}

.tabs > li:hover {
    background-color: #3bd684;
    color: white;
}

.tabs > li.disabled {
    background-color: #C4C4C4;
    color: #43434394;
    cursor: default;
}

.tabs > li > span {
    display: inline-block;
    margin-top: 10px;
}

.board {
    width: calc(99% - 40px);
    background-color: white;
    margin: 0 auto;
    min-height: 455px;
    border-radius: 0px 0px 15px 15px;
    padding: 20px;
    margin-top: 70px;
}

.boardTitle {
    font-size: 28px;
    font-family: 'GmarketSansBold';
    color: #434343;
    margin-left: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

.gpaCount {
    font-size: 28px;
    font-family: 'GmarketSansBold';
    display: inline-block;
    background-color: #32327A;
    color: white;
    padding: 0px 20px;
    padding-top: 5px;
    border-radius: 15px;
}

.board > table {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    font-size: 25px;
}

th {
    font-family: 'GmarketSansMedium';
}

td {
    font-weight: 600;
}

.board > table th, .board > table td {
    padding: 7px 7px 0px 7px;
}

.board > table td:nth-child(2) {
    text-align: left;
}

.board thead {
    background-color: #32327A;
    color: white;
}

.board tbody > tr:nth-child(even) {
    background-color: #c2c2e5;
    color: rgb(41, 41, 41);
}

.last {
    background-color: #1E2128;
    padding: 30px;
}

.last > .mainTitle {
    color: white;
    font-size: 30px;
    font-family: 'GmarketSansLight';
    margin-top: 10px;
    text-align: right;
}

.last > .copy {
    font-family: 'GmarketSansLight';
    font-size: 17px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

/* @media (max-width: 915px) {
    main {
        width: 100%;
    }
} */

/* .graph {
    padding: 20px;
    font-family: 'GmarketSansMedium';
    padding-top: 0px;
}

.graph > p {
    font-size: 30px;
    margin-left: 20px;
}

.graph > .graphInner {
    background-color: rgb(180, 180, 180);
    height: 50px;
    border-radius: 25px;
    padding: 0;
    margin-top: 10px;
}

.graph > .graphInner > .inner {
    height: 100%;
    font-size: 18px;
    font-family: 'GmarketSansLight';
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    display: inline-block;
}

.graph > .graphInner > .inner:first-child {
    border-top-left-radius: 23px ;
    border-bottom-left-radius:23px ;
} */