*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --white: white;
  --basic: #000040;
  --light: rgb(176, 196, 196);
  --black: black;
}

body {
  padding: 10px;
}
section {
  background: linear-gradient(rgba(19, 20, 36, 0), #131424);
  width: 1500px;
  margin: 0 auto;
  border: 5px groove var(--basic);
}
.top-holder {
  position: relative;
  margin-bottom: 25vh;
}
h1 {
  font-family: 'Oswald';
  font-size: 12vh;
  color: var(--black);
}
h2 {
  font-family: 'Oswald';
  font-size: 2vh;
  color: var(--black);
}

#center-box {
  margin: 0 auto;
  text-align: center;
  padding: 50px 150px;
  z-index: -10;
}
.white {
  width: 100%;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--basic);
  background-color: var(--light);
}

.white-odd {
  transform: rotate(3deg);
}
.white-even {
  transform: rotate(-4deg);
}
.text-odd {
  transform: rotate(-3deg);
}
.text-even {
  transform: rotate(4deg);
}

.middle {
  text-align: center;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: 10px;
  border: 1px dotted var(--basic);
}
figure {
  height: 30vh;
  width: 30vw;
  margin: 20px auto;
}
img {
  height: 100%;
  width: auto;
}
.text {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: 2em;
  text-align: center;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-name: dash;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* animation: dash 3s linear infinite; */
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.top-holder::after {
  content: url(../img/nyil1.png);
  width: 3vw;
  height: 2vh;
  position: absolute;
  bottom: -15px;
  left: 45%;
}
@media only screen and (max-width: 1500px) {
  section {
    width: 100%;
  }
}

@media only screen and (max-width: 900px) {
  h1 {
    font-size: 8vh;
  }
  #center-box {
    width: 100%;
    padding: 50px;
  }
  figure {
    width: 100%;
  }
}

@media only screen and (max-width: 440px) {
  #center-box {
    width: 100%;
    padding: 30px 30px;
  }

  h1 {
    font-size: 6vh;
    line-height: 1.1;
  }

  p {
    font-size: 14px;
    margin: 10px 0 0 0;
  }

  #text,
  #text5 {
    padding: 5px;
  }
}