@import './normalize.css';

@font-face {
  font-family: 'pp_neue_machinalight';
  src: url('ppneuemachina-light-webfont.woff2') format('woff2'),
       url('ppneuemachina-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'pp_neue_machinaregular';
  src: url('ppneuemachina-regular-webfont.woff2') format('woff2'),
       url('ppneuemachina-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'pp_neue_machinaultrabold';
  src: url('ppneuemachina-ultrabold-webfont.woff2') format('woff2'),
       url('ppneuemachina-ultrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

body {
  background-color: #111D4A;
  color: rgb(32, 32, 32);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  transition: .6s ease-in-out;
}

/* Label */
.label {
  font-family: 'pp_neue_machinaregular';
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  color: #7D7ABC;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.label-classic {
  font-family: 'pp_neue_machinaregular';
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  color: #7D7ABC;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.label:hover,
.label:active {
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: .1s;
  --offset: 180px;
    }

#logo:hover,
#logo:focus,
#logo:active {
  transform: rotate(10deg);
  transition: .6s ease-in-out;
}

/* Animations */
.fade-in { 
  animation: fadeIn 1s;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1 }

@keyframes fadeIn {
  0%{
    transform: translateY(1vh);
    opacity: 0;
    }
    100%{
    transform: translateY(0px);
    opacity: 1;
    }
}

/* Main content */
.main-content {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
  width: 100%
}

/* Logo */
#logo {
  position: fixed;
  left: 32px;
  top: 32px;
  transition: 0.3s;
}

#logo img {
  display: block;
}

#logo:hover,
#logo:focus,
#logo:active {
  transform: rotate(10deg);
  transition: .6s ease-in-out;
}


/* Titles */
[class*="title-"] {
  font-family: 'pp_neue_machinaultrabold';
  padding-left: 25%;
  padding-right: 25%;
  text-align: center;
  color: #FFCF99;
}

.title-1 {
  font-size: 64px;
  margin-bottom: 12px;
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: -2px;
}

.title-2 {
  font-family: 'pp_neue_machinaultrabold';
  font-size: 56px;
  margin-bottom: 12px;
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: 0px;
}

.title-3 {
  font-size: 48px;
  color: #FFCF99;
  margin-bottom: 12px;
  font-weight: 400;
  margin-top: 8px;
}

[class*="title-"] a:hover,
[class*="title-"]  a:active {
  color:blanchedalmond;
}

/* Icons */
.svg-icon {
  width: 24px;
  height: 24px;;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #7D7ABC;
}

.svg-icon circle {
  stroke: #7D7ABC;
  stroke-width: 1;
}


@media only screen and (max-width: 1024px) {
  [class*="title-"] {
    padding-left: 20%;
    padding-right: 20%;
  }
  .title-1 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 900px) {
  [class*="title-"] {
    padding-left: 10%;
    padding-right: 10%;
  }
  .title-1 {
    font-size: 40px;
  }
  .title-2 {
    font-size: 40px;
  }
  .title-3 {
    font-size: 32px;
  }

}


/* Footer */
#footer {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}