html {
  scroll-behavior: smooth;
  overflow-x: hidden;
   width:100vw;
}
body {
  background-color: #121212 !important;
  margin: 0;
  width:100vw;
  overflow-x: hidden;
  font: normal 75% Arial, Helvetica, sans-serif;
  font-family: 'Alegreya', serif;
}
canvas {
  display: block;
  vertical-align: bottom;
}



/* particles.js container */
#particles-js {
  position: absolute;
  width: 100%;
  height: 180%;
  /* top: 80px; */
  left: 0;
  background-position: 50% 50%;
  z-index: 1
}






/* NAV-BAR*/
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  margin: auto;
}
.logo {
  color: #f2f8f87b;
  font-size: 25px;
}
nav {
  margin-top: 20px;
  z-index: 2;
}
.nav-link {
  margin-left: 10px;
  margin-right: 10px;
  font-weight: bolder;
  color: #767772;
  text-decoration: none;
  font-size: 30px;
  display: inline-block;
  position: relative;
}
.nav-link:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #bc6249;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}




/* HEADER*/
.header {
  font-weight: bolder;
  font-size: 80px;
  width: 400px;
  color: #f7f2f297;
}
.headerPhoto {
  margin: 100px 0px 100px 0px;
}
#header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 30px;
}




/* PROFILE*/
.profile {
  font-size: 30px;
}
.content {
  color: white;
  font-size: 30px
}
.container-skills {
  color: #f2f8f87b;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 100px auto;
}
.all-skills{
   padding:6px;

text-align:center
  }
.certificates-title {
  color: #f7f2f297;
  text-align: center;
  font-size: 40px;
}
.certificates-block {
  display: flex;
  justify-content: space-around;
}
.container-resume {
  margin-bottom: 100px;
}
.resume-title {
  color: #f7f2f297;
  text-align: center;
  font-size: 40px;
}
.resume {
  text-align: center;
}




/* PROJECTS*/


.projects {
  color: #f7f2f297;
  text-align: center;
  font-size: 60px;
  flex-direction: row;
  margin-bottom: 500px;
}
video{
  margin: auto;
}
.project-item {
  position: relative;
  width: 100%;
  max-width: 600px;
}
.project-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  text-align: center;
  opacity: 0;
  width: 315px;
  font-size: 30px;
  color: white;
  transition: transform 0.25s ease-out;
  background-color: rgba(88, 87, 87, 0.805);
  box-shadow: 0 0 15px 10px rgba(88, 87, 87, 0.2);
}

.project-item:hover .project-desc {
  opacity: 1;
}
.project-title {
  margin-top: 200px;
}
.learnMore{
  color: #e7e4e4;
  text-decoration: none;

}
.iconRight{
  width: 24px;
  height: 24px;
  margin: auto;
  background-color: white;
}
.projectSection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: auto;
padding: 50px;
}
.each-video{
  width: 315px;
  height: 500px;
}





























/* CONTAKT section */
.container-contact {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin: 300px auto 0px auto;
}
.contscts {
  color: #f7f2f297;
  text-align: center;
  font-size: 60px;
  flex-direction: row;
}
.media-icons {
  text-align: center;
  display: flex;
  width: 800px;
  margin: auto;
  justify-content: space-around;
  margin-bottom: 400px;
}
.fa-4x {
  color: white;
}
.img-contact {
  width: 600px;
}
.section_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: -300px auto;
}
.form {
  display: flex;
  flex-direction: column;
  margin-left: 200px;
  color: white;
}
textarea {
  padding: 5px;
  font-size: 25px;
  font-family: 'Alegreya', serif;
  width: 400px;
  margin: 20px;
}
input {
  padding: 5px;
  margin: 20px;
  font-size: 25px;
  font-family: 'Alegreya', serif;
  width: 400px;
}
.btn-submit {
  border-radius: 20px;
  width: 200px;
  font-size: 25px;
  margin: auto;
  padding: 5px;
  background-color: #bc6249
}
.btn-submit:hover {
  background: #a2efeb86;
  color: rgb(248, 231, 231);
}





/* FOOTER*/
.footer {
  height: 75vh;
  width: 100vw;
  background-color: #222;
  overflow: hidden;
}
.footer-container {
  height: 75vh;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: black;
  font-family: 'Alegreya', serif;
}
.footer-par {
  padding: 20px;
  color: white;
  font-size: 20px;
}
.footer-color {
  color: #767772;
}
.contact-list-footer{
display: flex;
flex-direction: column;
}
.adress{
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #f0f0f0;
}
.par{
  margin-left: 10px;
}
a{
  text-decoration: none;
}

@media all and (max-width:1300px) {
  .projectSection {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width:1000px) {
  .projectSection {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------max-width:800px------------*/
@media all and (max-width:800px) {
  .logo {
    text-align: center;
    color: #f2f8f87b
  }
  header {
    display: flex;
    flex-direction: column;
  }
  nav {
    text-align: center;
  }
  .header {
    font-size: 50px;
    width: 100px;
  }
  .headerPhoto {
    width: 300px;
    height: 300px;
  }
  .image {
    width: 500px;
  }
  .media-icons {
    width: 500px;
  }
  .form {
    margin-left: 0px;
  }
  .each-video{
    width: 250px;
    height: auto;
  }
  .section_info {
    display: flex;
    flex-direction: column;
  }
  h3 {
    margin-bottom: 0px;
    margin-right: 2px;
  }
  .projectSection {
    grid-template-columns: repeat(2, 1fr);
  }
}





/* ------------max-width:500px------------*/
@media all and (max-width:500px) {
  .header {
    font-size: 40px;
    width: 300px;
    margin-top: 100px;
    margin-left: 0px;
  }
  .headerPhoto {
    margin: 0px 0px 0px 0px;
  }
  #header {
    flex-direction: column;
  }
  .profile {
    font-size: 20px;
  }
  .container-skills {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 100px;
  }

  .content {
    font-size: 15px
  }
  h3 {
    padding: 5px 20px;
    margin-bottom: 0px;
    margin-right: 10px;
    font-size: 20px;
  }
  .img-contact {
    width: 300px;
  }
  .project-item {
  position: relative;
  width: 100%;
  max-width: 600px;
}
.image {
  width: 400px;
  height: auto;
}
  .container-project {
  width: 100vw;
}
   .media-icons {
    width: 280px;
  }
  .btn {
    font-size: 23px;
    padding: 6px;
    margin-top: 1rem;
    border: 3px solid #669799;
  }
  body {
    width: 100vw;
    overflow-x: hidden !important;
  }
  .icon {
    font-size: 30px;
  }
  .projectSection {
    grid-template-columns: repeat(2, 1fr);
   text-align: center;
    padding:10px
  }
  .each-video{
    width: 155px;
    height: auto;
  }
  .project-desc {
    width: 155px;
    font-size: 15px;
    left: 18%;
  }
  .project-title {
    margin-top: 70px;
  }
  .section_info{
    width:100vw;
      text-align: center
  }
  input, textarea{
    max-width:90vw
  }
}