/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
  --header-height: 3rem;
  --font-semi: 600;
}

/*===== Root =====*/
:root{
  --first-color: #E26D5C;
  --second-color: #fff;
  --background-gradient1: #252525;
  --background-gradient2: #1F3B37;
  --link-color: #fff;
  --body-font: 'Bebas Neue', sans-serif;
}

/*===== Header =====*/
strong span:first-child {
  color: var(--first-color);
}

.nav-item a:hover {
  color: var(--first-color);
}

.cover  {
min-height: 100vh;
background-image: url('pics/kansi.jpeg');
background-repeat: no-repeat;
background-size:cover;
      -webkit-animation: slidein 100s;
      animation: slidein 100s;

      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;

      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;

      -webkit-animation-direction: alternate;
      animation-direction: alternate;  
overflow: hidden;
}
@-webkit-keyframes slidein {
  from {background-position: 0px -400px;background-size:3000px; }
  to {background-position: -1500px -400px;background-size:3000px;}
  }

@keyframes slidein {
from {background-position: 0% 20%;background-size:2500px; }
to {background-position: 100% 10%;background-size:2500px;}
}

#background {
  position: absolute;
  min-height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.navbar {
  z-index: 1;
}

.page_title {
  z-index: 1;
  position: absolute;
  top: 60vh;
  left: 5%;
  width: 90%;
  text-align: left;
}

.page_title h1 {
  margin: 0;
  font-size: 72px;
  color: var(--first-color);
  text-transform: uppercase;
}

.page_title p {
  margin: 0;
  font-size: 32px;
  color: var(--second-color);
  text-transform: uppercase;
}

.page_title .btn {
  margin-top: 12px;
  --bs-btn-padding-x: 4rem;
}

footer span:first-child {
  color: var(--first-color);
}
/*===== Header Ends =====*/

.profile-picture{
  max-width: 200px;
}

button a {
  text-decoration: none;
}

@media only screen and (max-width: 530px){
	.page_title {
    z-index: 1;
    position: absolute;
    top: 50vh;
    left: 5%;
    width: 90%;
    text-align: left;
  }

  .page_title .btn {
    --bs-btn-padding-x: 2rem !important;
  }
}