@import url("https://use.typekit.net/ocb5svo.css");

h1{
    font-family: "amador", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: black;
    background-color: white;
}
    .h1_change{
        color: #ff52b1;
    }

    .h1_change_blue{
        color: #001EFF;
    }
    .h1_change_orange{
        color:#FFB200 ;
    }
    .h1_change_yellow{
        color: #5B00F9;
    }
    .h1_change_about{
        color: #32D463;
    }


.line{
    width: 1px;
    height: 100vh;
    background-color: black;
    position: fixed;
    top: 0;
    left: 250px;
}


/* 0% */
/* ///////////// */


p{
    font-family: Arial;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: black;
}

    .p_font_change{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
    }

    .p_border_add{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/border.png) 60 round;
        border-image-width: 50px;
        box-sizing: border-box;
    }

    .p_border_add_blue{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/2.png) 900 round;
        border-image-width: 10;
        box-sizing: border-box; 
    }

    .p_border_add_orange{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/border_res2.png) 500 round;
        border-image-width: 100px;
        box-sizing: border-box; 
    }
    .p_border_add_yellow{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/q.png) 600 round;
        border-image-width: 100px;
        box-sizing: border-box; 
    }
    .p_border_add_about{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/abt.png) 600 round;
        border-image-width: 100px;
        box-sizing: border-box; 
    }

    


    .p_color_change{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        color: #ff52b1;
        border: 20px solid;
        border-image: url(assets/border_red.png) 60 round;
        border-image-width: 50px;
        box-sizing: border-box;
    }

    .p_color_change_blue{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/bleu.png) 900 round;
        color: #001EFF;
        border-image-width: 10;
        box-sizing: border-box; 
    }

    .p_color_change_orange{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        color:#ff66c4 ;
        border-image: url(assets/r.png) 500 round;
        border-image-width: 100px;
        box-sizing: border-box; 
    }

    .p_color_change_yellow{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        color: #5B00F9;
        border-image: url(assets/ylw.png) 600 round;
        border-image-width: 100px;
        box-sizing: border-box; 
    }
    .p_color_change_about{
        font-family: "amador", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        border: 20px solid;
        border-image: url(assets/grnn.png) 600 round;
        border-image-width: 100px;
        box-sizing: border-box; 
        color:#32D463;
    }




/* border changes */
/* ///////////// */

.border{
    opacity: 0;
}

    .border_1{
        opacity: 1;
        width: 775px;
        height: 403px;
        flex-shrink: 0;
        mix-blend-mode: hard-light;
        top: 190px;
        left: 320px;
        position: absolute;
        
    }

    .border_2{
        border: 82px dashed #FF0000;
        opacity: 1;
        width: 775px;
        height: 403px;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.00);
        mix-blend-mode: hard-light;
        top: 190px;
        left: 320px;
        position: absolute;
    }


/* footer */
/* ///////////// */

.nav_star{
    position: fixed;
    top: 85%;
    left: 90%;
    height: 10vh;
    fill: rgb(0, 0, 0);
}
    .nav_star:hover{
      rotate: 360deg;
      transition: 700ms ease all;
    }

    .nav_star_change{
        fill: #ff52b1;
    }

    .nav_star_change_blue{
        fill: #001EFF;
    }

    .nav_star_change_orange{
        fill: #FFB200;
    }
    .nav_star_change_yellow{
        fill: #5B00F9;
    }
    .nav_star_change_about{
        fill: #32D463;
    }

.nav_star_new{
    left: 250px;
    position: fixed;
    top: 85%;
    height: 10vh;
    fill: rgb(0, 0, 0);
}
.nav_star_new:hover{
    rotate: 360deg;
      transition: 700ms ease all;
}

    .nav_star_first{
        fill:#001EFF ;
    }
    .nav_star_second{
        fill: #FFB200;
    }
    .nav_star_third{
        fill: #5B00F9;
    }
    .nav_star_about{
        fill: #32D463;
    }


/* testing the grid  */

body {
    background: rgb(255, 255, 255);
  }
  
  .header {
    padding: 20px;
    margin-top: 0px;
    padding-top: 0px;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    border-bottom: 1px black solid;
  }
    .header_change{
        border-bottom: 1px #ff52b1 solid; 
    }
    .header_change_blue{
        border-bottom: 1px #001EFF solid;
    }
    .header_change_orange{
        border-bottom: 1px #FFB200 solid;
    }
    .header_change_yellow{
        border-bottom: 1px #5B00F9 solid;
    }
    .header_change_about{
        border-bottom: 1px #32D463 solid;
    }
  .main {
    height: 800px;
    display: grid;
    grid-template-columns: 40px 1fr;
    padding: 10px;
    justify-content: center;
  }

  
.nav {
    padding: 90px;
    display: flex;
    justify-content: center;
    border-right: 1px black solid;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
  }
    .nav_change{
        border-right: 1px #ff52b1 solid;
    }
    .nav_change_blue{
        border-right: 1px #001EFF solid;
    }
    .nav_change_orange{
        border-right: 1px #FFB200 solid;
    }
    .nav_change_yellow{
        border-right: 1px #5B00F9 solid;
    }
    .nav_change_about{
        border-right: 1px #32D463 solid;
    }
    input{
        rotate: 90deg;
        position: fixed;
        top: 50% ;
        transform: translate(-50%, -50%);
    }
    input:hover{
        cursor: pointer;
    }
        #slider{
            appearance: none;
            border: none;
            -webkit-appearance: none;
            width: 200px; 
            height: 20px;
        }
            #slider::-webkit-slider-runnable-track{
                background-color: #A8A8A8;
                border-radius: 50px;
                height: 30px;
                padding: 0 10px;
            }

            #slider.change_track::-webkit-slider-runnable-track {
                background-color:#ff52b1;
            }
            #slider.change_track_blue::-webkit-slider-runnable-track {
                background-color:#55ffc9;
            }
            #slider.change_track_orange::-webkit-slider-runnable-track {
                background-color:#FFB200;
            }
            #slider.change_track_yellow::-webkit-slider-runnable-track {
                background-color:#FFFF00;
            }
            #slider.change_track_about::-webkit-slider-runnable-track {
                background-color:#00FF1E;
            }

            #slider::-webkit-slider-thumb{
                -webkit-appearance: none;
                appearance: none;
                height: 15px;
                width: 15px;
                background-color: #D9D9D9;
                border-radius: 200px;
                transform: translate(0%, 40%);
            }

            #slider.change_thumb::-webkit-slider-thumb {
                background-color: rgb(255, 0, 0);
            }
            #slider.change_thumb_blue::-webkit-slider-thumb {
                background-color: #001EFF;
            }
            #slider.change_thumb_orange::-webkit-slider-thumb {
                background-color: #EC83C4;
            }
            #slider.change_thumb_yellow::-webkit-slider-thumb {
                background-color: #5B00F9;
            }
            #slider.change_thumb_about::-webkit-slider-thumb {
                background-color: #32D463;
            }

  
  .text {
    padding: 200px;
    margin-left: 200px;
    width: 800px;
  }

a{
    text-decoration: none
}
a:hover{
   cursor: pointer;
}



/* media queries  */
/* ///////////// */


@media (max-width: 1024px) {

    
    .main {
      grid-template-columns: 1fr;
      grid-template-rows: 40px 1fr;
    }

    input{
        rotate: 0deg;
        top: 0;
        border: none;
        position: sticky;
    }
    nav{
        width: 100vw;
        border: none;
        height: 10px;
        position: sticky;
    }
    p, .p_font_change, .p_border_add, .p_border_add_blue,  .p_border_add_orange ,  .p_border_add_yellow, .p_border_add_about, .p_color_change, .p_color_change_blue,  .p_color_change_orange,.p_color_change_yellow, .p_color_change_about {
        font-size: 1rem;
        padding: 2rem;
        padding-top: 0;
    };
    .text{
        padding: 0;
        margin-left: 0;
    }
    .nav_star{
       height: 3rem;
    }
    .nav_star_new{
      left: 0;
      height: 3rem;
    }
  }