@font-face {
  font-family: Montserrat;
  src: url(../webfonts/Montserrat.ttf);
}
@font-face {
  font-family: Handwrite;
  src: url(../webfonts/BreathneyDemo.ttf);
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Times, serif;

    --cream_color: rgb(239, 235, 229);

    /* --primary_color: rgb(9, 87, 223); */
    /* --primary_color: rgb(224,79,35); */
    --primary_color: rgb(57,124,58);
    --primary_unactive_color: rgb(41,89,42);
    --primary_hover_color: rgb(73,159,74);

    --primary_color_10: rgb(57,124,58, .1);
    --primary_color_25: rgb(57,124,58, .25);
    --primary_color_50: rgb(57,124,58, .5);
    --primary_color_75: rgb(57,124,58, .75);

    --red_color_10: rgba(255, 0, 0, .10);
    --red_color_25: rgba(255, 0, 0, .25);
    --red_color_50: rgba(255, 0, 0, .5);
    --red_color_75: rgba(255, 0, 0, .75);
    --red_color: rgba(255, 0, 0, 1);

    --green_color_10: rgba(0, 179, 0, .10);
    --green_color_25: rgba(0, 179, 0, .25);
    --green_color_50: rgba(0, 179, 0, .5);
    --green_color_75: rgba(0, 179, 0, .75);
    --green_color: rgba(0, 179, 0, 1);

    --blue_color_10: rgba(44, 130, 188, .10);
    --blue_color_25: rgba(44, 130, 188, .25);
    --blue_color_50: rgba(44, 130, 188, .5);
    --blue_color_75: rgba(44, 130, 188, .75);
    --blue_color: rgba(44, 130, 188, 1);
    --blue_gradient_to_darken: 60deg, rgba(44,130,188,1) 0%, rgba(25,89,153,1) 50%;

    --dark_blue_color_10: rgba(25, 89, 153, .10);
    --dark_blue_color_25: rgba(25, 89, 153, .25);
    --dark_blue_color_50: rgba(25, 89, 153, .5);
    --dark_blue_color_75: rgba(25, 89, 153, .75);
    --dark_blue_color: rgba(25, 89,153, 1);
    --dark_blue_gradient_to_lighten: rgba(25, 89, 153, 1);
    
    --complementary_text_color: black;

    --font_heading_1 : 50px;
    --font_heading_2 : 48px;
    --font_heading_3 : 45px;

    --font_sub_1 : 40px;
    --font_sub_2 : 38px;
    --font_sub_3 : 35px;
    --font_sub_4 : 28px;

    --font_size_0 : 24px;
    --font_size_1 : 20px;
    --font_size_2 : 18px;
    --font_size_3 : 16px;
    --font_size_4 : 14px;

    --font_special_160 : 160px;
    --font_special_64 : 64px;


    --bg_white_trans_20 : rgba(255, 255, 255, .2);

    --logo_v4_h : 80px;
    --logo_v1_h : 60px;
    --logo_v2_h : 40px;
    --logo_v3_h : 30px;

    --content_div_w : 900px;
    --card_w: 550px;
    --card_w_60: 60px;
    --logo_v2_w : 40px;
    --logo_v3_w : 30px;

    --font_160: 160px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 40px;
    --font_35: 35px;
    --font_30: 30px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 22px;
    --font_20: 20px;
    --font_18: 18px;
    --font_16: 16px;
    --font_14: 14px;
}
@media only screen and (max-width: 1360px) and (min-width: 1220px){
  *{
    --logo_v4_h : 70px;
    --logo_v1_h : 50px;
    --logo_v2_h : 36px;
    --logo_v3_h : 28px;

    --content_div_w : 800px;
    --card_w: 450px;
    --card_w_60: 50px;
    --logo_v2_w : 36px;
    --logo_v3_w : 28px;

    --font_160: 160px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 40px;
    --font_35: 31px;
    --font_30: 28px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 20px;
    --font_20: 18px;
    --font_18: 16px;
    --font_16: 15px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 1120px){
  *{
    --logo_v4_h : 60px;
    --logo_v1_h : 50px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 750px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 160px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 40px;
    --font_35: 30px;
    --font_30: 26px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    --font_20: 16px;
    --font_18: 14px;
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 1200px) and (min-width: 1000px){
  *{
    --logo_v4_h : 60px;
    --logo_v1_h : 50px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 750px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 160px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 35px;
    --font_35: 35px;
    --font_30: 26px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    --font_20: 16px;
    --font_18: 14px;
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 1000px) and (min-width: 800px){
  *{
    --logo_v4_h : 60px;
    --logo_v1_h : 50px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 750px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    --font_35: 35px;
    --font_30: 26px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    --font_20: 16px;
    --font_18: 14px;
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 800px) and (min-width: 600px){
  *{
    --logo_v4_h : 50px;
    /* --logo_v4_h : 60px; */
    /* --logo_v1_h : 50px; */
    --logo_v1_h : 40px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 750px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    /* --font_30: 26px; */
    --font_35: 35px;
    --font_30: 22px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    --font_20: 16px;
    /* --font_18: 14px; */
    --font_18: 13px;
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 600px) and (min-width: 500px){
  *{
    --logo_v4_h : 50px;
    /* --logo_v4_h : 60px; */
    /* --logo_v1_h : 50px; */
    --logo_v1_h : 40px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 580px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 50px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    --font_35: 35px;
    /* --font_30: 26px; */
    --font_30: 22px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    /* --font_20: 16px; */
    --font_20: 14px;
    /* --font_18: 14px; */
    --font_18: 13px;
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 500px) and (min-width: 430px){
  *{
    --logo_v4_h : 50px;
    /* --logo_v4_h : 60px; */
    /* --logo_v1_h : 50px; */
    --logo_v1_h : 40px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 400px;
    --card_w: 340px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 48px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    --font_35: 35px;
    /* --font_30: 26px; */
    --font_30: 22px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    /* --font_20: 16px; */
    --font_20: 15px;
    /* --font_18: 14px; */
    --font_18: 13px;
    /* --font_16: 13px; */
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 430px) and (min-width: 360px){
  *{
    --logo_v4_h : 50px;
    /* --logo_v4_h : 60px; */
    /* --logo_v1_h : 50px; */
    --logo_v1_h : 40px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 330px;
    --card_w: 330px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 40px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    --font_35: 35px;
    /* --font_30: 26px; */
    --font_30: 22px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    /* --font_20: 16px; */
    --font_20: 13px;
    /* --font_18: 14px; */
    --font_18: 13px;
    /* --font_16: 13px; */
    --font_16: 13px;
    --font_14: 14px;
  }
}
@media only screen and (max-width: 360px){
  *{
    --logo_v4_h : 50px;
    /* --logo_v4_h : 60px; */
    /* --logo_v1_h : 50px; */
    --logo_v1_h : 40px;
    --logo_v2_h : 30px;
    --logo_v3_h : 24px;

    --content_div_w : 750px;
    --card_w: 400px;
    --card_w_60: 40px;
    --logo_v2_w : 30px;
    --logo_v3_w : 24px;

    --font_160: 100px;
    --font_64: 64px;
    --font_50: 50px;
    --font_45: 45px;
    --font_40: 34px;
    --font_35: 35px;
    /* --font_30: 26px; */
    --font_30: 22px;
    --font_28: 28px;
    --font_24: 24px;
    --font_22: 18px;
    /* --font_20: 16px; */
    --font_20: 13px;
    /* --font_18: 14px; */
    --font_18: 13px;
    --font_16: 13px;
    --font_14: 14px;
  }
}







/* body{
  scroll-behavior: smooth;
  background: var(--cream_color);
} */
.main_content{
  display: flex;
  justify-content: center;
  background: var(--cream_color);
}
.content_container{
  position: relative;
  width: 1200px;
}


/* width */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--cream_color);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary_unactive_color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary_color);
}

.control_arrow{
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 4;
  display: none;
}
.control_arrow button{
  font-size: 2rem;
  border: none;
  outline: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: var(--primary_color_25);
  border-radius: 100px;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.control_arrow button:hover{
  color: black;
  background: var(--primary_color_75);
}

body.modal-open {
  overflow: hidden;
}

.create_new_project{
  display: flex;
  justify-content: end;
}
.create_new_project button{
  border: none;
  background: var(--primary_color);
  color: white;
  padding: 8px 15px;
}
.create_new_project button:hover{
  background: var(--primary_hover_color);
}
.spec_mrg{
  margin: 40px 0;
}

@media only screen and (max-width: 480px) {
  .content_container{
    width: 100%;
    max-width: 480px;
    padding: 0 10px !important;
  }
  .spec_mrg{
    margin: 25px 0 !important;
  }
}
@media only screen and (max-width: 800px) {
  *{
    --font_heading_1 : 25px;
    --font_heading_2 : 22px;
    --font_heading_3 : 20px;

    --font_sub_1 : 18px;
    --font_sub_2 : 17px;
    --font_sub_3 : 16px;
    --font_sub_4 : 15px;

    --font_size_0 : 14px;
    --font_size_1 : 13px;
    --font_size_2 : 12px;
    --font_size_3 : 11px;
    --font_size_4 : 10px;

    --font_special_160 : 50px;
    --font_special_64 : 22px;
  }
  .content_container{
    width: 100%;
    max-width: 800px;
    padding: 0 35px !important;
  }
  .spec_mrg{
    margin: 25px 0 !important;
  }
}
@media only screen and (max-width: 1100px) {
  .content_container{
    width: 100%;
    max-width: 1050px;
    padding: 0 30pt;
  }
}
/* @media only screen and (max-width: 1200px) {
  .content_container{
    width: 100%;
    max-width: 1050px;
    margin: auto;
    padding: 0 50px;
  }
} */
/* @media only screen and (max-width: 1300px) {
  .content_container{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 50px;
  }
} */
 @media only screen and (max-width: 1220px) {
  .content_container{
    width: 100%;
    max-width: 1050px;
    margin: auto;
    padding: 0 50px;
  }
}
 @media only screen and (max-width: 1360px) {
  .content_container{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 50px;
  }
}

@media only screen and (max-width: 1000px) {
  .control_arrow button{
    width: 45px;
    height: 45px;
  }
}
@media only screen and (max-width: 800px) {
  .control_arrow{
    right: 35px;
  }
}