@font-face {
  font-family: milk;
  src: url(font/daddystopthis.ttf);
}
* {
  box-sizing: border-box;
}
a {
  all: unset;
  display: block;
}
.no-margin {
  margin: 0;
}
.no-padding {
  padding: 0;
}
body,
h1,
h2,
p,
ul,
li {
  margin: 0;
  padding: 0;
}
h1 {
  font-weight: normal;
}
.material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  background: url(img/pexels-rostislav-uzunov-10613973.mp4) 
}
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #3394cc;
}
header .logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2vmin;
}
header .logo h1 {
  font-weight: normal;
  font-size: 6vmin;
  padding-left: 2vh;
  color: white;
  font-family: 'Grape Nuts', cursive;
}
header .logo img {
  width: 10vmin;
}
header .navigation {
  padding: 2vh;
  display: flex;
  align-items: center;
  list-style: none;
  font-size: 3vmin;
  color: white;
  font-family: 'Grape Nuts', cursive;
}
header .navigation .no-margin {
  margin: 0px;
}
header .navigation li {
  margin-right: 2vh;
  display: flex;
  align-items: center;
  padding: 1.5vmin;
  background-color: #2c81b2;
  border-radius: 1vmin;
  cursor: pointer;
  transition-duration: 0.3s;
}
header .navigation li:hover {
  transition-duration: 0.3s;
  transform: scale(0.9);
  color: #339ccc;
}
header .navigation .material-icons {
  padding-right: 1vmin;
}
header .ads {
  transform: scale(0);
  animation: bounce-in 1s ease-in-out 2s 1 normal both;
  background-color: #2DB4B4;
  border-radius: 2vmin;
  padding: 0.5vmax;
  font-size: 1.5vmax;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin-top: 10vmax;
}
header .ads .material-icons {
  font-size: 2vmax;
}
.princip-logo {
  animation: bounce-in 1s ease-in-out 0s 1 normal;
}
.princip {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-family: 'Grape Nuts', cursive;
  text-align: center;
  color: white;
}
.princip img {
  padding: 10vmin;
  width: 40vw;
}
.princip article {
  animation: slideInRight 1s ease-in-out 0s 1 normal;
  font-size: 4vmin;
  padding: 10vmin;
}
.princip .material-icons {
  font-size: 3vmin;
}
.project-text {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 5vmin;
  font-family: 'Grape Nuts', cursive;
  color: white;
  font-size: 8vmin;
}
.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 5vmin;
}
.projects a {
  display: flex;
  justify-content: center;
}
.projects .project {
  width: 45vw;
  display: flex;
  flex-direction: column;
  align-items: left;
  margin: 3vmin;
  padding: 2vmin;
  border-radius: 2vmin;
  background-color: white;
  font-family: 'Grape Nuts', cursive;
  transition-duration: 0.3s;
}
.projects .project .description {
  font-size: 2.5vmin;
  color: gray;
}
.projects .project .soon {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: gainsboro;
  font-size: 10vmax;
}
.projects .project img {
  padding: 1vmin;
  border-radius: 2vmin;
  width: 100%;
}
.projects .project h1 {
  padding: 1vmin;
  text-align: center;
  font-size: 5.5vmin;
}
.projects .project .status {
  font-size: 4vmin;
}
.projects .project .status .material-icons {
  font-size: 3vmin;
}
.projects .project .status .not-started {
  color: #7f7f7f;
}
.projects .project .status .frozen {
  color: #0033ff;
}
.projects .project .status .on-proccess {
  color: #07d400;
}
.projects .project .see-more {
  font-size: 2.5vmin;
  color: gray;
}
.projects .project .see-more .material-icons {
  font-size: 2vmin;
}
.projects .project:hover {
  cursor: pointer;
  transition-duration: 0.3s;
  transform: scale(1.05);
}
.links {
  display: flex;
  justify-content: space-around;
}
.links .text-links {
  padding: 5vmin 0 5vmin 5vmin;
  font-family: 'Grape Nuts', cursive;
  color: white;
  font-size: 5vmin;
}
.links .text-links .material-icons {
  font-size: 5vmin;
}
.links .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vmin;
}
.links .link div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  border-radius: 1vmin;
  font-family: 'Grape Nuts', cursive;
  padding: 1vmin;
  margin: 0 0 3vmin 0;
  width: 40vw;
  transition-duration: 0.3s;
}
.links .link div h1 {
  font-size: 5vmin;
}
.links .link div img {
  width: 3vw;
}
.links .link div:hover {
  cursor: pointer;
  transition-duration: 0.3s;
  transform: scale(1.05);
}
footer {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  background-color: #00a9dd;
  color: #1ab8f7;
}
footer p {
  font-size: 3vmin;
  font-family: 'Grape Nuts', cursive;
}
@keyframes change-background {
  from {
    background-position-x: -32px;
    background-position-y: -32px;
  }
  to {
    background-position-x: 32px;
    background-position-y: 32px;
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@media (max-width: 820px) {
  .logo h1 {
    display: none;
  }
  .princip {
    flex-direction: column;
  }
  .princip h1 {
    padding: 10vmin 5vmin 5vmin 5vmin;
  }
  .princip img {
    padding: 10vmin 0 0 0;
  }
  .projects {
    flex-direction: column;
    align-items: center;
  }
  .projects .project {
    width: 90%;
  }
  .links {
    align-items: center;
    flex-direction: column;
  }
  .links .text-links {
    padding: 4vmin 4vmin 0 4vmin;
  }
  .links .link div {
    width: 60vw;
  }
}