/* border!!!!!!!!!!!! */
/* text enhancement */
.he{
  padding: 55px;
  font-size: 30px;
  color: #131313;
    /* background-color: #e7e5e4; */
    letter-spacing: .15em;
    text-shadow:
      1px -1px 0 #767676,
      -1px 2px 1px #737272,
      -2px 4px 1px #767474,
      -3px 6px 1px #787777,
      -4px 8px 1px #7b7a7a,
      -5px 10px 1px #7f7d7d,
      -6px 12px 1px #828181,
      -7px 14px 1px #868585,
      -8px 16px 1px #8b8a89,
      -9px 18px 1px #8f8e8d,
      -10px 20px 1px #949392,
      -11px 22px 1px #999897,
      -12px 24px 1px #9e9c9c,
      -13px 26px 1px #a3a1a1,
      -14px 28px 1px #a8a6a6,
      -15px 30px 1px #adabab,
      -16px 32px 1px #b2b1b0,
      -17px 34px 1px #b7b6b5,
      -18px 36px 1px #bcbbba,
      -19px 38px 1px #c1bfbf,
      -20px 40px 1px #c6c4c4,
      -21px 42px 1px #cbc9c8,
      -22px 44px 1px #cfcdcd,
      -23px 46px 1px #d4d2d1,
      -24px 48px 1px #d8d6d5,
      -25px 50px 1px #dbdad9,
      -26px 52px 1px #dfdddc,
      -27px 54px 1px #e2e0df,
      -28px 56px 1px #e4e3e2;

}
/* border!!!!!!!!!!!!!!! */
/* jump to main */
.skip a{
  background: white;
  left: 0;
  padding: 6px;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 1;


  position: absolute;
  top: -40px;

}

.skip a:focus{
  position: absolute;
  top: 0px;
  left: 0px;
  border:2px solid black;
}

/* boder!!!!!!!!!!!! */
/* border!!!!!!!!!!!! */
body{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/image.png");
  font-size: 18px;
  margin: 0;

}
main{
  padding: 30px;
}

/* border!!!!!!!!!!!!!!! */
/* h1 appear animate */
h1{
  font-size: 50px;
  line-height: 1;
  padding: 50px 0;
  text-align: center;

  animation: appear 4s;
  -webkit-animation:appear 4s;
}

@keyframes appear {

  from{font-size:0px;}
  to{font-size: 50px;}
}
@-webkit-keyframes appear{

  from{font-size:0px;}
  to{font-size: 50px;}
}

span{
  color: BlueViolet;
}

h2{
  font-size: 32px;
  line-height: 1.5;
}


/* border!!!!!!!!!!!!!!!!!!! */
/* header */
nav li{
  display: inline;
  padding-right: 20px;
}

header{
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  background: #fff;
  border-bottom: 3px solid #50C7C7;
}
footer{
  min-height: 60px;

  width: 100%;
  bottom: 0;
  text-align: center;
  background-color: DarkBlue;
}
footer p{
  text-align: center;
  color: white;
}
.nav_links{
  display: flex;
  flex-direction:  column;
  justify-content: space-between;
  list-style: none;
  padding: 30px;
  line-height: 20px;
}

.item{
  color: BlueViolet;
  text-decoration: none;
}

.item:hover,.item:focus{
  color: black;
  text-decoration: underline;
}

.here .item{
  color: white;
  background-color: BlueViolet;
  position: relative;
  /* border-left: 5px solid black; */
}

@media all and (min-width:800px){
  header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .nav_links{
    padding: 30px;
  }
  .here .item{
    position: relative;
    left:15px;
    /* border-left: 5px solid black; */
  }
}

@media all and (min-width:1024px){
  header{
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    margin-right: 0px;
  }

  .nav_links{
    display:flex;
    flex-direction: row;

    list-style:initial;
    padding: 55px;
  }
  .here .item{
    position: relative;
    left: 0px;
  }

}

@media screen and (prefers-reduced-motion: reduce){
  html{
      scroll-behavior: auto; /* Removes scroll animation */
  }

  h1{
    -webkit-animation: none;
    animation: none;
  }
  .flip-card{
    -webkit-animation: none;
    animation: none;
  }
  .skip a{
    -webkit-transition:none;
    transition: none;
  }
}