:root{ 
    --r: #f52819;
}



  @font-face {
      font-family: "inflatio1";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-01.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio3";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-03.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio5";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-05.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio7";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-07.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio9";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-09.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio11";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-11.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio13";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-13.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio15";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-15.woff2")
        format("woff2");
    }
    @font-face {
      font-family: "inflatio17";
      src: url("https://d38k2esv5oh9bn.cloudfront.net/0110.01.26001/fonts/Inflatiography-17.woff2")
        format("woff2");
    }


body,html{margin:0;padding:0; font-family:"inflatio3"; background-color: black; font-size: 1.1rem;} *,*::before,*::after{box-sizing:border-box; position:relative;}

.f1{font-family:"inflatio1";}
.f3{font-family:"inflatio3";}
.f5{font-family:"inflatio5";}
.f7{font-family:"inflatio7";}
.f9{font-family:"inflatio9";}
.f11{font-family:"inflatio11";}
.f13{font-family:"inflatio13";}
.f15{font-family:"inflatio15";}
.f17{font-family:"inflatio17";}
.bottom{color:var(--r); padding: 1rem;}
   hr,.line {
      /* controls */
      --dash:6px; /* dash length */
      --gap: 2px; /* gap length */
      --thick: 1px; /* line thickness */
      --color: black;

      height: var(--thick);
      border: 0;
    margin: 0;padding: 0;
      background: repeating-linear-gradient(
        90deg,
        var(--color) 0 var(--dash),
        transparent 0 calc(var(--dash) + var(--gap))
      );
    }
    hr.red,.line.red{
        --color: var(--r);
        margin-bottom: 3rem;
    }  
    .split{margin-top: 3rem;}
    p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
    h3{font-size: 2rem; padding-bottom: 1rem;}
    p{padding-bottom: 1rem; font-size: 1.2rem; line-height: 1.7rem;}
h2{font-size: 2rem;}

    .limit{width:100%; margin: 0 auto;}

    .top{background-color: var(--r); padding: 1rem;}
    .header > div{display: flex; justify-content: space-between; width: 100%; align-items: center; padding: .5rem 1rem;}
    .header img{width: 50px; transform: translateY(-1px);}

    h1{font-size: 3.3rem; line-height: 4rem; padding-top: 2rem; padding-bottom: 2rem;}

    .percentContainer span{display: block;}
    .percentContainer .bg{
    
        width: 180px;
        aspect-ratio: 1/1;
    
        position: absolute;
        transform: translate(-50% , -50%);
        left:50%;top: 50%;

    }
    .bg .rect{
        rotate:45deg;
        background-color: black;
        width: 100%;height: 100%;
            border-radius: 30px;
    }
    .percentContainer *{
        margin: 0; padding: 0;
        font-family: "inflatio5";
        /* outline: 1px solid yellow; */
    }
    .percentContainer{
        margin: 0 auto;
        font-size: .8rem;
        color:var(--r);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fit-content;
        margin-bottom: 4rem;
        margin-top: 2rem;
    }
.percent{font-size: 3rem;}
    input{
    all: unset;
    position: relative;
    color: black;
    outline: none;
    background-color:var(--r);
    border-radius:5px;
    width: 69px;
    text-align: center;
    font-size: 2rem;
    padding-top: .2rem !important;
    font-family: "inflatio5";
    }
.largeFont{font-size: 12rem; text-align: center; }

body,html{width: 100%; overflow-x: hidden;}

.line{width: 100%; margin-bottom: 0px !important;}
    /* .slider,
    .slider *
    { outline: 1px solid yellow;} */
    .line:before{
        content: ""; width: 10px; height: 10px; background-color:var(--r); border-radius: 50%; position: absolute; top: -4px; left: -5px; z-index:2
    }
    .line:after{
        content: ""; width: 10px; height: 10px; background-color: var(--r); border-radius: 50%; position: absolute; top: -4px; right: -5px; z-index:2
    }
    .control{width: 20px;height: 20px; background-color: var(--r); border-radius: 50%; position: absolute;}
    .slider{display:flex;align-items:center; justify-content:center;}
    .fade{position: absolute; right: 0; top: 0; width: 50%; height: 100%; background-color: rgb(0, 0, 0); opacity: .6;}
    a{color: inherit; text-decoration: none;}
    .space{margin: 3rem 0;}
    .footer{padding: 1rem;display:flex;align-items:center; justify-content:center;gap: 1rem; margin-bottom: 2rem;}
    button{display: block; margin: 0 auto; margin-top: 3rem;margin-bottom: 4rem;
        font-family: "inflatio5"; font-size: 1.5rem; padding: .5rem 1rem; background-color: var(--r); color: black; border: none; border-radius: 5px; cursor: pointer;
        transition: all .3s;
    }
button:hover{scale:1.2}
img{display: block; width: 100%;}
    dialog{position: fixed; text-align: center; background: var(--r); max-width: 700px; width: 100%;}
.imgfont{max-width: 310px; padding: 1rem; margin: 0 auto; padding-bottom: 2rem; scale: 1.3; transform: translateY(-8%);}
    .code{white-space: pre-wrap; word-wrap: break-word;}
    /* .copyable:hover:after{
        content: "copy";
        position: absolute;
        width:100%;height:100%;left:0;top:0;
         display: flex; align-items: center; justify-content: center;
        background-color: var(--r);
        color: black;
        padding: .2rem .5rem;
        font-size: 1rem;
        border-radius: 5px 0 0 0;
        cursor: pointer;
        pointer-events: none;

    }
    .copyable{cursor: pointer;} */
    h1:not(dialog h1){transform: translateX(5%);}
    dialog button{background-color: black; color:var(--r)}
    .code{text-align: left;}
    
    .close{margin-left: auto; width: 15px;}
  
    @media(min-width: 600px){
        h1:not(dialog h1){transform: translateX(0%);}
        .footer{padding: 1rem;display:flex;align-items:center; justify-content:flex-end;gap: 5rem; margin-bottom: 2rem;}
        button{display: block; margin: 0 auto; margin-top: 6rem;
        font-family: "inflatio5"; font-size: 1.5rem; padding: .5rem 1rem; background-color: var(--r); color: black; border: none; border-radius: 5px; cursor: pointer;
        }
      h1{font-size: 7.5rem; line-height:9rem;}
      .limit{width: 1024px;}
      .percentContainer{
          position: absolute;
          right: 10%;
          bottom: 5%;
          scale:1.3
        }
        .split> div{
            display: grid;grid-template-rows: auto auto 300px auto;
            
        }
        .split{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 3rem;
        }
        
        
    }
    
    @media(min-width: 1200px){
        
        
        .percentContainer{
            position: absolute;
            right: 10%;
            bottom: 5%;
            scale:1.45
          }
        h1{font-size: 8.5rem; line-height:10rem; padding: 2rem 0;}
        .limit{width: 1200px;}

    }