@import url(common.css);
@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  }
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

html 
  {scroll-behavior: smooth;}

body
  {font-family: 'NanumSquareNeo-Variable';
  width: 100%;
  }

main, section
  {width: 100%;
  height: 100vh;
  box-sizing: border-box;
  }
section .h2
  {padding: 30px;
  }
section h2
  {font-family: 'Lobster', 'NanumSquareNeo-Variable';
  font-size: 3rem;
  position: absolute;
  top: 20px;
  left: 20px;
  }
.logo img
  {height: 30px;
  margin-right: 5px;
  }

/* INTRO */
#intro
  {display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

/* OUTRO */
#outro
  {background-color: #222;
  height: 30vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: rgb(186, 255, 225);
  animation: foot 4s infinite;
  }


/* NAV */
nav
  {position: fixed;
  right: 30px;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 5000;
  }
nav ul li
  {border: 1px solid #00000000;
  margin: 20px auto;
  width: 20px;
  height: 20px;
  background-color: rgb(51, 255, 177);
  border-radius: 50%;
  transition: 0.3s;
  }
nav ul li:last-child
  {background-color: yellow;}
nav ul li:hover
  {    background-color: #fff;}
nav ul li a span {display: none;}
nav ul:hover li
  {width: 120px;
    height: 20px;
    border-radius: 50%;
  border: 1px solid #000000;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
  }
nav ul:hover a
  {display: block;
  width: 120px;

  }
nav ul:hover span
  {display: block;
  }

nav .scrollact
  {width: 10px;
  height: 70px;
  border-radius: 20px;
  }

  @keyframes foot
  {0%{color:rgb(186, 255, 225);}
  20%{color:rgb(250, 255, 174);}
  50%{color:rgb(154, 241, 213);}
  70%{color:rgb(125, 240, 177);}
  }