@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root{
  --max-page-width: 1200px;
  --fill: black;
  /* --grad-1: linear-gradient(to bottom, rgb(216 233 251), rgb(255 234 202)); */
  --grad-1: linear-gradient(to bottom, rgb(235 235 235), rgb(206 223 255));
  /* --grad-1: linear-gradient(to bottom, rgb(235 235 235), rgb(206 231 255)); */
}

*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  transition: color 0.2s, background 0.2s ease;
}

svg{
  fill: var(--fill,  black);
}



/*
      :::::::::     :::      ::::::::  ::::::::::
     :+:    :+:  :+: :+:   :+:    :+: :+:
    +:+    +:+ +:+   +:+  +:+        +:+
   +#++:++#+ +#++:++#++: :#:        +#++:++#
  +#+       +#+     +#+ +#+   +#+# +#+
 #+#       #+#     #+# #+#    #+# #+#
###       ###     ###  ########  ##########
*/

.cont-page{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	overflow: hidden;
	/* background: linear-gradient(to bottom, #4a4a4a, #030713); */
	background: linear-gradient(to top, #120a2a, #523e6b);
}

.page{
	display: flex;
	flex-flow: column;
	width: 100%;
	max-width: 2200px;
	height: 100%;
	max-height: 1200px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 14px 47px #000000ba;
  background: white;
  transition: background 0.3s ease;
}


.page-content{
  width: calc(100% - (var(--cont-tags-banner-width) + 40px)) ;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 20px 10px 20px 10px;
  height: 100%;
  overflow-y: auto;
  transition: padding 0.4s ease;
  position: relative;
  right: 0;

}


/*
      ::::::::::: ::::    ::: ::::::::::: :::::::::   ::::::::
         :+:     :+:+:   :+:     :+:     :+:    :+: :+:    :+:
        +:+     :+:+:+  +:+     +:+     +:+    +:+ +:+    +:+
       +#+     +#+ +:+ +#+     +#+     +#++:++#:  +#+    +:+
      +#+     +#+  +#+#+#     +#+     +#+    +#+ +#+    +#+
     #+#     #+#   #+#+#     #+#     #+#    #+# #+#    #+#
########### ###    ####     ###     ###    ###  ########
*/

.intro{
  background: #717171;  
  display: flex;
  flex-flow: column;
  justify-content: center;  
  align-items: center;
  padding: 70px 10px 20px 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 30px;
  height: calc(100dvh - 40px);
  min-height: 150px;
  overflow: hidden;
}

.intro .bg
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;    
  background: var(--bg);
  border-radius: inherit;
  background-size: cover!important;
  background-position: center!important;
  filter: saturate(1.2);
  transition: background 0.3s ease;
  overflow: hidden;
}


@media only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 2), only screen and (max-width: 600px) and (max-resolution: 287dpi){
  .intro .bg{
    --bg: url(../img/bgs/intro/600px/intro-light.webp);
  }
}

@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2.01), only screen and (max-width: 600px) and (min-resolution: 288dpi){
  .intro .bg{
    --bg: url(../img/bgs/intro/800px/intro-light.webp);
  }
}

@media only screen and (min-width: 601px){
  .intro .bg{
    --bg: url(../img/bgs/intro/800px/intro-light.webp);
  }
}

@media only screen and (min-width: 800px){
  .intro .bg{
    --bg: url(../img/bgs/intro/1024px/intro-light.webp);
  }
}

@media only screen and (min-width: 1024px){
  .intro .bg{
    --bg: url(../img/bgs/intro/1200px/intro-light.webp);
  }
}

@media only screen and (min-width: 1200px){
  .intro .bg{
    --bg: url(../img/bgs/intro/1600px/intro-light.webp);
  }
}

@media only screen and (min-width: 1600px){
  .intro .bg{
    --bg: url(../img/bgs/intro/1900px/intro-light.webp);
  }
}

@media only screen and (min-width: 1900px){
  .intro .bg{
    --bg: url(../img/bgs/intro/1900px/intro-light.webp);
  }
}



.intro .headline
{  
  display: flex;
  justify-content: center;
  flex-shrink: 0;  
  margin: 0 clamp(5px,2vw,30px) 0 0;
  position: relative;
  z-index: 1;
  width: 100%;
  /* border: 1px solid lime; */
}

.intro h1{  
  font-size: clamp(20px,17vw,198px);
  line-height: 0.9;
  margin: 0;
  color: white;
  text-align: center;
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  /* width: 100%; */
}


.intro .extension{
  position: absolute;
  top: 100%;
  right: 10px;
  font-size: clamp(20px,12vw,50px);
  /* border: 1px solid magenta; */
  color: cyan;
}

.intro svg{
  width: 40px;
  height: 40px;
  margin: 0 10px 0 0;
}


@media only screen and (max-width: 600px), (max-height: 700px){
  .intro  h1{
    font-size: 50px;
  }

  .intro .extension{
    font-size: 25px;
  }

}


.intro p{
  margin: 80px 0;
  font-size: 17px;
  color: white;
  background: rgba(0, 0, 0, 0.801);
  padding: 5px 10px;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  position: relative;
  text-align: center;
}