:root {
    --fs-xxs: 0.5rem;  
    --fs-xs: 0.75rem;  
    --fs-sm: 1rem;     
    --fs-md: 1.25rem; 
    --fs-lg: 1.5rem;  
    --fs-xl: 1.75rem;  
    --fs-xxl: 2rem;    
    --fs-xxxl: 2.25rem;
    --grey-color: #494646;
    --orange-color: #FF6F00;
    --page-margin: 6rem;
    --small-margin:2rem;
  }

  html{
    font-size: 16px;
  }

  body{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: "Inter", sans-serif;
  }


  .top_bar{
    display: flex;
  width: 100%;

  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
    background-color: black;
    justify-content: space-between;
    align-items: center;
  
    padding: 1vw;

 
  
    margin-bottom: var(--small-margin);
    
  }

  .tutorial{
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    width: 40%;
    max-width: 37.5rem;
  }
 

  #tutorial{
    color: red;
  }

  .top_img{
    display: flex;
    justify-content: center;
    width: 20%;
    max-width: 18.75rem;
  }


  #top_bar_logo{
   
    width: clamp(4rem, 1.714rem + 4.571vw, 6rem);
    height: clamp(4rem, 1.714rem + 4.571vw, 6rem);
    height: 4rem;
    width: 4rem;
  
  }

  .top_bar a img{
   width:clamp(2rem, -0.286rem + 4.571vw, 4rem);
   width: 2.5rem;
  }

  #top_left_right_box{
    justify-content: space-between;
  }

  .top_bar button{
    font-family: "Inter", serif;
    background-color: white;
    font-size:clamp(0.7rem, 0.357rem + 0.686vw, 1rem);
    border: none;
    font-weight: 900;
    padding: .5rem;
    border-radius: .5rem;
    font-size: .75rem;
   
  }

  .box_frame{
    width: 98%;
    max-width: 91.875rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--page-margin);
  }


  .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
   width: clamp(12.5rem, 1.643rem + 21.714vw, 22rem);
   height: clamp(12.5rem, 1.643rem + 21.714vw, 22rem);
  
 
    aspect-ratio: 1;
    background-color: rgb(255, 255, 255);
    border: .2rem solid black;
    border-radius: 1.5rem;
  }

  .box_title{
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
  }
 
  .box button{

    font-size: 1.25rem;
    font-family: "Inter", serif;
    background-color: black;
    font-weight: 600;
    width: 75%;
  
    color: white;
    border-radius: 1rem;
    border: none;
    padding: .25rem;

  }


  #back_button{
    font-size: 1.25rem;
    font-family: "Inter", serif;
    background-color: rgb(255, 0, 0);
    font-weight: 600;
    padding: 1REM;

  
    color: white;
    border-radius: 1rem;
    border: none;

  }

  #form_button{
    font-size: 1.25rem;
    font-family: "Inter", serif;
    background-color: rgb(0, 0, 0);
    font-weight: 600;

  
    color: white;
    border-radius: 1rem;
    border: none;
    padding:1rem;

  }

  #no_bg{
    background: none;
    color: black;
    margin: 0;
  }

  #weekday_button{
    font-size: 1.25rem;
    font-family: "Inter", serif;
    background-color: rgb(0, 0, 0);
    font-weight: 600;

  
    color: white;
    border-radius: 1rem;
    border: none;
    padding:1rem;
    width: 9.375rem;
  }


  input{
    font-size: 1.25rem;
    border: none;
    border-bottom: .2rem solid black;
    
  }
  input::placeholder {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 900;
  
  }
  .error{
    margin: 0;
    font-size: 1.25rem;
    color: red;
    font-weight: 900;
    text-align: center;
  }

  .error{
    display: none;
  }

 .box img{
 width: 4rem;
  }

  #no_border{
    border: none;
  }

  #client_boxes{
    justify-content: space-evenly;
    
  }
  

  


  .section_title{
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    
 
   margin-bottom: var(--small-margin);
   font-weight: 900;
   color: #000000;
   max-width: 91.875rem;
   margin-top: var(--small-margin);
 
 color: black;

   padding: 1rem;
   background-color: rgb(0, 0, 0);
   color: white;
   justify-content: center;
   border-radius: .6rem;

  }


  form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--small-margin);
    
  }
  #bold{
    font-weight: 900;
  }

     table{
    
       width: 100%;
       margin: 0;
      
     
       border-collapse: collapse;
       font-size: 1rem;
       margin: 0;
       padding: 0;
      
   
   
     
       
     }
     tr{
       width: 98vw;
       max-width: 91.875rem;
       margin: 0;
       
      
      
       
     }
     
     th{
       margin: 0;
       padding: 0;
       text-align: left;
       font-family: "Inter", sans-serif;
       font-weight: 400;
       text-align: center;
     
    
       padding: 1rem;
    
       font-size: clamp(1rem, 0.75rem + 1.333vw, 2rem);
       font-size: 1rem;
      
      
       font-size: .7rem;
     
   
       color: rgb(71, 70, 70);
       border-bottom: .1rem solid black;
       font-size: 1rem;
  
       background-color: black;
       color: rgb(255, 255, 255);
     }
     
    
     
     
     td{
       margin: 0;
       padding: 0;
       font-family: "Inter", sans-serif;
 
       text-align: center;
  
       max-width: 15ch;
     
       padding: .25rem;
       color: rgb(0, 0, 0);
       font-size: 1rem;
       border-top: .1rem solid black;
       
       font-weight: bold;
     }
   
     td button{
       font-size: clamp(1rem, 0.75rem + 1.333vw, 2rem);
       color: rgb(179, 255, 57);
       font-weight: 900;
       border: none;
       padding: 1rem;
       font-family: "Inter", serif;
       border-radius: 1rem;
         font-size: 1rem;
         background:none;
         color: rgb(255, 197, 37);
         font-size: .8rem;
     }
     td button img{
      width: 1.25rem;
     }

     .table_container{
      display: flex;
      width: 98vw;
      max-width: 91.875rem;
      overflow: scroll;
      border: .1rem solid black;
    }

    .select_exercise_button{
      font-size: 1rem;
      background: none;
      border: none;
      font-weight: 400;
    }

    .page_title{
      font-size: 1.25rem;
      font-weight: 900;
      margin: 0;
    }

    .tip{
      font-size: 1.25rem;
      text-align: center;
      font-weight: 400;
      font-style: italic;
      margin: 0;
      max-width: 43.75rem;
    }
    

    .space{
     margin-top: 2rem;
    }

    .workout_name{
      font-weight: 400;
      font-size: 1.25rem;
      text-align: center;
    }

    .workout_span{
      font-weight: 900;
      font-size: 1.25rem;
    }

    .yes,.no{
      font-size: 1.25rem;
      font-family: "Inter", serif;
      background-color: rgb(0, 0, 0);
      font-weight: 600;
      padding: 1REM;
  
    
      color: white;
      border-radius: 1rem;
      border: none;
    }

    .exercise_text{
      font-size: 1.25rem;
      text-align: center;
      font-weight: 900;
    
      margin: 0;
    }

    .view_name{
      font-size: 1.25rem;
      font-weight: 900;

    }

    .view_text{
      font-size: 1.25rem;
      font-weight: 300;
      margin: 0;
     
      align-items: center;
      text-align: center;
      width: 90%;
      text-align: left;
     
  
    }
    .view_text img{
      width: 1.25rem;
    }

    .view_frame{
      display: flex;
      flex-direction: column;
      width: 90%;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
 
      margin-bottom: 1rem;
      border-radius: .5rem;
      width: 15.625rem;
    
      align-items: left;
    
    
    }
    .sets_frame{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      row-gap: 1rem; 
      justify-content: space-evenly;

     
      
    }

    .sets_frame p{
      background-color: rgb(18, 213, 0);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
    }

    #name_text{
      background-color: rgb(245, 93, 93);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
    }

    #rounds_text{
      background-color: rgb(75, 125, 241);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
    }

    #time_text{
      background-color: rgb(21, 200, 96);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
    }

    #rest_text{
      background-color: rgb(249, 110, 23);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
    }

    #notes{
      background-color: rgb(151, 57, 252);
      padding: .5rem;
      color: white;
      border-radius: .5rem;
      width: 90%;
    
    }

    select{
      width: 30%;
      border: .25rem solid black;
      background-color: white;
      
    }

    #send_body{
      gap: 1rem;
    }

    .home_top_bar{
      width: 100vw;
      background-color: black;
      display: flex;
      justify-content: center;
      padding-top: 1rem;
      padding-bottom: 1rem;
      margin-bottom: 1rem;

    }

    .home_bar_sections{
      width: 33%;
      max-width: 30.94rem;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .home_bar_sections img{
      width: 5rem;
      height:5rem;
    }

    .home_bar_sections a{
      color: white;
 
      font-size: 1rem;
      font-weight: 900;
      text-decoration: none;
    }

    .home_title{
   
      margin: 0;
      font-weight: 900;
      width: 98%;
      max-width: 91.875rem;
      font-size: clamp(2rem, 1.5rem + 2.667vw, 4rem);
      
    }

    .home_subtitle{
      font-size: 2rem;
      font-weight: 600;
      margin: 0;
      width: 98%;
      max-width: 91.875rem;
      color: #ff0000;
    }

    .home_images{
      width: 98%;
      max-width: 91.875rem;
      display: flex;
      justify-content: space-between;
      margin-top: 3rem;
    }

    .home_img{
      background-image: url('/img/bg2.jpg'); 
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
      width: 30%;
      border-radius: 1rem;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #white{
      color: white;
      text-align: center;
    
      border-radius: 1rem;
    
      width: 50%;
      text-shadow: 0 0 1rem rgb(255, 40, 40);
    }

    .home_body{
      width: 98%;
      max-width: 91.875rem;
      font-weight: 400;
      font-size: 1.25rem;
      line-height: 1.75;
      margin: 0;
      margin-top: 1rem;
      margin-bottom: 3rem;
    }

    iframe{
      margin-top: 1rem;
     width: 40rem;
     height: 20rem;
     border-radius: 1rem;
     border: .2rem solid white;
    }

    textarea{
      width: 40rem;
      height: 20rem;
      border: .2rem solid black;
    }

    #registerForm{
      margin-top: 2rem;

      width: 75%;
      padding: 1rem;
      border-radius: 1rem;
    }
    .form_img{
      background-image: url('/icons/logo.png'); 
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
      width: 6rem;
      height: 6rem;
      background-color: black;
      padding: 1rem;
    }

    .white_border{
   
      font-size: 1.25rem;
      font-family: "Inter", serif;
      background-color: rgb(0, 0, 0);
      font-weight: 600;
  
    
      color: white;
      border-radius: 1rem;
      border: none;
      padding:1rem;
      border:.2rem solid white;
    }

    .register_input{
      padding: 1rem;
      border-radius: 1rem;
      border: .1rem solid black;
    }

    .home_button{
      font-size: 2.5rem;
      padding: 1rem;
      border-radius: 1rem;
      font-weight: 900;
      background-color: rgb(29, 216, 60);
      color: white;
      border: none;
      font-family: "Inter", serif;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    #image_2{
      background-image: url('/img/bg3.jpg'); 
    }

    #image_3{
      background-image: url('/img/bg1.jpg'); 
    }


    .link_div{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1rem;
      text-align: center;
      gap:1rem;
    
    }

    #red_highlight{
      font-weight: 700;
      color:rgb(0, 0, 0);
   
    }

    .link_div{
      display: none;
    }

    .link{
      color:   rgb(170, 0, 255);;
    }

    #homepage_img{
      background-image: url('/img/homepage.jpg'); 
      background-size: cover;
     
     
      background-repeat: no-repeat;
  
    }

    .homepage_top{
      align-items: center;
      margin-top: 1rem;
      display: flex;
      width: 95%;
      max-width: 89.06rem;
   
    }

    #homepage_logo{
      width: 6rem;
    }

    .homepage_button{
      font-family: "Inter", sans-serif;
     
      background-color: transparent;
      border: .2rem solid white;
      color: white;
      font-weight: bold;
      padding: .25rem;
      font-size: clamp(1rem, 0.875rem + 0.667vw, 1.5rem);
      background-color: white;
      color: black;
      border-radius: 1rem;

    }

    .homepage_title{
    
  
      font-weight: 900;
      margin: 0;
      color: white;
      display: flex;
      width: 100%;
      align-items: left;
      max-width: 93.75rem;
      width: 95%;
      max-width: 89.06rem;
      margin-top: 3rem;
  
      font-size: clamp(1.75rem, 1.188rem + 3vw, 4rem);
      
    }

    .homepage_body{
     
      font-weight: 300;
      display: flex;
      width: 100%;
      align-items: left;
      max-width: 93.75rem;
      color: white;
      margin: 0;
      line-height: 2;
      width: 95%;
      max-width: 89.06rem;

      font-size: clamp(1rem, 0.875rem + 0.667vw, 1.5rem);
    }

    .facts{
      width: 100%;
      max-width: 93.75rem;
      display: flex;
      justify-content: space-between;

      font-weight: 900;
      color: white;
      width: 95%;
      max-width: 89.06rem;
      flex-wrap: wrap;
  
      font-size: clamp(1rem, 0.875rem + 0.667vw, 1.5rem);
    }

    #joinnow{
      margin-top: 3rem;
    font-size: 3rem;
 
    margin-bottom: 3rem;
    font-size: clamp(1.75rem, 1.438rem + 1.667vw, 3rem);
 
   width:  clamp(10rem, 7.5rem + 13.333vw, 20rem);
    }


    .homepage_left{
      width: 25%;
 
    }
    
    .homepage_middle{
      width: 50%;
      display: flex;
      justify-content: space-evenly;
    }
    .login_register_buttons{
      width: 25%;
      display: flex;
   
      justify-content: space-between;
    
    }

    #created_by{
      font-style: italic;
      font-size: 1.25rem;
      margin: 0;
      text-align: center;
    }

    #blog_body{
 
      margin: 0;
      font-size: 1.25rem;
      width: 90%;
      text-align: left;
      margin-top: 2.5rem;
      max-width: 1500px;
      line-height: 2;
      font-weight: bold;
    }

    #black_logo{
      width: 6rem;
    }

    #max_width{
      min-width: 50%;
      max-width: 1500px;
      padding: 0;
      text-align: center;
      background: none;
      color: black;
    }


    @media (max-width: 400px) {
      .home_bar_sections a{
       font-size: .8rem;
      }

    }

    @media (max-width:600px){
      .facts{
        flex-direction: column;
      }
      .homepage_left{
        width: 40%;
   
      }
      
      .homepage_middle{
        width: 20%;
       
      }
      .login_register_buttons{
        width: 40%;
        justify-content: space-evenly;
        flex-wrap: wrap;
      
        row-gap: 1rem;
        gap:.25rem;
      }

    #homepage_logo{
      width: 4rem;
    }
    textarea{
      width: 90%;
      border: .2rem solid black;
    }

   
    }

  @media (max-width: 800px) {
  



  

  .top_bar button{
    font-size: .75rem;
  }
  .box_frame{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    row-gap: .75rem;
    margin-bottom: var(--small-margin);
  }

  .home_images{
flex-direction: column;
align-items: center;
gap: 1rem
  }

  .home_img{
    width: 50%;
  }
#image_2,#image_3{
  display: none;

}

.home_images .home_title{
  display: none;
}

iframe{
  margin-top: 1rem;
 width: 75%;
 height: 20rem;
 border-radius: 1rem;
 
}

.home_subtitle{
  font-size: 1.4rem;
}

  

  }