html{

}

body{
    /*background: linear-gradient(90deg, #161413 8px, transparent 1%) center,
    linear-gradient(#161413 8px, transparent 1%) center, #292929;
    background-size: 10px 10px;*/
    cursor: none;
    background-color: black;
    color: white;
    max-width: 6000px;
}

#Acceuil_page{
    animation: fade forwards 2s;
}

.First-view{
    background-image: url("patrick-fore-H5Lf0nGyetk-unsplash.Webp");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  padding-bottom: 5%;
}


.mainNavbar {
    font-family: Montserrat, sans-serif;
    font-size: 2vw;
    font-weight: 100;
    font-style: normal; }

.navbar-brand {
    margin-left: 5%;}

.navbar-brand img:hover {
    box-shadow: goldenrod 0px 0px 22px 4px; }

.navbar-brand img {
    height: 150px;
    width: 175px;
    border-radius: 100%; }

.navbar-nav {
    width: 65%;
}

.nav-item{
    margin-left: 4%;
}

.navbar-toggler-icon{
    border: 2px solid goldenrod;
    height: 60px;
    width: 60px;
    background-color: black;
}


.nav-link {
    color: white;
}

.nav-item a:hover {
    color: goldenrod;
    cursor: none;
}


.First_text{
    margin-top: 8%;
    color: white;
    margin-left: 5%;
    padding-right: 20%;
}

.First_text h1{
    font-size: 8vw;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    color: goldenrod;
    border-right: .15em solid goldenrod;
    width: max-content;
}
.First_text h2{
    font-size: 8vw;
    color: goldenrod;
    padding-bottom: 2%;
    border-right: .15em solid goldenrod;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    width: max-content;
    opacity: 0;
}



.First_text p1{
    font-size: 2vw;
    animation-delay: 3s;
    opacity: 0;
}

.First_text_paragraph{
    text-align: justify;
}

.See_more_container{
    margin-top: 2%;
}

.See_more{
    font-size: 18px;
    text-decoration: none;
    background-color: black;
    color: goldenrod;
    border: solid 2px goldenrod;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 2%;
    padding-left: 2%;
    border-radius: 30px;
}


.See_more:hover{
    background-color: goldenrod;
    color: black;
    cursor: none;
}


.Second-view{
    background-image: url("giammarco-zeH-ljawHtg-unsplash.Webp");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    min-height: 600px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  padding-bottom: 5%;
  padding-top: 5%;

}

.divider{
    height:50px;
    font-size:36px;
    color: goldenrod;
    padding-top: 2%;
    background-image:linear-gradient(to right,black,goldenrod);
    text-align: center;
}

#mobile_1_divider{
    height: 100px;
    display: none;
    padding-bottom: 0;
}




.keyword_content{
    /**display: flex;**/
    background: none;
    color: white;
}

.keyword_list{
    display: grid;
    list-style-type: none;
    column-gap: 2%;
}

.keyword_list li{
    font-size: 20px;
    text-align: center;
}

.keyword_list li img{
    width: 300px;
    height: 300px;
    margin-top: 10%;
}

.keyword_list li h1{
    text-align: center;
    padding-bottom: 4%;
    font-size: 30px;
}


.keyword_list li:nth-child(1){
    grid-column-start: 0;
    grid-column-end: 1;
    grid-row-start: 0;
    grid-row-end: 1;
    border-right: 1px solid white;
    padding-right: 1%;
    opacity: 0;
    animation-delay: 0.25s;
}

.keyword_list li:nth-child(2){
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 0;
    grid-row-end: 1;
    border-right: 1px solid white;
    padding-right: 1%;
    opacity: 0;
    animation-delay: 0.5s;

}
.keyword_list li:nth-child(3){
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 0;
    grid-row-end: 1;
    opacity: 0;
    animation-delay: 0.75s;
    border-right: 1px solid white;
    padding-right: 1%;
}

.keyword_list li:nth-child(4){
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 0;
    grid-row-end: 1;
    opacity: 0;
    animation-delay: 1.00s;
}

.Keyword_element_animate{
    animation: fade 1s forwards;
}

.keyword_mobile_view{
    display:none;
    color: white;
    text-decoration: none;
}

.keyword_mobile_view:hover{
    border: 2px solid goldenrod;
}

.Actualités{
    margin-top: 5%;
    padding-left: 5%;
    padding-right: 10%;
    padding-bottom: 2%;
}

.Actualités h1{
    color: goldenrod;
    font-size: 5vw;
    padding-bottom: 5%;
}



.blogue_title{
    color:black;
    font-size: 2vw;
    text-align: center;
    padding-bottom: 2%;
}

.blogue_title:first-child{
    padding-bottom: 15%;
}

.Blogue_list{
    display: inline-flex;
    font-size: 2vw;
    list-style-type: none;
    margin-right: 5%;
}

.Blogue_list li{
    margin-left: 5%;
}



.blogue_container{
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(6.5px);
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    text-align: center;
    padding:2%;
    color: black;
    width: 30%;
}

/**
.blogue_container:hover{
    color: black;
    background:goldenrod ;
}**/

.blogue_img{
    width: 100%;
    height: 300px;
}

.blogue_link{
    color: goldenrod;
}

.blogue_link:hover{
    color: blue;
}

#blogue_1{
    padding-bottom: 15%;
}



.Partenaires{
    margin-top: 5%;
    padding-left: 5%;
    padding-right: 10%;
    padding-bottom: 2%;
}

.Partenaires h1{
    color: goldenrod;
    font-size: 5vw;
    padding-bottom: 5%;
}

.Partenaires h2{
    text-align: center;
    color: white;
    font-size: 5vw;
}




/*A propos*/

#A_propos_page{
    background-image: url("conference.jpeg");
    background-size: 100% 100%;
    display: none;
    animation: comeFromLeft 1s forwards;
}

#A_propos_page h1{
    text-align: center;
    color: goldenrod;
    font-size: 8vw;
}

.about_us {
  padding-top: 5%;
  font-family: "Open Sans", sans-serif;
  display: grid;
  padding-bottom: 2%;
  padding-right: 12%;
  padding-left: 8%;
  grid-column-gap: 5%; }

.about_us_text {
    color: white;
    grid-column-start: 0;
    grid-column-end: 1;
    font-size: 1.5vw;
    text-align: justify;
}

.about_us_text h2{
    font-size: 2vw;
    text-align: left;
    color: goldenrod;
}

.about_us_img {
    grid-column-start: 1;
    grid-column-end: 2; }

.about_us_img img {
    min-height: 500px;
    max-height: 600px;
    max-width: 400px;
    min-width: 300px;
    will-change: transform; }

@media screen and (max-width:800px) {
    .about_us {
    padding-top: 10%;
    display: block;   }
    .about_us_text h1 {
    font-size: 24px;   }
    .about_us_text p1 {
    font-size: 14px;   }
    .about_us_text {
      text-align: center;
      margin-top: 0;
      margin-left: 0;
      padding-right: 10%;
      padding-left: 10%;   }
      .about_us_img {
        margin-top: 7%;
        margin-left: 5%;   }
        .about_us_img img {
          width: 350px;
          height: 400px;   }
}

/*Service*/

#Service_Page{
    display: none;
    animation: comeFromLeft 2s forwards;
}

.Service_first_view{
    background-image: url("leon-seibert-9i5eqBarv-k-unsplash (1).Webp");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 500px;
    padding-bottom: 5%;
}

.Service_second_view{
    padding-top: 5%;
    background-image: url("matthias-mullie-VAxCHgJvZ0g-unsplash.Webp");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 500px;
    padding-bottom: 5%;
    display: flex;
    width: 100%;
}

.amed_rous{
    margin-top: 15%;
    width: 550px;
    height: 500px;
    margin-left: 30%;
}

#rendez-vous{
    margin-left: 10%;
    padding-bottom: 2%;
}


.service_title{
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
}


.Gestion_box_list{
    list-style-type: none;
    display:block;
    padding-right: 5%;
    margin-top: 7%;
}

.Gestion_box_container{
    /*width: 30%;*/
    color:white;
    padding: 5%;
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(6.5px);
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.Gestion_box_name{
    font-size: 5vw;
    color: goldenrod;
    padding-bottom: 2%;
    text-decoration: underline;
}

.Gestion_box_name:hover{
    color: white;
}


.Gestion_box_description{
    font-size: 2vw;
}

.Gestion_box_description li{
    padding-bottom: 2%;
}





/**.Gestion_box_list li:nth-child(1) h1{
    animation-delay: 0.5s;
}
.Gestion_box_list li:nth-child(2) h1{
    animation-delay: 0.5s;
}
.Gestion_box_list li:nth-child(3) h1{
    animation-delay: 0.5s;
}
.Gestion_box_list li:nth-child(4) h1{
    animation-delay: 0.5s;
}
.Gestion_box_list li:nth-child(5) h1{
    animation-delay: 0.5s;
}

.Gestion_box_list li:nth-child(1) p2{
    animation-delay: 0.5s;
}

.Gestion_box_list li:nth-child(2) p2{
    animation-delay: 0.75s;
}

.Gestion_box_list li:nth-child(3) p2{
    animation-delay: 1s;
}

.Gestion_box_list li:nth-child(4) p2{
    animation-delay: 1.25s;
}

.Gestion_box_list li:nth-child(5) p2{
    animation-delay: 1.5s;
}


.Gestion_box_list li:nth-child(1){
    animation-delay: 1.5s;

}
.Gestion_box_list li:nth-child(2){
    animation-delay: 0.5s;


}
.Gestion_box_list li:nth-child(3){
    animation-delay: 0.5s;

}**/


.border-trace{
    animation: border-tracing 2s forwards;
}


/* Chrome, Safari, Opera */
/**@-webkit-keyframes border-tracing {
    0%{
        border-top: solid 2px;
        border-image-source:linear-gradient(to right, black 90% ,white 10% );
        border-image-slice: 1;
    }
    12.5%{
        border-top: solid 2px;
        border-image-source:linear-gradient(to right, black 0% ,white 100%);
        border-image-slice: 1;

    }
    25%{
        border-top:solid black 2px;
        border-left: solid 2px;
        border-image-source:linear-gradient(to top, black 90% ,white 10% );
        border-image-slice: 1;
    }
    37.5%{
        border-top:solid black 2px;
        border-left: solid 2px;
        border-image-source:linear-gradient(to top, black 0% ,white 100%);
        border-image-slice: 1;
    }
    50%{
        border-top:solid black 2px;
        border-left:solid black 2px;
        border-bottom: solid 2px;
        border-image-source:linear-gradient(to left, black 90% ,white 10% );
        border-image-slice: 1;
    }
    62.5%{
        border-top:solid black 2px;
        border-left:solid black 2px;
        border-bottom: solid 2px;
        border-image-source:linear-gradient(to left, black 0% ,white 100%);
        border-image-slice: 1;
    }
    75%{
        border-top:solid black 2px;
        border-left:solid black 2px;
        border-bottom:solid black 2px;
        border-right: solid 2px;
        border-image-source:linear-gradient(to bottom, black 90% ,white 10% );
        border-image-slice: 1;
    }
    77.5%{
        border-top:solid black 2px;
        border-left:solid black 2px;
        border-bottom:solid black 2px;
        border-right: solid 2px;
        border-image-source:linear-gradient(to bottom, black 0% ,white 100%);
        border-image-slice: 1;
    }
    80%{
        border-image-source:none;
        border-top:solid black 2px;
        border-left:solid black 2px;
        border-bottom:solid black 2px;
        border-right: 2px solid white;
    }
    100%{
        color:white;
        padding: 5%;
        background: rgba(255, 255, 255, 0);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(6.5px);
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        transform: translateX(-400%);
        font-size: 16px;
    }
}**/

/*Contact*/

#Contact_Page{
    display: none;
    animation: Scale 2s forwards;
    background-image: url("julian-hochgesang-psGV5KhidlY-unsplash.Webp");
    background-size: 100% 100%;
}

.contact_info{
    padding-left: 10%;
    display: flex;
    padding-bottom: 5%;

}

.contact_info h1{
    font-size: 35px;
}

#infos_left{
    float: left;
    font-size: 20px;
}

.Email_Form p1{
    font-size: 20px;
}

.Email_Form h1{
    color: goldenrod;
    font-size: 3vw;
}

#General_info{
    margin-top: 5%;

}

#schedule th{
    font-size: 20px;
}

#General_info th{
    font-size: 20px;
}
#schedule{
    border-collapse: separate;
}

#schedule caption{
    font-size: 30px;
    caption-side: top;
    color: white;
}


#infos_right{
    margin-left: 5%;
    animation: forwards 3s fade;
}

#google_map{
}

.Email_Form label input{
    width: 450px;
}

.contact_button{
    background-color: goldenrod;
    color: black;
    border: none;
    padding: 5px;
    width: 200px;
}

.contact_button:hover{
    background-color: black;
    color: goldenrod;
    border:solid 1px black;
}

/**#l1{
    animation: 1s linear comeFromLeft;
}

#l2{
    animation: 1.5s linear comeFromLeft;
}

#l3{
    animation: 2s linear comeFromLeft;
}

#l4{
    animation: 2.5s linear comeFromLeft;
}

#l5{
    animation: 3s linear comeFromLeft;
}**/



@media screen and (max-width: 1300px){
    .contact_info{
        display: block;
    }
    #contact_title{
        /*font-size: 40px;*/
    }
    #infos_right{
        margin-left: 0;
        float: none;
    }

    #infos_left{
        padding-right: 2%;
        float: none;
    }

    #google_map{
        width:450px;
    }
}



.credit {
  background-color: black;
  color: white;
  padding-top: 2%;
  padding-left: 5%;
  padding-right: 5%;
  font-family: "Playfair Display", serif;
  display: flex;
}

.logo_img img{
    height: 175px;
    width: 175px;
}


.credit_col_1 {
    list-style-type: none;
    width: 45%;
    float: left;
}

.credit_col_2 {
    margin-top: 10%;
    float: right;
    list-style-type: none;
    font-size: 25px;
}

.credit_logo {
    list-style-type: none;
    display: flex;
}

#Book_your_place {
    border-bottom: 1px solid grey;
    font-size: 40px;
}

#Barber_credit {
    font-size: 25px;
    color: #9c9c9c;
}

.credit_col_1 li {
    padding-bottom: 3%;
    font-size: 40px;
    padding-right: 10%;
}

#second_li {
    padding-bottom: 2%;
}

.credit_col_3 {
    margin-top: 10%;
    float: right;
    list-style-type: none;
    margin-left: 5%;
    font-size: 25px;
}

.credit_col_3 h1, .credit_col_2 h1 {
    border-bottom: solid 1px grey;
    color: white;
}

.credit_col_2 li, .credit_col_3 li {
    padding-bottom: 5%;
    color: white;
}

.Credit_Barber {
    color: goldenrod;
    font-size: 20px;
    border-radius: 30px;
    border: solid 1px goldenrod;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    text-decoration: none;
}

.Credit_Barber:hover {
    background-color: goldenrod;
    color: black;
}

.credit_logo li a {
    color: white;
    text-decoration: none;
}

.credit_logo li a:hover {
    color: goldenrod;
}

.copyright {
    background-color:black;
    color: white;
    text-align: center;
    padding-bottom: 2%;
}

.credit_col_2 li a {
    text-decoration: none;
    color: white;
}

.credit_col_2 li a:hover {
    color: blue;
    text-decoration: underline;
}

/**Articles**/


#article_1{
    display: none;
    background-image: url("giammarco-zeH-ljawHtg-unsplash.Webp");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding-bottom: 5%;
    padding-top: 5%;
}

.article_content{
    padding-right: 10% ;
    padding-left:10% ;
}



.article_title{
    font-size: 4.5vw;
    color: goldenrod;
    text-align: center;
    padding-bottom: 5%;
}

.a_first_paragraph{
    text-align:justify;
    font-size: 2.5vw;

}

.a1_5_reasons{
    margin-top: 2%;
    font-size: 3vw;
    color: silver;
    padding-bottom: 5%;
    text-align: justify;
}

.a1_5_reasons li{
    margin-top: 5%;
}


.a1_5_reasons h2{
    color: silver;
    font-size: 3vw;
}

.a1_5_reasons p2{
    font-size: 2.5vw;
    color: white;
    text-align: justify;
}

.article_last_paragraph{
    font-size: 2.5vw;
    text-align: justify;
}

.a_signature{
    font-size: 1.5vw;
    color: goldenrod;
    margin-top: 5%;
}




#article_2{
    display: none;
    background-image: url("giammarco-zeH-ljawHtg-unsplash.Webp");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding-bottom: 5%;
    padding-top: 5%;

}

.a2_first_list{
    margin-top: 2%;
    font-size: 2.5vw;
    margin-left: 5%;
    text-align: justify;
}


.a2_second_list h3{
    color: silver;
}


.a2_second_list{
    font-size: 3vw;
    text-align: justify;
}

.a2_second_list p{
    font-size: 2.5vw;
}

.a2_third_list{
    font-size: 3vw;
    margin-top: 5%;
    list-style: none;
    text-align: justify;
}

.a2_third_list h5{
    font-size: 2.5vw;
    color: silver;
    text-decoration: underline;
}

.a2_third_list li{
    font-size: 2.5vw;
    padding-bottom: 2%;
}



@media screen and (max-width: 775px) {
    .credit {
        display: block;
    }
    .credit_col_1 {
        float: none;
        width: 100%;
        text-align: center;
        font-size: 30px;
    }
    .credit_col_1 li {
        padding-right: 0;
    }
    .credit_logo li {
        padding-right: 10%;
    }
    #Book_your_place {
        font-size: 20px;
    }
    .credit_logo {
        margin-left: 10%;
    }
    .credit_col_2 {
        float: none;
        width: 100%;
        text-align: center;
        font-size: 20px;
    }
    .credit_col_3 {
        float: none;
        width: 100%;
        text-align: center;
        margin-left: 0;
        font-size: 20px;
    }
    .credit {
        padding-bottom: 10%;
    }
    .copyright {
        text-align: center;
    }
}



/*Mobie view*/

@media screen and (max-width:1000px) {
    body{
        cursor: pointer;
    }

    .mainNavbar{
        font-size: 35px;
        font-weight: 500;
    }


    .inner-cursor{
        display: none;
    }

    .outer-cursor{
        display: none;
    }

    .First-view{
        background-size: 100% 100%;
        background-attachment: scroll;
    }

    .First_text p1{
        font-size: 21px;
    }

    .See_more{
        font-size: 21px;
    }

    .Second-view{
        background-size: 100% 100%;
        background-attachment: scroll;
    }

    .keyword_list{
        /*display: block;
        margin-right: 2.5%;*/
    }

    .about_us_text h1 {
        font-size: 25px;
    }

    .about_us_text p1{
        font-size: 20px;
    }

    .about_us_text p2{
        font-size: 20px;
    }

    .Gestion_box_description{
        font-size: 25px;
    }

    /*.keyword_list li:nth-child(1){
        border-right: none;
        border-bottom: 2px solid goldenrod ;
        padding-right: 30%;
        padding-left: 30%;
        padding-bottom: 2%;

    }

    .keyword_list li:nth-child(2){
        border-right: none;
        border-bottom: 2px solid goldenrod ;
        padding-right: 30%;
        padding-left: 30%;
        margin-top: 2%;
        padding-bottom: 2%;
    }

    .keyword_list li:nth-child(3){
        border-right: none;
        border-bottom: 2px solid goldenrod ;
        padding-right: 30%;
        padding-left: 30%;
        margin-top: 2%;
        padding-bottom: 2%;
    }

    .keyword_list li:nth-child(4){
        border-right: none;
        padding-right: 30%;
        padding-left: 30%;
        margin-top: 2%;
        padding-bottom: 2%;
    }*/

    .keyword_list{
        column-gap: 0;
    }

    .keyword_list li:nth-child(1){
        border-right: 2px solid goldenrod;
        border-bottom: 2px solid goldenrod ;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 0;
        grid-row-end: 1;
        padding-right: 0;

    }

    .keyword_list li:nth-child(2){
        border-right: none;
        border-bottom: 2px solid goldenrod ;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 0;
        grid-row-end: 1;
        padding-right: 0;
    }

    .keyword_list li:nth-child(3){
        border-right: none;
        border-right: 2px solid goldenrod ;
        grid-column-start: 1!important;
        grid-column-end: 2!important;
        grid-row-start: 1;
        grid-row-end: 2;
        padding-top: 5%;
        padding-right: 0;
    }

    .keyword_list li:nth-child(4){
        border-right: none;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        padding-top: 5%;
        padding-right: 0;
    }


    /*.Blogue_list{
        display: block;
        margin-left:22.5%
    }
    .Blogue_list li:first-child{
        margin-top: 0;
    }
    */

    .Blogue_list{
        width: 100%;
    }

    .Blogue_list li{
        margin-left: 5%;

    }

    .blogue_container{
        margin-top: 5%;
        width: 70%;
    }
    
    /*#blogue_1{
        padding-bottom: 0;
    }*/

    .Service_second_view{
        display: block;
    }

    #rendez-vous{
        text-align: center;
    }

    .amed_rous{
        margin-left: 25%;
    }

    .keyword_mobile_view{
        display: block;
    }

    .keyword_computer_view{
        display: none;
    }

    .Actualités{
        margin-top: 0;
        background-image: url("matthias-mullie-VAxCHgJvZ0g-unsplash.Webp");
        background-size: 100% 100%;
        padding-top: 2%;
    }

    .Actualités h1{
        display: none;
    }

    #mobile_1_divider{
        display: block;
    }



    /*.keyword_list li img{
        width: 150px;
        height: 150px;
    }*/

    #real_see_more{
        display: none;
    }

    #Barber_credit{
        font-size: 18px;
    }

    .Credit_Barber{
        font-size: 16px;
    }

    #Contact_Page{
        animation: Swing 1s ease 0s 1 normal forwards;
    }

}

/**EMAIL**/

.Email_flash_background{
    background-image: url("patrick-fore-H5Lf0nGyetk-unsplash.Webp");
    background-size: 100% 100%;
    padding-top: 5%;
    padding-bottom: 10%;
}

.Email_flash_head{
    text-align: center;
    font-size: 10vw;
    padding-bottom: 10%;
}

.Email_flash_link{
    text-decoration: none;
    margin-left: 40%;
}

.Email_flash_link button{
    border-radius: 30px;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 5%;
    padding-right: 5%;
    border: 2px solid goldenrod;
    background-color: black;
    color: goldenrod;
}

.Email_flash_link button:hover{
    background-color: goldenrod;
    color: black;
}

#flash_bad{
    font-size: 5vw;
    color:orangered;
    margin-top: 10%;
}




/*Special effects*/

.inner-cursor{
    position: fixed;
    left: 10px;
    width: 20px;
    height: 20px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.5s, height 0.5s;
}

.inner-cursor.grow{
    width: 40px;
    height: 40px;
    transition: width 0.5s, height 0.5s;
}

.outer-cursor{
    position: fixed;
    left: 10px;
    width: 50px;
    height: 50px;
    transform:  translate(-50%, -50%);
    border:  1px solid #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    transition: 0.0s;
    border-radius: 50%;
}








.typing_1{
    animation:
    typing 2s steps(50,end),
    blink-caret .75s step-end infinite,
    remove-blink-caret forwards 8s;
}

.typing_2{
    animation:
    typing-2 forwards 2s steps(50,end),
    blink-caret .75s step-end infinite,
    remove-blink-caret forwards 10s;
    animation-delay: 2s;
}


@keyframes typing {
  from { width: 0 }
  to { width: 70% }
}

@keyframes typing-2 {
  from { width: 0 }
  to { width: 55%;
       opacity: 1; }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: goldenrod }
  50% { border-color: black; }
}

@keyframes remove-blink-caret {
    0%{

    }
    100%{
        border: none;
    }

}

@keyframes fade {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

  @keyframes comeFromLeft{
    0% {
      transform: translate(-100%);   }
      100% {
        transform: translate(0);   }
}



@keyframes comeFromRight{
    0% {
      transform: translate(100%);   }
      100% {
        transform: translate(0);   }
}


@keyframes comeFromTop {
    0% {
        opacity: 0;
        transform: rotateX(-100deg);
        transform-origin: top;
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg);
        transform-origin: top;
    }
}

@keyframes Scale {
	0% {
		transform: scale(2);
	}

	100% {
		transform: scale(1);
	}
}


.fade{
    animation: fade forwards 2s;
}

@keyframes Swing  {
	0% {
		opacity: 0;
		transform: rotateX(100deg);
		transform-origin: bottom;
	}

	100% {
		opacity: 1;
		transform: rotateX(0);
		transform-origin: bottom;
	}
}

/**stupid zoom**/


@media screen and (min-width:1800px){
    .divider{
        height: 300px;
    }
}