@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

html {
  scroll-behavior: smooth;
}
body{
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: 'raleway', sans-serif;
  color:#1a1a1a;
  max-width: 100%;
  font-size: 1.15rem;
  background-color: rgba(255, 255, 255,0.75);
}

::selection {
  color: black;
  background: lightblue;
}

img{
  max-width: 100%;
  height: auto;
}
ul{
  padding-left: 0;
  text-decoration: none;
}
a{
  text-decoration: none;
}
header{
  background-color: #1a1a1a;
}
h1,h2,h3,h4,h5,h6,button{
  font-family: "Quicksand", sans-serif;
}

.logo{
  text-align: center;
  padding: 1rem 0;
}
.logo img{
  height: 75px;
}
.nav-items{
  background-color: #1a1a1a;
  text-align: center;
  position: fixed;
  bottom: 0;
  height: 65px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  z-index:1;
}
.nav-items li{
  list-style-type: none;
  padding:1rem 0.5rem;
  display: inline;
  position: relative;
}

.nav-items a{
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  font-family: "Quicksand", sans-serif;
}

.nav-items a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #0C7E8B;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.nav-items a:hover:after { 
  width: 100%; 
  left: 0; 
}

.hero{
  background-color:hsl(255, 0%, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding-bottom: 1rem;
  background-image: url(../images/bg.png);
  background-size: cover;
  }


.hero p {
  font-size: 3rem;
  padding: 5rem;
  max-width: 1200px;
  margin: auto;
  text-transform:initial;
  text-align: left;
  font-family: "Quicksand", sans-serif;
  
}
.tagline{
  font-size: 6rem;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 0;

}


.second{
  margin-top: 0;
  font-size: 3rem;
  font-weight: lighter;
}

.quote{
  font-weight:lighter;
  width: 90%;
}


/* projects */
.demo-project{
  padding: 2rem 0;
}

.projects h1{
  margin: 0;
  font-size: 2rem;
  margin-bottom: 0;
  padding-left: 1rem;
  color: #1a1a1a;
}
.websites{
 padding: 1rem;
 padding-bottom: 2rem;
 background-color:white;
 margin-bottom: 1rem;
 border-radius: 1rem;
 box-shadow: 2px 2px 8px rgba(230, 230, 230,0.25), 
            0px 0px 2px rgba(230, 230, 230,0.5);
}

.websites h1{
  margin-top: 0;
  font-size: 40px;
  font-weight: lighter;
}
.websites h3 span{
  color: black;
}
.websites .projects-sub .div-sub-one a img{
  border-radius: 0.5rem;
}
.div-sub-two p,.div-sub-two h3{
  margin: 0;
}
.div-sub-two .info{
  margin-bottom: 1rem;
}
.projects .project-heading{
  font-size: 3rem;
  font-weight: 300;
}
.skills{
  color:#1a1a1a;
  margin-bottom: 1rem;
  font-weight: 500;
}
.websites .yoke-btn .project-btn{
  cursor: pointer;
  border-radius: 0.5rem;
}
.second-website{
  margin-bottom: 1rem;
}
.second-website img{
  height: 100%;
  width: 100%;
}

.project-btn{
  border: 2px solid #1a1a1a;
  background-color: white;
  color: #1a1a1a;
  font-size: 1rem;
  padding: .5rem 1rem;
}
.project-btn:hover{
  color: #FF565F;

}


.about_me{
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}


.form h1{
  margin: 0;
}
form {
  padding: 1rem;
}
label{
  width: 25%;
  font-size: 1.25rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0.75rem 0.5rem;
  text-align: center;
  padding: 1.25rem 0;
  font-weight:500;
}
input{
  width: 79%;
  padding: 0 0 0 1rem;
  color: #1a1a1a;
  border-radius: 0.5rem;
  border: 1px solid #1a1a1a;
}
.name,.email,.message {
  display: flex;
  padding: 0.5rem;
  height: 4rem;
  text-transform: uppercase;
}

textarea{
  width: 100%;
  color: #1a1a1a;
  resize: vertical;
  padding: 1.25rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #1a1a1a;
}
.message label {
  width: 32.5%;
}
input[type="submit"]{
  background-color: #1a1a1a;
  margin-top: 1rem;
  font-size: 1.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 0.5rem;

}
.scroll{
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
.nav-items a:hover {
  color: #F5606B;
}
.hover-text,.hover{
  display: none;
}
.yoke-link{
  color: #00284E;
}


/* footer */

.footer-section-two{
  text-align: center;
  font-size: 1rem;
  padding: 1rem 1rem;
  margin-bottom: 3rem;
  background: #1a1a1a;
  color: #d9d9d9;
}
.icon {
  color: #0072b1;
  font-size: 2rem;
}
.div-sub-two{
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
}
/* footer */

@media screen and (min-width:700px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 1.5rem ;
  }
  header img{
    padding-left: 5rem;
  }
  .hero{
    margin-top: 0rem;
    padding-bottom: 1rem;
    align-items: center;
  }
  
  .hero p{
    text-align: center;
    padding: 8rem;
    position: relative;
    animation: hero 1.5s alternate;
    opacity: 1;
  }
  @keyframes hero {
    from {opacity: 0.25;top: -100px;}
    to {top: 0px;}
  }
  .hover-text,.hover{
    display: none;
  }
  .nav-items{
    width: 45%;
    background-color: rgba(0, 0,0, 0);
    position: relative;
    align-items: center;
    justify-content: space-evenly;
    text-align: right;
    height: auto;
    flex-direction: row;
  }
  .scroll{
    display: inline;
  }
  .projects{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding:0 1rem ;
    max-width: 1200px;
    margin: auto;
  }
  .section-one h1{
    top: 50px;
    position: sticky;
  }
  .projects-sub{
    display: block;
  }
  .div-sub-one{
    width: 100%;
  }
  .div-sub-one img:hover{
    transform: scale(1.015);
    transition: 0.75s;
  }
  .projects h1 {
    grid-column: 1/-1;
    margin-bottom: 0;
  }

  .websites{
    max-width: 1200px;
    margin: auto;
    grid-column: 1/-1;
    margin-bottom: 2rem;
  }
  
  .div-sub-two .info {
    margin-bottom: 1rem;
    font-weight:lighter;
  }

  .websites h3{
    margin: 0;

  }
  .websites a{
    grid-column: 1/2;
    grid-row: span 4;
    cursor: pointer;
  }
  .yoke-btn{
    grid-column: 2/-1 !important;
  }
  .websites p {
    grid-column: 2/-1;
    margin: 0;
  }
  .websites h3{
    font-size: 1.75rem;
  }
  .websites h4 {
    margin: 0;
    padding: 0;
  }
  .websites p a {
    color: #d9d9d9;
    text-decoration: none;
    font-size: 1.25rem;
  }
  .websites a {
    grid-row: span 3;
  }
  
  .projects .project-heading{
    font-size: 4rem;
  } 


  .hover,.hover-text{
    display: none;
  }
  .form{
    padding-bottom: 7rem;
    text-align:left ;
  }
  form{
    max-width: 1100px;
    margin:auto;
    display: flex;
    flex-direction: column;
  }
  form h1{
    font-size: 80px;
  }
  input[type="submit"]{
    margin: auto;
    margin-top: 1rem;
    width: 40%;
  }
  footer{
    text-align: center;
  }
.footer-section-two{
  margin-bottom: 0;
}
.tekk-link{
  color: #00937D;
}

} 

@media screen and (min-width:1000px) {
  header{
    padding: 0.25rem 3rem;
  }
  .projects{
    grid-template-columns: 40% 60%;
  }
  
  .second{
    font-size: 3.5rem;
  }

  .firstletter{
    margin-left: 1rem;
  }
  
  .name {
    padding-left: 0.5rem;
    font-size:5rem;
    text-transform: uppercase;
  }
  .about-images{
    grid-column-gap: 1rem;
  }
 
  /* footer */

  .hover-text,.hover{
    position: absolute;
      top: 0;
      left: 0;
      color: black;
  }
  .hover-text:hover{
    opacity: 1;
  }
  .hover:hover{
    opacity: 1;
  }
  .hover-btn{
    background-color: #003F9E;
    font-size: 1.25rem;
    color: #d9d9d9;
    padding: 1rem 2rem;
    border: none;
    cursor: pointer;
    font-weight: lighter;
  }

  .webname{
    color: #003F9E;
  }

  footer{
    grid-template-columns: 40% 60%;
  }
  /* footer */

.hover-text,.hover{
  cursor: pointer;
  background-color: #FBDF00;
  height: 100%;
  width: 100%;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s;  
}
.hover-text h1,.hover h1{
  margin: 0;
  color: #1a1a1a;
  font-weight: 300;
}

.hover-text,.hover{
  position: absolute;
    top: 0;
    left: 0;
}
.hover-text:hover{
  opacity: 1;
}
.hover:hover{
  opacity: 1;
}
.hover-btn{
  background-color: #1a1a1a;
  font-size: 1.25rem;
  color: #e6e6e6;
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  font-weight: lighter;
}


input[type="submit"]{
  width: 25%;
}

}

/* visually-hidden{clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;} */