@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 700;
    font-style: SemiBold;
}

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

body {
  margin:0;
  padding: 0;
  background: linear-gradient(90deg,#CDBAA9, beige, #D9C6BA, beige,  #D9C6BA);
  text-align: left;
  color: #39A7EE;
  font-family: 'Pretendard';
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.6;
  word-break: keep-all;
}

.animated-title {
  font-size:20px;
  position: relative; width: 100%; max-width:100%; height: 30px; overflow-x: hidden; overflow-y: hidden;}

.animated-title .track {position: absolute; white-space: nowrap; will-change: transform; animation: marquee 18s linear infinite; }

@keyframes marquee {
  from { transform: translateX(150%); }
  to { transform: translateX(-100%); }
}

.flow{
  color: white;
  background: linear-gradient(90deg, #009CEA, white);
  display: flex;
  font-size: 20px;
  white-space: nowrap;
}


@keyframes pst {
  from {transform:translateX(-40%)}
  to {transform:translateX(-5%)}
}

.target1 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease alternate infinite;
}

.target2 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s linear alternate infinite;
}

.target3 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease-in-out alternate infinite;
}

.target4 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease-in-out alternate infinite;
}
.target5 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease-out alternate infinite;
}

.target6 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease-in alternate infinite;
}

.target7 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease alternate infinite;
}

.target8 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s ease-in-out alternate infinite;
}

.target9 {
  width:68%;
  height: 109px; 
  background:linear-gradient(90deg, blue, #009CEA, #009CEA, #009CEA, powderblue, deepskyblue, white); border-radius: 50px; 
  text-align:right; 
  line-height:107px; 
  box-shadow: 3px 8px 5px steelblue;
  animation:pst 1s linear alternate infinite;
}

@keyframes surfer {
  from {transform:translateX(-40%)}
  to {transform:translateX(5%)}
}

.text5{
  z-index: 3;
  color: #39A7EE;
  font-size:62px;
  padding: 8px;
  margin:14px;
  width: 50px; 
  animation:surfer 1s ease-out alternate infinite;
}

.text5:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 15 2'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .4s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='white' stroke-width='3' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 30%;
}

.text5, .text:link, .text:visited{
    text-decoration: none;
}


.target1 .text1, .text1:link, .text1:visited{
  text-decoration: none;
  color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; }

.text2, .text2:link, .text2:visited{
  text-decoration: none;
  color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; 
}
.text3, .text3:link, .text6:visited{
  text-decoration: none;
  color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; 
}
.text6, .text6:link, .text6:visited{
  text-decoration: none;
  color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; 
}

.text7, .text7:link, .text7:visited{
  text-decoration: none;
  color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; 
}

.target8 .text8, .text8:link, .text8:visited{
  text-decoration: none;
 color: #39A7EE;
  font-size:64px;
  padding: 8px;
  margin:14px;
  background-color: whitesmoke;
  border-radius: 50px; 
}


.text1:hover{color: blue;}
.text2:hover{color: blue;}
.text3:hover{color: blue;}
.text6:hover{color: blue;}
.text7:hover{color: blue;}
.text8:hover{color: blue;}


.name, .name:link, .name:visited {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.name:hover {
  color: blue;
}