@keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.body{
    background-color: white;
}

/*---COLORS--*/

.colors{
    background-color: gainsboro;
}

.color-container {
    --border-size: 4px;
    --border-angle: 0turn;
    width: auto;
    height: auto;
    background-image: conic-gradient(
        from var(--border-angle),
        #213,
        #112 50%,
        #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, white, black);
    background-size: calc(100% - (var(--border-size) * 2))
    calc(100% - (var(--border-size) * 2)),
      cover;
    background-position: center center;
    background-repeat: no-repeat;
  
    animation: bg-spin 3s linear infinite;
}


.pastel-red{
    background-color: #ffb3ba;
}

.pastel-pink{
    background-color: #ffe5ec;
}

.pastel-orange{
    background-color: #ffdfba;
}

.pastel-yellow{
    background-color: #ffffba;
}

.pastel-green{
    background-color: #baffc9;
}

.pastel-blue{
    background-color: #bae1ff;
}

.color-panel{
    display: inline-block;
    border-style: ridge;
    border-color: black;
    width: 32%;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
    left: 8px;
}

/*----FONTS---*/  

#font1{
    background-color: #bae1ff;
    font-family: "Dancing Script";
}

#font1 .bold-font{
    font-weight: 800;
}

#font2{
    background-color: #bae1ff;
    font-family: "Gentium Book Basic";
}

#font2 .italic-font{
    font-style: italic;
    font-weight: 400;
}

#font2 .bold-font{
    font-weight: 800;
}

#font3{
    background-color: #bae1ff;
    font-family: "Nanum Myeongjo";
}

#font3 .italic-font{
    font-style: italic;
    font-weight: 400;
}

#font3 .bold-font{
    font-weight: 700;
}

#font4{
    background-color: #bae1ff;
    font-family: "Space Mono";
}

#font4 .italic-font{
    font-style: italic;
    font-weight: 400;
}

#font4 .bold-font{
    font-weight: 700;
}

.fonts {
    --border-size: 4px;
    --border-angle: 0turn;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;

    background-image: conic-gradient(
        from var(--border-angle),
        #213,
        #112 50%,
        #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, white, black);
    background-size: calc(100% - (var(--border-size) * 2))
    calc(100% - (var(--border-size) * 2)),
      cover;
    background-position: center center;
    background-repeat: no-repeat;
  
    animation: bg-spin 3s linear infinite;
}

.font-border{
  --border-width: 3px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: auto;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;

  border-radius: var(--border-width);
  
  
}

h2{
    font-weight: 500;
    font-size: 25px;
    font-family: "Dancing Script";
}

a{
    font-weight: 400;
    font-size: 18px;
    font-family: "Gentium Book Basic";
}

p{
    font-family: "Nanum Myeongjo";
    font-size: 20px;
    font-weight: 400;
}

/*BackGround*/

html {
    height:100%;
  }
  
  body {
    margin:0;
  }
  
  .bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
  }
  
  .bg3 {
    animation-duration:5s;
  }
  
  h1 {
    font-family:monospace;
  }
  
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }