@font-face {
    font-family: 'rubik';
    src: url('./rubik.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,	body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    cursor: url('/images/cursor.cur') 16 16, auto;
    font-family: 'impact';
    background-color: #3272ff;
    overflow-x: hidden;
    color: white;
}

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.head{
    display: flex;
    flex-direction: row;
}
.left{
    display: flex;
    flex-direction: column;
    width: 30dvw;
}
.banner {
    width: 30%;
    height: auto;
    object-fit: contain;
    border: 6px solid transparent;
    box-sizing: border-box;
  

    background-image:
      linear-gradient(#3272ff, #3272ff),
      linear-gradient(
        270deg,
        red, orange, yellow, lime, cyan, blue, violet, red
      );
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
  
    animation: rainbowBorder 2s linear infinite;
}
.left-middle{
    height: 30vh;
    min-height: 400px;
    border: 6px solid transparent;
    box-sizing: border-box;
  

    background-image:
      linear-gradient(#000, #000),
      linear-gradient(
        270deg,
        red, orange, yellow, lime, cyan, blue, violet, red
      );
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
  
    animation: rainbowBorder 2s linear infinite;
}
.left-img{
    width: 100%;
    display: block;
    height: auto;
    object-fit: contain;
    border: 6px solid transparent;
    box-sizing: border-box;
  

    background-image:
      linear-gradient(#000, #000),
      linear-gradient(
        270deg,
        red, orange, yellow, lime, cyan, blue, violet, red
      );
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
  
    animation: rainbowBorder 2s linear infinite;
}
.left-bottom{
    height: fit-content;
}
.right{
    display: flex;
    flex-direction: column;
    width: 70dvw;
    align-items: center;
    justify-content: center;
}
.right-header{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 5vw;
    align-items: center;
    justify-content: center;
}
.right-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.copyText{
font-size: 2vw;
}
.mlg{
    height: auto;
    width: 10vw;
    object-fit: contain;
    border: 6px solid transparent;
    box-sizing: border-box;
    border-radius: 20px;

    background-image:
      linear-gradient(#00000000, #00000000),
      linear-gradient(
        270deg,
        red, orange, yellow, lime, cyan, blue, violet, red
      );
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
  
    animation: rainbowBorder 2s linear infinite;
}
.right-h1{
    font-size: 3vw;
    font-weight: bold;
}
.footer{
    display: flex;
    flex-wrap: nowrap;                 
  }
  
  .footer > div{
    flex: 0 0 calc(100% / 6);          /* 6 одинаковых ячеек */
    aspect-ratio: 1 / 1;               /* квадрат */
    box-sizing: border-box;
    border: 6px solid transparent;
  
    background-image:
      linear-gradient(#3272ff, #3272ff),
      linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
    animation: rainbowBorder 2s linear infinite;
  
    /* на случай переполнения содержимым */
    min-width: 0;
  }
  
  /* Ссылка должна занять всю ячейку */
  .footer > div > a{
    display: flex;                     /* удобно центрировать картинку */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: url('/images/cursor.cur') 16 16, auto;
  }
  
  /* Картинка — без строчного зазора и на весь контейнер */
  .footer img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.2s ease;
  }
  .footer img:hover{
    transform: scale(0.8);
  }
#horn {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.p-3 p{
    margin: 0;
    font-size: 1.4vw;
}
.launch-video {
    display: block;
    width: 100%;
    height: auto;
    border: 6px solid transparent;
    box-sizing: border-box;
  

    background-image:
      linear-gradient(#000, #000),
      linear-gradient(
        270deg,
        red, orange, yellow, lime, cyan, blue, violet, red
      );
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: 100% 100%, 400% 400%;
  
    animation: rainbowBorder 2s linear infinite;
  }
  
  @keyframes rainbowBorder {
    0%   { background-position: 0% 50%, 0% 50%; }
    50%  { background-position: 0% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
  }
	
	/* Responsive rules for max-width: 800px */
	@media (max-width: 800px) {
		/* Контент — в колонку */
        .head{
            flex-direction: column;
        }
        .banner{
            width: 100%;
            height: auto;
        }
		.container { flex-direction: column; flex-wrap: nowrap; }
		.left,
		.right { flex-direction: column; width: 100%; }
		/* Внутренние элементы на всю ширину */
		.left > *,
		.right > * { flex: 0 0 auto; width: 100%; min-width: 0; }

		/* Адаптация размеров текста/картинок */
		.right-h1 { font-size: 9vw; }
		.mlg { width: 20vw; }
		.copyText { font-size: 4vw; text-align: center;}

		/* Футер: по два элемента в ряд */
		.footer { flex-wrap: wrap; }
		.footer > div { flex: 0 0 50%; }
        .p-3 p{
            margin: 0;
            font-size: 4.3vw;
        }
	}