@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    color:#3d3d3d;
}
@font-face {
    font-family: 'Pretedard-Regunlar';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    color:#3d3d3d;
}
.card1 {
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(41deg, rgba(0,219,255,1) 0%, rgba(0,250,167,1) 59%, rgba(78,255,110,1) 74%, rgba(241,255,67,1) 100%);*/
    background: #C9C4B5;
    z-index: 5;
}

body {
    display: grid;
}

#wrapper {
    display: grid;
    grid-template-rows: repeat(11, 1fr);
    grid-template-columns: repeat(11, 1fr);
    align-self: center;
    justify-self: center;
    width: 600px;
    height: 400px;

}

#card {
    grid-row-start: 1;
    grid-row-end: span 10;
    grid-column-start: 1;
    grid-column-end: 11;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    background: #FEF9ED;
    gap: 10px;
    border-radius: 30px;
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.26);
    z-index: 5;
}

#wrapper:nth-child(0) {
    border-bottom: 1px solid black;
}
.card1, .card2 {
    
    z-index: 50;
}
.card1#cover {
    background: #FDE298;
    grid-row-start: 1;
    grid-row-end: span 10;
    grid-column-start: 1;
    grid-column-end: span 2;
    border-radius: 30px 0 0 30px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-image: url('https://cdn.jsdelivr.net/gh/likelion11-kangwon/likeTeam4@main/spicykong/images/kong.png');
}

.card1#head {
    grid-row-start: 5;
    grid-row-end: span 1;
    grid-column-start: 3;
    grid-column-end: 11;

}
.card1#content {
    font-family: "Pretedard-Regunlar";
    font-size: 19px;
    color:#181818;
    font-weight: 500;
    grid-row-start: 6;
    grid-row-end: span 4;
    grid-column-start: 3;
    grid-column-end: 11;

}
.card1#footer {
    grid-row-start: 9;
    grid-row-end: 11;
    grid-column-start: 3;
    grid-column-end: 11;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    justify-content: center;
    justify-items: center;
    gap:10px;

}
.card1#name {
    font-family: "Pretedard-Regunlar";
    font-size: 45px;
    font-weight: 900;
    display: inline-block;
}

.card1#username {
    display: inline-block;
    font-family: "Pretedard-Regunlar";
    font-size: 24px;
    color:#4b4b4b;
    font-weight: 400;
    
}

.icon {
    width: 40px;
    height: 40px;
    background-size: 100%;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: center;
    /*box-shadow: 0 0 5px 1px rgba(156, 156, 156, 0.438);*/
}
.icon:hover{
    cursor: pointer;
    background-color: #e0dbd0
}

#git {
    background-image: url('https://cdn.jsdelivr.net/gh/likelion11-kangwon/likeTeam4@main/spicykong/images/git.png');
    background-size: 80%;
}

#mail {
    background-image: url('https://cdn.jsdelivr.net/gh/likelion11-kangwon/likeTeam4@main/spicykong/images/mail.png');
    background-size: 90%;
}

#boj {
    background-image: url('https://cdn.jsdelivr.net/gh/likelion11-kangwon/likeTeam4@main/spicykong/images/code.png');
    background-size: 90%;
}

.marker {
    background: #FEF9ED;
    cursor: pointer;
    grid-column-start: 11;
    grid-column-end: span 1;
    border-radius: 0 10px 10px 0;
    width: 50%;
}

.marker#m1 {
    grid-row-start: 2;
    grid-row-end: span 2;
}

.marker#m2 {
    grid-row-start: 4;
    grid-row-end: span 2;
    z-index: 1;
    background: #FEF9ED;
}
.marker#m1:hover {
    width: 100%;
    background: #FEF9ED;
}
.marker#m2:hover {
    width: 100%;
    background: #FEF9ED;
}

#tmi {
    font-family: "Pretedard-Regunlar";
    font-weight: 900;
    font-size: 23px;
    grid-row-start: 2;
    grid-row-end: span 2;
    grid-column-start: 2;
    grid-column-end: span 5;
}

.wrapper-tmi {
    font-family: "Pretedard-Regunlar";
}

.wrapper-tmi .qus {
    font-weight: 900;
}

.wrapper-tmi .ans {
    font-weight: 100;
    font-size: smaller;
}

.wrapper-tmi#q1 {
    grid-row-start: 4;
    grid-row-end: span 2;
    grid-column-start: 2;
    grid-column-end: span 4;

}
.wrapper-tmi#q2 {
    grid-row-start: 4;
    grid-row-end: span 2;
    grid-column-start: 6;
    grid-column-end: span 4;
    
}
.wrapper-tmi#q3 {
    grid-row-start: 6;
    grid-row-end: span 2;
    grid-column-start: 2;
    grid-column-end: span 4;
    
}
.wrapper-tmi#q4 {
    grid-row-start: 6;
    grid-row-end: span 2;
    grid-column-start: 6;
    grid-column-end: span 4;
    
}
.wrapper-tmi#q5 {
    grid-row-start: 8;
    grid-row-end: span 2;
    grid-column-start: 2;
    grid-column-end: span 4;
    
}