check/css/style.css

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

body {
  
  font-family: NanumSquareR;
    background-color: #ffffff;
  
  }
  
   
  
  .file-upload {
  
     padding: 13% 0;
  
      border-radius: 10px;
  
      border: solid 1.5px #f6f7fa;

      background-color: #f6f7fa;
  
  }
  
   
  
  .file-upload-btn {
  
    width: 100%;
  
    margin: 0;
  
    color: #fff;
  
    background: #1FB264;
  
    border: none;
  
    padding: 10px;
  
    border-radius: 4px;
  
    border-bottom: 4px solid #15824B;
  
    transition: all .2s ease;
  
    outline: none;
  
    text-transform: uppercase;
  
    font-weight: 700;
  
  }
  
   
  
  .file-upload-btn:hover {
  
    background: #1AA059;
  
    color: #ffffff;
  
    transition: all .2s ease;
  
    cursor: pointer;
  
  }
  
   
  
  .file-upload-btn:active {
  
    border: 0;
  
    transition: all .2s ease;
  
  }
  
   
  
  .file-upload-content {
  
    display: none;
  
    text-align: center;
  
  }
  
   
  
  .file-upload-input {
    position: absolute;
  
    margin: 0;
  
    padding: 0;
  
    width: 100%;
  
    height: 100%;
  
    outline: none;
  
    opacity: 0;
  
    cursor: pointer;
  
  }
  
   
  
  .image-upload-wrap {
  
      position: relative;
  
      object-fit: contain;
  
      border-radius: 10px;
  
      border: dashed 1.5px #35465d;
  
      background-color: #ffffff;
  
     width: 65%; 
  
     margin: 0 auto;
  
  }
  
  /* 업로드 버튼 (수정) */
  .image-dropping,
  
  .image-upload-wrap:hover {

    font-size: 30px;

    transition: transform 0.5s, background-color 0.3s;
    transform: scale(1.01);
    background-color: beige;

  
    border: 2px solid black;
  
  }
  
   
  
  .image-title-wrap {
  
    padding: 0 15px 15px 15px;
  
    color: #222;
  
  }
  
   
  
  .drag-text {
  
    text-align: center;
  
  }
  
   
  
  .drag-text h3 {
  
    font-weight: 100;
  
    text-transform: uppercase;
  
    color: #15824B;
  
    padding: 60px 0;
  
  }
  
   
  
  .file-upload-image {
  
    margin: auto;
  
    padding: 20px;
  
  }
  
   
  
  .remove-image {

    width: 200px;
  
    margin: 0;
  
    color: #fff;
  
    background: #cd4535;
  
    border: none;
  
    padding: 10px;
  
    border-radius: 4px;
  
    border-bottom: 4px solid #b02818;
  
    transition: all .2s ease;
  
    outline: none;
  
    text-transform: uppercase;
  
    font-weight: 700;
  
  }
  
   
  
  .remove-image:hover {

    background: #c13b2a;
  
    color: #ffffff;
  
    transition: all .2s ease;
  
    cursor: pointer;
  
  }
  
   
  
  .remove-image:active {
  
    border: 0;
  
    transition: all .2s ease;
  
  }
  
   
  
  .nav-distance{
  
    
  
  font-family: 'Courgette', cursive;

     padding: 2.1% 7.7%;
  
  }
  
   
  
  .navbar-light .navbar-brand{
  
   

  font-family: 'Courgette', cursive;
  
    line-height: 1.70;
  
    text-align: left;
  
    color: #35465d;

    font-size: 24px;
   
  
  }
  
  .navbar-light .navbar-toggler{

  
  font-family: 'Courgette', cursive;

     border-color: #ffffff;
     
  
  }
  
  .section {
  
     margin-top: 100px;
  
  }
  
   .result-Message {

     font-size:20px;

   }
  
  .title {
    

  font-family: 'Courgette', cursive;
      
    line-height: 1.50;

    font-size:90px;
  
    text-align: center;
  
    color: #35465d;
  
   
  
  }
  
  .subtitle  {
    
  
  font-family: 'Courgette', cursive;
  
    line-height: 1.4;
  
    font-size:34px;

    text-align: center;
  
    color: #35465d;
  
  }
  
   
  .bar-label {
      width: 20%;
      text-align: left;
      height: 2rem;
  }
  /* On screens that are 600px or less, set the background color to olive */
  
  @media screen and (max-width: 600px) {
  
    html {
  
      font-size: 8px;
  
    }
  
  }
  
   
  
  .youtube-link {
  
     font-size: 1.5rem;
  
     line-height: 1.71;
  
     text-align: 1.71;
  
     color: #f73737;
  
     text-decoration: underline;
  
  }
  
   
  
  .youtube-link:hover {
  
     font-size: 1.5rem;
  
     line-height: 1.71;
  
     text-align: 1.71;
  
     color: #f73737;
  
     text-decoration: underline;
  
  }
  
   
  
  .youtube-icon{
  
     width: 8%;
  
  }
  
  .upload{
  
     width: 20%;
  
  }
  
  .drag-text h3 {
  
     width: 50%;
  
      font-weight: 100;
  
      text-transform: uppercase;
  
      font-size: 1.6rem;
  
      line-height: 1.53;
  
      text-align: center;
  
      color: #35465d;
  
     margin: 0 auto;
  
  }
  
  .bar-container {
    height: 2.7rem;
  }
  .Spring-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    width: 100%;
    background-color: rgba(27, 175, 234, 0.2);
  }
  .Spring-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    background-color: rgba(27, 175, 234, 1);
  }
  .Summer-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    width: 100%;
    background-color: rgba(251, 176, 59, 0.2);
  }
  .Summer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    background-color: rgba(251, 176, 59, 1);
  }
  .Autumn-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    width: 100%;
    background-color: rgba(195, 140, 102, 0.2);
  }
  .Autumn-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    background-color: rgba(195, 140, 102, 1);
  }
  .Winter-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    width: 100%;
    background-color: rgba(49, 132, 155, 0.2);
  }
  .Winter-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    border-radius: 10px;
    background-color: rgba(49, 132, 155, 1);
  }

  /* 추가부분 */
  .colorWeight {
    display: inline-block;
    clip-path: circle(40%);
    width: 90px;
    height: 90px;

  }
  .colorWeight:hover {

    transform: scale(1.15);
  }