@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400&display=swap");

:root {
  --color-bg: #fdfffd;
  --color-grey: #d1d1d1;
  /* --color-accent: #f797c7; */
  --color-accent: navy;
  --color-white: white;
  --color-yellow: #fbffb1;
  --color-dark-grey: #bbb8b8;
}

* {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  font-family: "Noto Sans KR", sans-serif;
  box-sizing: border-box;
}

a {
  color: var(--color-bg-gray);
  /* text-decoration: none; */
}

::selection {
  background-color: var(--color-yellow);
}

.container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100px 75vh;

  width: 90%;
  height: 90vh;
  margin: auto;
}

.contents {
  display: grid;
  grid-template-columns: 200px 3fr 1fr;
  gap: 10px;
}

section {
  overflow-y: scroll;
}

section::-webkit-scrollbar {
  display: none;
}

.profile>img {
  width: 90%;
  padding: 10px;
  background-color: var(--color-bg);
}

.projects div.backend,
.projects div.frontend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

hr {
  width: 85%;
  margin: 40px 0;
  border: dashed 1px var(--color-bg);
}

.myInfos {
  gap: 10px;
}

.projects article {
  width: 250px;
  height: 300px;
  padding: 10px;
  background-color: var(--color-bg);
}

.projects article>h3,
.projects article>h6,
.projects article>div,
.projects article>span {
  width: 100%;
  height: 30px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.projects article>h3::-webkit-scrollbar,
.projects article>h6::-webkit-scrollbar,
.projects article>div::-webkit-scrollbar,
.projects article>span::-webkit-scrollbar {
  display: none;
}

.project-img {
  height: 60%;
  filter: grayscale(0);
  background-size: cover;
  background-color: var(--color-grey);
  overflow: hidden;
}

.project-img>img {
  width: 100%;
  height: 100%;
}

.projects article:hover {
  border-bottom: solid 5px var(--color-accent);
}

.projects article:hover .project-img {
  filter: grayscale(0);
}

.skills {
  display: flex;
  align-items: center;
}

.skills>span {
  color: var(--color-bg);
  font-size: 0.8em;
  border: none;
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 3px;
  background-color: var(--color-grey);
  white-space: nowrap;
  word-wrap: break-word;
}

.skills>span:hover {
  /* background-color: #f797c7; */
  background-color: navy;
}

.description {
  color: var(--color-dark-grey);
}

.period {
  color: var(--color-grey);
  font-size: 0.8em;
}

.myInfos>article {
  height: 20vh;
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(ci);
}

.likes-img {
  height: 85%;
  filter: grayscale(1);
  background-size: cover;
  background-color: var(--color-bg);
}

.myInfos>article:hover .likes-img {
  filter: grayscale(0);
  object-fit: cover;
}

.myInfos>article .likes-img>img {
  width: 100%;
  height: 100%;
}

.myInfos>article>h6 {
  color: var(--color-dark-grey);
  background-color: var(--color-bg);
}

.myInfos>article:hover>h6 {
  background-color: var(--color-yellow);
}

.myInfos>article>h6::selection {
  background-color: var(--color-accent);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: solid 3px var(--color-bg);
  padding: 10px 0;
  margin-bottom: 20px;
}

header.mobile {
  display: none;
}

header>.tag {
  display: none;
  color: var(--color-bg);
  padding: 0 5px;
  background-color: var(--color-accent);
}

h4 {
  padding: 10px 0;
}

ul {
  margin-left: 20px;
}

li {
  padding: 5px 0;
  font-size: 0.9em;
  overflow-wrap: break-word;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  width: 100vw;
  height: 150px;
  background-color: var(--color-grey);
  font-size: 0.8em;
  margin-top: 20px;
}

footer ul {
  color: var(--color-white);
  list-style: none;
}

address {
  color: var(--color-bg);
  text-align: center;
}

@media screen and (max-width: 760px) {
  hr {
    width: 100%;
  }

  header.mobile {
    display: flex;
    position: fixed;
    z-index: 1;
    width: 90%;
    padding: 20px 30px;
    margin-bottom: 20px;
    background-color: var(--color-white);
  }

  header.web {
    display: none;
  }

  .container {
    padding-top: 100px;
  }

  .container,
  .contents {
    display: flex;
    flex-direction: column;
  }

  .container {
    height: auto;
  }

  .profile>img {
    display: none;
  }

  .projects {
    order: -1;
  }

  .projects article,
  .myInfos>article {
    width: 85vw;
    height: 70vw;
  }
}