:root{
  --header:#eee;

}
html{
  font-family: Montserrat;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

*{
  margin:0;
  padding: 0;
}

button{
  background-color: inherit;
  border: none;
}



section{
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;
  box-shadow: -2px 0 2px;
  box-shadow: 2px 0 5px;
  justify-content: center;
  height: 100vh;
  width: auto;
}
#welcome-section{

  padding-top: 0px;
  background-image: linear-gradient(135deg,#777 ,#ccc);


}
#projects{
  background-image: linear-gradient(45deg,#333,#777);
}
#profiles{
  background-image: linear-gradient(-35deg,#888,#ddd);
  justify-content: space-around;
}
.article{
  font-weight: bolder;
}
#profile-link{
  font-size: 2em;
}
#profile-link:hover{
  animation-name: hover;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}
@keyframes hover {
  100% {
    transform: translate(0,10px);
  }
}
.profile-links{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 2em;
  font-size: 1em;
  font-weight: bolder;
}

.profile-container{
  text-align: justify;
  line-height: 2.5em;
  width: 75%;
}

h1{
  text-align: center;
  color: #000;
  font-weight: 900;
  font-size: 2.3em;
  margin-bottom: 15px;
}
h2{
  color: var(--header);
  font-size: 2.6em;
}
h3{
  font-size: 3em;


}
.ime{
  color: #fff;
  font-size: 1.8em;
  font-weight: bolder;
  margin-top:0;
}
p.header{
  text-align: center;
  color:#111;
  font-weight:600;
}
a, a:visited, a:hover, a:active {

  text-decoration: none;
  color: inherit;
}
.image{
  height: 16em;
  width: 20em;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}
.projekti{
  width:60em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 1%;
  margin-bottom: 1%;
  /*border: 3px solid black;*/
}
.project-tile:hover{
  transform: translate(-2px,-2px);
  box-shadow: 3px 3px 2px #AAA;
}

.project-tile{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-family: Montserrat;
  text-align: center;
  font-size: 20px;
  color: white;


}
img{
  width: 100%;
  height: 100%;
}
nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  font-family: Montserrat;
  font-weight: bolder;
  top:0;
  height:7vh;
  width: 100%;
  background-color: #222;
  box-shadow: 1px 1px 3px #555;
  color: var(--header);
  z-index: 1;
}
.Sections{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-around;
  width: 40%;
  font-size: 3vh;
}
.naslov{
  margin-left: 10px;
  margin-right: 10px;
}
a.MoreProjects{
  margin-top: 10vmin;
  margin-bottom: 10vmin;
  color:#000;
  font-size: 200%;
  font-weight: bold;
  width: auto;

}
.zavrti{
  transform: rotate(180deg  );
}
.puscica{
  width: 100px;
  height: auto;
  color: rgba(0,0,0,0.46);
}

@media (max-width:87.5em) {
  #profiles{
    height: auto;
    padding-bottom: 100px;
  }
}
@media (max-width:80em) {
  #projects{
      height: auto;
  }
  .projekti{
    width: auto;
    flex-direction: column;
  }
  .project-tile{
    margin-top: 20px;
    margin-bottom: 20px;
  }

}