/* ======================================= Шрифты ================================================= */
/* @font-face {
      font-family:"Epilogue-Bold";
      src: url("../fonts/Epilogue-Bold.ttf");
}*/
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Bold.eot');
    src: local('Oswald Bold'), local('Oswald-Bold'),
        url('../fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Bold.woff') format('woff'),
        url('../fonts/Oswald-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: local('Oswald Regular'), local('Oswald-Regular'),
        url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* ======================================= Обнуление ================================================= */
* { 
	box-sizing: border-box;
    padding: 0; 
    margin: 0;  
  } 
fieldset, img, abbr { 
    border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
ul { 
  list-style: none; 
  } 
caption, th { 
  text-align: left; 
  } 
h1, h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  }
/* ======================================= Основные стили ================================================= */
body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
}

.background-one {
  background-color: #151515;
}

.background-two {
  background-color: #151515;
}

.background-three {
  background-color: #151515;
}

.link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 0;
}

a {
  font-family: "Bungee", cursive;
  font-size: 65px;
}

.link-one {
  color: #53d9d1;
  transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
  font-family: 'Oswald', Helvetica, sans-serif;
}

.link-one:hover {
  color: #111;
  transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);

  /* Thanks Chris Coyier, you got my back always. https://css-tricks.com/different-transitions-for-hover-on-hover-off/ */
}

.link-one::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #53d9d1;

  clip-path: circle(0% at 50% calc(50%));
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.link-one:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.link-one::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #151515;

  clip-path: polygon(
    40% 0%,
    60% 0%,
    60% 0%,
    40% 0%,
    40% 100%,
    60% 100%,
    60% 100%,
    40% 100%
  );

  /*
  Didn't look consistently awesome enough
  across different viewing widths.
  clip-path: polygon(
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%
  );
  */
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.link-one:hover::after {
  /*
  clip-path: polygon(
    20% 45%,
    10% 40%,
    30% 30%,
    40% 35%,
    60% 35%,
    70% 30%,
    90% 40%,
    80% 45%,
    60% 35%,
    40% 35%,
    20% 45%,
    20% 55%,
    10% 60%,
    30% 70%,
    40% 65%,
    60% 65%,
    70% 70%,
    90% 60%,
    80% 55%,
    60% 65%,
    40% 65%,
    20% 55%
  );
  */
  clip-path: polygon(
    40% 10%,
    60% 10%,
    60% 35%,
    40% 35%,
    40% 90%,
    60% 90%,
    60% 65%,
    40% 65%
  );
}

.link-two {
  color: #f27b9b;
  transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
  font-family: 'Oswald', Helvetica, sans-serif;
}

.link-two:hover {
  color: #111;
  transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
}

.link-two::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  clip-path: polygon(
    0% -20%,
    100% -30%,
    100% -10%,
    0% 0%,
    0% 130%,
    100% 120%,
    100% 100%,
    0% 110%
  );
  background-color: #f27b9b;

  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.link-two:hover::before {
  clip-path: polygon(
    0% 10%,
    100% 0%,
    100% 20%,
    0% 30%,
    0% 100%,
    100% 90%,
    100% 70%,
    0% 80%
  );
}

.link-two::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 5ch;
  height: 5ch;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%) rotate(0deg) scale(0);
  transition: transform 1s ease;

  background-color: #f27b9b;
}

.link-two:hover::after {
  transform: translate(50%, -50%) rotate(135deg) scale(1);
}

.link-three {
  color: #eb7132;
  font-family: 'Oswald', Helvetica, sans-serif;
}

.link-three::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
  top: 0%;
  left: 0%;
  transform: translate(0, -50%) scaleY(0);
  transition: transform 1s ease;
  mix-blend-mode: difference;

  clip-path: polygon(
    20% 60%,
    100% 60%,
    100% 40%,
    20% 40%,
    20% 0%,
    60% 0%,
    60% 20%,
    20% 20%
  );

  background-color: #eb7132;
}

.link-three:hover::after {
  transform: translate(0, 0%) scaleY(1);
}

.link-three::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
  bottom: 0%;
  right: 0%;
  transform: translate(0, 50%) scaleY(0);
  transition: transform 1s ease;
  mix-blend-mode: difference;

  clip-path: polygon(
    80% 40%,
    0% 40%,
    0% 60%,
    80% 60%,
    80% 100%,
    40% 100%,
    40% 80%,
    80% 80%
  );

  background-color: #eb7132;
}

.link-three:hover::before {
  transform: translate(0%, 0%) scaleY(1);
}
#logo{
	color: white;
}
#logo h3{
	color: #FFF;
    position: absolute;
    left: 1200px;
    bottom: 1060px;
    font-size: 50px;
}
#logo img{
	color: #FFF;
    position: absolute;
    left: 1070px;
    bottom: 1060px;
    font-size: 50px;
    width: 4%;
}
/* ======================БИБЛИОТЕКА========================== */
.width_1170{
    width: 1170px;
    margin: 0 auto; 
}
.width_100{
	width:100%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_80{
	width:80%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_66{
	width:66.66666%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_60{
	width:60%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_50{
	width:50%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_40{
	width:40%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_33{
	width:33.33333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_30{
	width:30%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_25{
	width:25%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_23{
	width:23%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_20{
	width:20%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_16{
	width:16.333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_8{
	width:8.666666%;
	padding:0 12px;
	box-sizing:border-box;
}
.d_flex{
	display:flex;
	flex-wrap:wrap;
}
.d_nflex{
	display:flex;
	flex-wrap: nowrap;
}
.d_nnflex{
	display:flex;
	flex-wrap: wrap;
}
.d_flex_between{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.d_flex_around{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}
.d_none{
	display:none;
}
/*=====================================СТИЛИ ГЛАВНОЙ==========================*/
@media screen and (max-width: 426px){
	body {
		    grid-template-columns: repeat(1, 1fr);
	}
}
/* =============================================knopka======================================= */