body {
    margin: 0%;
    /* background-color: whitesmoke; */
    /* background-color: #d9d9d9; */
    background-color: #B8CDFC;
    /* background-color: #cde7f7; */
    /* font-family: 'Roboto'; */
}

@font-face {
    font-family: customFonts;
    src: url('jdIcoMoonFree.TTF')  format('truetype');
  }

.head {
    position: fixed;
    width: 100%;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: darkcyan;
    height: 140px;
}

.header_text {
    display: flex;
    flex-direction: column;
    margin-top: 1%;
    margin-left: -4%;
    height: 20%;
}

.header_text .header_topic{
    font-family:  customFonts;
    font-size: 300%;
    /* text-shadow: 1px 1px darkslategray; */
    color: aliceblue;
}

.header_text .header_strip{
    font-size: 110%;
    color: aliceblue;
    padding-left: 5px;
}

.header .logo img{
    height: 90%;
}

.header .logo {
    padding-left: 4%;
    padding-right: 0%;
    padding-top: 5px;
    padding-bottom: 0%;
    margin: 0%;
    width: 20%;
    
}


/* nav bar */
nav {
    background-color: darkslategray;
    height: 40px;
    padding-left: 15%;
    padding-top:6px ;
    width: 100%;
}

nav a{
    color: aliceblue;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    margin-left: 1%;
    font-size: 20px;
    display: inline-block;
}

nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: aliceblue;
    transition: width .4s ease-in;
  }

nav a:hover::after{
    /* border-bottom: 1px solid aliceblue; */
    width: 100%;
    
}

.head .header .menu_icon {
    display: none;
}


.head::after {
    content: "";
    position: fixed;
    /* z-index: -11; */
    /* margin-top : 3%; */
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255, 0) 100%);
    width: 100%;
    height: 3em;
  
  }


@media screen and (max-width: 600px) {
    .nav a:not(:first-child) {display: none;}
    .nav a.icon {
      float: right;
      display: block;
    }
  }

@media screen and (max-width: 600px) {
    .head{
        position: fixed;

    }

    .header {
        height: 4rem;
    }
    .header_text {
        font-size: 7px;
        padding-top: 1%;
        margin-left: 0%;
    }
    .header_text .header_topic{
        font-size: 14px;
        font-weight: bold;
        font-family:  customFonts;
        transform: scale(1, 1.5);
        display: inline-block;
    } 

    .head .header .header_strip{
        padding-top: 7px;
        width: 100%;
        font-size: 8px;
    }

    .head .header .logo{
        width:28%;
        padding-left: 1%;
    }

    .head .header .menu_icon {
        margin-top: 6%;
        margin-right: 4%;
        display: block;

    }

    .head .header .menu_icon a {
        color: aliceblue;
    }


    nav {
        display: none
    }

    .responsive {
        display:grid;
        height: 180%;
        padding-left: 8%;
        background-color: #3d8a8a;
        transition: height 0.5s;
    }
    .responsive a{
        font-size: medium;
        padding-bottom: 1.5%
    }
}


/* footer */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


.footer {
  /* position: fixed; */
  height: 160px;
  bottom: 0;
  width: 100%;
  background: linear-gradient(rgb(56, 129, 81), rgb(29, 130, 163));
  min-height: 100px;
  padding: 20px 50px;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
}

.excerpt {
  font-style: italic;
  font-size: small;
  color: #fff;

}


.social-icon,
.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  flex-wrap: wrap;
}

.footer .menu img{
    height: 30px;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size: 1rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

.menu__link:hover {
  opacity: 1;
}

.footer p {
  color: #fff;
  margin: 5px 0 5px 0;
  /* font-size: 1rem; */
  font-weight: 300;
}


@media screen and (max-width: 600px) {

  .footer {
    width: 100%;
    padding: 0%;
    height: 5%;
    margin: 0%;
  }

  .social-icon{
    padding-top: 1%;
  }

  .footer p{
    font-size: small;
  }

  .excerpt {
    font-size: small;
    padding-left: 0%;
    color: #fff;
  }

  .menu__link{
    font-size: medium;
  }
}