style.css

/* @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');} */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
/* @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');} */

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    /* background-color: black; */
}

body {
    padding: 2rem;
    font-family: "Noto Sans KR", sans-serif;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    color: #181d25;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#profile_img {
    margin: 0;
    padding: 0;
    border: 0;
    padding-bottom: 0;

    max-width: 100%;
    height: auto;

    /* border-radius: 50%; */
    /* margin-bottom: 2.5rem; */
    /* border: 3px solid #f6f6f6; */
    /* box-shadow: 0px 16px 40px rgba(63, 191, 191, 0.8); */
    box-sizing: content-box;
}

header {
    margin-bottom: 3rem;
    text-align: center;
}

header p {
    font-weight: 300;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: #525252;
}

header h1 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 85%;
}

nav {
    width: 100%;
    display: block;
    max-width: 380px;
}

table {
    min-width: 380px;
    height: auto;
    table-layout: fixed;
    word-break: break-all;
    margin: 10px;
    padding: 10px;
}

#wrapper {
    height: auto;
    min-height: 100%;
    padding-bottom: 30px;
    text-align: center;
}

#profile {
    padding: 0;
    text-align: center;
    align-items: center;
    width: 400px;
}

#profile_img {
    max-width: 100%;
    height: auto;
}

td {
    /* width: 100%;
    height: auto; */
    padding-right: 4px;
    padding-left: 4px;
    /* text-align: center; */
    position: relative;
    top: 50%;
}

#recruit {
    width: 60%;
}

#faq {
    width: 40%;
}

p {
    margin: 4px;
    font-weight: bold;
}

a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 8px;

    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    color: #fff;

    box-shadow: 0px 0.3rem 1.0rem -0.25rem var(--link-color);
    background-color: var(--link-color);

    transition: box-shadow 0.5s;
}

a:hover {
    box-shadow: 0px 0.5rem 1.5rem 0rem var(--link-color);
}

i {
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

svg {
    /* margin-left: 0.5rem; */
    margin-right: 0.5rem;
    display: flex;
    /* font-size: 1.5rem; */
}

#q_svg {
    margin-right: 1rem;
}

#btn1 {
    --link-color: #0e76a8;
}

#btn2 {
    --link-color: #53AA50;
}

#btn3 {
    --link-color: #833AB4;
}

#btn4 {
    --link-color: #DB2F29;
}

#btn5 {
    --link-color: #3C485E;
}

li {
    margin-left: 30px;
    margin-right: 30px;
    list-style-type: none;
}

.title {
    display: flex;
    flex-wrap: wrap;
    margin-left: 20px;
    text-decoration: none;

    max-width: 280px;

    box-shadow: 0px 0.5rem 1.5rem -0.25rem var(--link-color);
    background-color: var(--link-color);

    --link-color: #616161;
}

.question {
    display: flex;
    justify-content: left;
    align-items: left;
    flex-wrap: wrap;

    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 8px;

    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    color: #fff;

    box-shadow: 0px 0.5rem 1.5rem -0.25rem var(--link-color);
    background-color: var(--link-color);

    transition: box-shadow 0.5s;

    --link-color: #64a07a;
}


.answer {
    display: flex;
    /* flex-wrap: nowrap; */
    position: relative;
    justify-content: left;
    text-align: left;
    align-items: left;
    flex-wrap: wrap;

    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 8px;

    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    color: #fff;

    box-shadow: 0px 0.5rem 1.5rem -0.25rem var(--link-color);
    background-color: var(--link-color);

    transition: box-shadow 0.5s;

    --link-color: #adadad;
}

.im {
    width: 7%;
    max-width: 25px;
    position: absolute;
    top: 10px;
}

.an {
    margin-left: 4px;
    text-align: left;
    align-content: left;
    align-items: left;
}

#question:hover {
    box-shadow: 0px 0.5rem 1.5rem 0rem var(--link-color);
}

footer {
    /* height: 30px; */
    height: auto;
    position: relative;
    transform: translateY(-100%);
}

#footer {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* flex-wrap: wrap; */

    /* padding: 0.75rem; */
    /* margin-bottom: 1rem; */
    /* min-width: 240px; */
    height: auto;
    border-radius: 8px;

    text-align: center;
    text-decoration: none;
    /* font-weight: 500; */
    font-size: 0.7rem;

    box-shadow: 0px 0.3rem 1.0rem -0.25rem var(--link-color);
    background-color: var(--link-color);

    transition: box-shadow 1s;

    --link-color: #ebebeb;
}