/* style for link tree */

@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap");

:root {
  --shadow: 2px 2px 10px #999999, -2px -2px 10px #ffffff;
  --inner-shadow: inset 2px 2px 10px #999999, inset -2px -2px 10px #ffffff;
  --blue-in-logo: #14337b;
}

* {
  box-sizing: border-box;
}

body {
  align-items: center;
  /* background-color: #ffffff; */
  /* background-color: var(--blue-in-logo); */

  /* filter: blur(10px); */
  /* opacity: 0.3; */
  display: flex;
  flex-direction: column;
  /* font-family: "Mulish", sans-serif; */
  /* font-family: "Nanum Gothic", sans-serif; */
  font-family: "Noto Serif KR", serif;
  font-size: 100%;
  font-weight: 400;
  margin: 0;
  /* padding-block: clamp(0.5rem, 10vw, 1rem); */
}

.english-font {
  font-family: "Mulish", sans-serif;
}

.classic-gradient {
  background-image: linear-gradient(
    to bottom right,
    #14337b 0%,
    #e9f1e9 88% 88%
  );
}

.box-shadow {
  box-shadow: var(--shadow);
}

.container {
  --container-max: 60ch;
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

.grid {
  display: grid;
  place-items: center;
  /* min-height: 100vh; */
  min-height: calc(var(--vh, 1vh) * 100);

}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: #fff;
  padding: 1.5rem clamp(1rem, 5%, 3rem);
  margin-block: clamp(1rem, 5%, 3rem);
  border-radius: 10px;
}

header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.logo {
  border-radius: 50%;
  box-shadow: var(--inner-shadow);
  height: 8em;
  position: relative;
  width: 8em;
  box-shadow: var(--shadow);
  /* border:2px solid hsl(222, 72%, 28%); */
}

h1 {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  text-align: center;
  color: var(--blue-in-logo);
}

/* p */
.info {
  font-weight: 400;
  font-size: clamp(1.125rem, 3.6vw, 1.5rem);
  text-align: center;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 450px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* use with no img, but just div */
/* .picture::before {
    content: "";
    background: url("logo.png");
    background-size: contain;
    border-radius: 50%;
    inset: 0;
    position: absolute;
    z-index: -1;
} */

footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
  vertical-align: middle;
}

.button {
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 25ch;
  padding: 0.5em 1em;
  font-size: clamp(1.125rem, 3.6vw, 1.5rem);
  text-align: center;
  vertical-align: middle;
  /* font-weight: 700; */
  cursor: pointer;
  /* background-color: var(--blue-in-logo); */
  color: #14337b;
  background-color: #e9f1e9;
}

.button:hover,
.button:focus {
  /* box-shadow: var(--inner-shadow);
    outline: none; */
  /* color: var(--blue-in-logo); */
  filter: brightness(85%);
}

.button i {
  vertical-align: -13%;
}

.instagram {
  background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
  color: #fff;
}

.kakao {
  background-color: #fae100;
  color: #3c1d1e;
}

.naver {
  background-color: #03c75a;
  color: #fff;
}