/* V3.1 Release 26/01/22 */

/* fonts (Patrick Hand + Amatic Sc+ Montserrat Alternates )*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Kaushan+Script&family=Merriweather:wght@300&family=Montserrat+Alternates:wght@300&family=Patrick+Hand&display=swap');

/*====================Colors (Light Theme)=====================*/
.light {
    --clr-bg: #fcfcfc;
    --clr-bg-alt: #fff;
    --clr-fg: #555;
    --clr-fg-alt: #444;
    --clr-primary: #000B49;
    --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
  
::-moz-selection {
    background: var(--clr-primary);
    color: var(--clr-bg);
}

/*====================global styles=====================*/

* {
    padding: 0;
    border: 0;
    background-color: inherit;
    color: inherit;
    font-family: inherit;
}

html {
    scroll-behavior: smooth;
}

body{
    text-align: center;
    margin: 0;
    font-family: 'Patrick Hand', cursive;
    line-height: 1.5;
    color: var(--clr-primary);
    background-color: var(--clr-bg);
    
}

h1{
    font-family: 'Amatic SC', cursive;
}

h2{
    font-family: 'Montserrat Alternates', sans-serif;
}

h3{
    font-family: 'Montserrat Alternates', sans-serif;
}

hr{
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

ul {
    list-style-type: none;
}

button {
    cursor: pointer;
}

a,a:visited{
    color: var(--clr-primary);
    text-decoration: none;
}

/*===================buttons and links===================*/

/* NORMAL LINKS */
.link {
    color: var(--clr-primary);
    padding: 0 0 0.3em 0;
    position: relative;
}
  
.link:hover {
    color: var(--clr-primary);
}
  
.link::before {
    content: "";
    display: inline;
    width: 0%;
    height: 0.2em;
    position: absolute;
    bottom: 0;
    background-color: var(--clr-primary);
    transition: width 0.2s ease-in;
}
  
.link:hover::before,
.link:focus::before {
    width: 100%;
}

/* NAV LINKS */
.link--nav {
    color: var(--clr-fg);
    font-weight: 500;
}

.link--icon {
    color: var(--clr-fg);
    font-size: 1.2rem;
}

/* BUTTON */
.btn {
    display: block;
    padding: 0.8em 1.4em;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: lowercase;
    transition: transform 0.2s ease-in-out;
}
  
.btn--outline {
    color: var(--clr-primary);
    border: 2px solid var(--clr-primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
  
.btn--outline:focus,
.btn--outline:hover {
    color: var(--clr-bg);
}
  
.btn--outline:before {
    content: "";
    position: absolute;
    background-color: var(--clr-primary);
    right: 100%;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: -1;
    transition: right 0.2s ease-in-out;
}
  
.btn--outline:hover::before,
.btn--outline:focus::before {
    right: 0;
}
  
.btn--plain {
    text-transform: initial;
    background-color: var(--clr-bg-alt);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
    border: 0;
}
  
.btn--plain:hover {
    transform: translateY(-4px);
}
  
.btn--icon {
    padding: 0;
    font-size: 1.2rem;
}
  
.btn--icon:hover,
.btn--icon:focus {
    color: var(--clr-primary);
}
  
.btn--icon:active {
    transform: translateY(-5px);
}
  
/*===========HEADER LAYOUT (NAV PART)===========*/
  
.center {
    display: flex;
    align-items: center;
}
  
.header {
    height: 6em;
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
    justify-content: space-between;
}

.nav__list {
    margin-right: 1.5em;
    display: flex;
}
  
.nav__list-item {
    margin-left: 1.5em;
}
  
.nav__hamburger {
    display: none;
    width: 1em;
}

/*===========PROJECTS LAYOUT===========*/
.projects__grid {
    max-width: 1000px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 2em;
}
  
.project {
    padding: 2em;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s linear;
}
  
.project:hover {
    transform: translateY(-7px);
}
  
.project__description {
    margin-top: 1em;
}
  
.project__stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.2em 0;
}
  
.project__stack-item {
    margin: 0.5em;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--clr-fg-alt);
}
  
.project .link--icon {
    margin-left: 0.5em;
}

/*===========SKILLS LAYOUT===========*/
.skills__list {
    max-width: 450px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  
.skills__list-item {
    margin: 0.5em;
}

/*===========SCROLL TOP LAYOUT===========*/
.scroll-top {
    display: none;
    position: fixed;
    bottom: 1em;
    right: 2em;
    background-color: transparent;
    font-size: 1.8rem;
    transition: transform 0.2s ease-in-out;
}

/*===========EDUCATION LAYOUT===========*/
.education{
    padding: 30px;
    margin: 30px;
    background-color: rgb(238, 251, 255);
    border-radius: 20px;
    text-align: left;
}
.education-topic{
    padding: 10px;
    border-left: 1px solid rgba(137, 130, 247, .2);
}
.container{
    padding-left: 5%;
    display: inline-block;
}
.education-item{
    color: gray;
}

/* ===============Contents=============== */
/* span */
.web{
    text-decoration: underline;
}
/* skill */
.skill-row, .skills{
    margin-top: 30px;
}
/* footer */
footer p,h2{
    padding: 10px;
}

/* ===============Contact Me Button=============== */
.contact-me-btn {
    -webkit-border-radius: 60;
    -moz-border-radius: 60;
    border-radius: 60px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    color: #ffffff;
    font-size: 12px;
    background: #000B49;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}
  
.contact-me-btn:hover {
    background: #064663;
    background-image: -webkit-linear-gradient(top, #064663, #685ad6);
    background-image: -moz-linear-gradient(top, #064663, #685ad6);
    background-image: -ms-linear-gradient(top, #064663, #685ad6);
    background-image: -o-linear-gradient(top, #064663, #685ad6);
    background-image: linear-gradient(to bottom, #064663, #685ad6);
    text-decoration: none;
}

/* ==============Image Animations================ */
img {
-webkit-animation: img 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: img 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes img {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

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

}

@keyframes img {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

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

}

/* ===============RESPONSIVE=============== */
@media (max-width: 600px) {
    .header {
        height: 6em;
    }

    .nav__list {
      flex-direction: column;
      padding: 1em 0;
      position: absolute;
      right: 0;
      left: 0;
      top: 5em;
      background-color: var(--clr-bg);
      width: 0;
      overflow: hidden;
      transition: width 0.2s ease-in-out;
    }
  
    .display-nav-list {
      width: 100%;
    }
  
    .nav__list-item {
      margin: 0.5em 0;
    }
  
    .nav__hamburger {
      display: flex;
      margin-left: 0.8em;
    }
    .prlan{
        font-size: medium;
    }
    
    .projects__grid {
        max-width: 300px;
    }
    .scroll-top {
      bottom: 1em;
      right: 1em;
      font-size: 1rem;
    }

    .education-topic{
        font-size: small;
    }

    .education-item{
        font-size: smaller;
    }
}