*{
  user-select: none; /* Chrome, Safari, Firefox */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -webkit-user-select: none; /* Safari 3.1+ */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */

  margin: 0;
  --perple: rgb(83, 52, 255);
  --right: rgb(218, 218, 218);
  --shadow: rgb(184, 184, 184);

  font-family: Arial, sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
}

*:focus {
  outline: none;
  animation: blink 2000ms ease-in-out infinite;
}

@keyframes blink {
  0% { opacity: 0 }
  50% { opacity: 1 }
  100% { opacity: 0 }
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE, Edge */
html {
  -ms-overflow-style: none;
}

/* Chrome, Safari */
html::-webkit-scrollbar {
  display: none;
}

.dark {
  background-color: rgb(32, 32, 32);
  color: white;
  fill:white;
}

.light {
  background-color: white;
  fill:white;
}

a{
  color: rgb(0, 47, 255);
  text-decoration: none;
}

a:hover{
  color: rgb(0, 140, 255);
}

header{
  display: flex;
  align-items: center;
  height: 85px;
  background-color: var(--perple);
  color: white;
}

header > h1{
  margin-left: 100px;
  font-size: 40px;
}

header > svg{
  margin-right: 100px;
}

header > svg > path{
  fill: white;
}

section{
  position:relative;z-index: 1000;
  /* margin-left: 400px; */
  margin-top: 100px;
  width: 400px;
  height: 700px;

  border-radius: 2em;
  background-color: rgba(223, 223, 223, 0.39);
  backdrop-filter: blur(10px);

  /* border: solid 1px var(--shadow); */
  border-left: solid 1px var(--right);
  border-top: solid 1px var(--right);
  border-right: solid 1px var(--shadow);
  border-bottom: solid 1px var(--shadow);

  transform-style: preserve-3d;
  transform: perspective(1000px);
}

section > div > img{
  border-radius: 100%;
  margin-top: 45px;
  width: 300px;
  transform: translateZ(20px);
}

section > div > h1{
  margin-top: 10px;
  font-size: 40px;
}

section > div > div{
  margin-top: 20px;
  /*margin-left: 20px;*/
  width: 360px;
  height: 300px;
  transform: translateZ(20px);
}

section > div > div > a{
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  color: #fff;
  background-color: rgba(68, 0, 255, 0.8);
  border: none;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}

section > div > div > a:hover{
  color: #fff;
  background-color: rgba(68, 0, 255, 0.8);
}

article{
  /*margin-left: 800px;
  margin: auto;*/
  display: grid;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
}

article::after{
  content: '';
  position: absolute;

  width: 300px;
  height: 300px;

  top: 150px;
  left: 150px;

  /*background-image: linear-gradient(45deg , rgb(0, 132, 255) , rgb(153, 0, 255));
  border-radius: 80% 95% 95% 85% / 80% 85% 90% 95%;
  animation-name: bg;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 5s;*/
}

article::before{
  content: '';
  position: absolute;

  width: 350px;
  height: 350px;

  top: 500px;
  left: 1400px;

  /*background-image: linear-gradient(45deg , rgb(0, 132, 255) , rgb(153, 0, 255));
  border-radius: 80% 95% 95% 85% / 80% 85% 90% 95%;
  animation-name: bg;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

  animation-play-state: unset;
  animation-duration: 6s;*/
}

footer{
  margin-top: 150px;
  padding: 20px;
  height: 100px;
  background-color: #eee;
}

@keyframes bg {
  0% , 100% {
      border-radius: 80% 95% 95% 85% / 80% 85% 90% 95%;
  }
  25% , 75%{
      border-radius: 90% 85% 85% 95% / 85% 95% 80% 85%;
  }
  50%{
      border-radius: 70% 90% 75% 80% / 80% 75% 65% 70%;
  }
}