header {
    width: 80%;
    margin: 5% auto auto auto;
    box-shadow: 15px 15px 15px rgb(107 107 107);
    background: rgb(2, 0, 36);
    background: linear-gradient(50deg, rgba(2, 0, 36, 1) 0%, rgba(171, 200, 196, 1) 100%, rgba(0, 212, 255, 1) 100%);
    padding: 5%;
    border-radius: 3rem;
}

header img {
    border-radius: 50%;
}

.card {
    width: 50%;
    margin: auto;
    text-align: center;
}

.title {
    color: #54819d;
    font-size: 18px;
}

button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

a {
    text-decoration: none;
    font-size: 250%;
    margin: 1em;
    color: rgba(2, 0, 36, 1);
}

button:hover,
a:hover {
    opacity: 0.7;
}

* {
    box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column {
    float: left;
    width: 50%;
    padding: 0.625em;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
    #sp {
        margin: 3% 20%;
    }
}

* {
    box-sizing: border-box;
}


/* Set a background color */

.eduwork {
    font-family: Helvetica, sans-serif;
    width: 100%;
    margin: 5% auto auto auto;
}


/* The actual timeline (the vertical ruler) */

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 1% auto;
}


/* The actual timeline (the vertical ruler) */

.timeline::after {
    content: '';
    position: absolute;
    width: 0.375em;
    background-color: #54819d;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -0.1875em;
}


/* Container around content */

.container {
    padding: 0.625em 2.5em;
    position: relative;
    background-color: inherit;
    width: 50%;
}


/* The circles on the timeline */

.container::after {
    content: '';
    position: absolute;
    width: 1.5625em;
    height: 1.5625em;
    right: -1em;
    background-color: #54819d;
    border: 4px solid #FF9F55;
    top: 1em;
    border-radius: 50%;
    z-index: 1;
}


/* Place the container to the left */

.left {
    left: 0;
}


/* Place the container to the right */

.right {
    left: 50%;
}


/* Add arrows to the left container (pointing right) */

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 1.375em;
    width: 0;
    z-index: 1;
    right: 1.875em;
    border: medium solid #54819d;
    border-width: 0.625em 0 0.625em 0.625em;
    border-color: transparent transparent transparent #54819d;
}


/* Add arrows to the right container (pointing left) */

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 1.375em;
    width: 0;
    z-index: 1;
    left: 1.875em;
    border: medium solid white;
    border-width: 0.625em 0.625em 0.625em 0;
    border-color: transparent #54819d transparent transparent;
}


/* Fix the circle for containers on the right side */

.right::after {
    left: -1em;
}


/* The actual content */

.content {
    padding: 1.25em 1.875em;
    background-color: #54819d;
    position: relative;
    border-radius: 0.375em;
}


/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }
    /* Full-width containers */
    .container {
        width: 100%;
        padding-left: 4.375em;
        padding-right: 1.5625em;
    }
    /* Make sure that all arrows are pointing leftwards */
    .container::before {
        left: 3.75em;
        border: medium solid white;
        border-width: 0.625em 0.625em 0.625em 0;
        border-color: transparent #54819d transparent transparent;
    }
    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 1em;
    }
    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }
}

.pv-entity__position-group-pager {
    background-color: var(--white, #fff);
}

li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

*,
 :after,
 :before {
    box-sizing: inherit;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.pv-profile-wrapper .accomplishments-list,
.pv-profile-wrapper .activity-list,
.pv-profile-wrapper .section-info {
    list-style: none inside;
}


}
.artdeco-container-card {
    display: block;
    background-color: var(--white, #fff);
    border-radius: 2px;
    margin: 8px;
    padding: 12px;
    position: relative;
    list-style: none;
}
.pv-profile-wrapper .profile-detail {
    margin: 0;
    font-size: 12px;
    clear: both;
    z-index: 0;
}
.large-header,
body,
h1,
p {
    font-weight: 400;
    color: rgba(0, 0, 0, .9);
}
body,
p {
    font-size: 1.6rem;
    line-height: 1.5;
}
body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
}
body {
    line-height: 1;
}
html.artdeco {
    -webkit-font-smoothing: antialiased;
}
:root {
    --artdeco-typography-mono: SF Mono, Consolas, Roboto Mono, Noto Mono, Droid Mono, Fira Mono, Ubuntu Mono, Oxygen Mono, Lucida Console, Menlo, Monaco, monospace;
    --artdeco-typography-sans: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
    --artdeco-typography-serif: Noto Serif, Droid Serif, Georgia, serif;
    --artdeco-typography-ar: Arabic UI Display, Geeza Pro, Simplified Arabic, var(--artdeco-typography-sans);
    --artdeco-typography-ja: Meiryo, Yu Gothic, Hiragino Kaku Gothic Pro, Hiragino Sans, var(--artdeco-typography-sans);
    --artdeco-typography-ko: Malgun Gothic, Apple SD Gothic Neo, var(--artdeco-typography-sans);
    --artdeco-typography-th: Leelawadee, Thonburi, var(--artdeco-typography-sans);
    --artdeco-typography-zh: Microsoft Yahei, PingFang SC, PingFang TC, Hiragino Sans, Hiragino Kaku Gothic Pro, var(--artdeco-typography-sans);
}
html {
    font-size: 62.5%;
}
*,
 :after,
 :before {
    box-sizing: inherit;
}
.pv-entity__position-group-pager::after {
    margin-left: 104px;
}
.pv-entity__position-group-pager::after {
    content: "";
    display: block;
    border-bottom: 1px solid var(--warm-gray-30, #e6e9ec);
    margin-top: 1em;
}
*,
 :after,
 :before {
    box-sizing: inherit;
}
body {
    /* The image used */
    
    background-image: url("../images/cv3.jpg");
    /* Full height */
    
    height: 100%;
    /* Create the parallax scrolling effect */
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax li {
    /* The image used */
    
    background-image: url("../images/cv3.jpg");
    /* Full height */
    
    height: 100%;
    /* Create the parallax scrolling effect */
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#sp {
    margin: 0 0 5% 60%;
}
.skills {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    background-color: #f0f7fb;
    background-image: url(../images/skills.png);
    background-position: 9px 0px;
    background-repeat: no-repeat;
    border: solid 1px #3498db;
    border-radius: 6px;
    line-height: 18px;
    overflow: hidden;
    padding: 15px 60px;
    width: 70%;
    margin: 1% 6%;
    box-shadow: 0 5% 10% 5% rgba(0, 0, 0, 1);
    font-size: 1.25em;
    color: black;
    text-align: left;
}
.interests {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    background-color: #bcd7e7;
    background-image: url(../images/interests.png);
    background-position: 9px 0px;
    background-repeat: no-repeat;
    border: solid 1px #3498db;
    border-radius: 6px;
    line-height: 18px;
    overflow: hidden;
    padding: 15px 60px;
    width: 70%;
    margin: 1% 6%;
    box-shadow: 0 5% 10% 5% rgba(0, 0, 0, 1);
    font-size: 1.25em;
    color: black;
    text-align: left;
}
.modal {
    display: none;
    /* Hidden by default */
    
    position: fixed;
    /* Stay in place */
    
    z-index: 1;
    /* Sit on top */
    
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    
    height: 100%;
    /* Full height */
    
    overflow: auto;
    /* Enable scroll if needed */
    
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#myBtn {
    background-color: transparent;
    color: black;
    font-weight: bold;
    width: 45%;
}

#myBtn1 {
    background-color: transparent;
    color: black;
    font-weight: bold;
    width: 45%;
}