/*@media (min-width: 768px) {
    
}*/

:root {
    --section-horizontal-padding: 80px;
    --section-vertical-padding: 23.4px;
    --welcome-section-padding: 16px;
    --welcome-section-text-padding: 48px;
    --welcome-section-width: 1152px !important;
    --about-section-width: 852px;
    --section-titles-padding: 20px;
    --links-icons-size: 96px;
    --header-padding: 5px 16.5px;
    --header-max-width: 1134px;
    --p64: 64px;
    --logo-margin: 12.8px;


    --section-content-text-shadow: 0.34px 0.7px 2.5px black;
    --white-text-glow: 1.5px 1.5px 6px rgba(255, 255, 255, 0.61);
    --author-text-effect: 1.9px 2.25px 2px darkred, -0.6px 0px 3.4px orange;

    /* images */
    --welcome-section-background: url(../img/bg.gif);
    --details-icon-size: 32px;

    /* colors */

    --youtube-backlight: drop-shadow(0 0 12px #c50808);
    --telegram-backlight: drop-shadow(0 0 9px #28a8ea);
    --discord-backlight: drop-shadow(0 0 9px #2d3ad1);
    --steam-backlight: drop-shadow(0 0 10.5px #133165);
    --boosty-backlight: drop-shadow(0 0 13px #c45515);
    --vk-backlight: drop-shadow(0 0 8px #0779fa);
    --mail-backlight: drop-shadow(0 0 9px #e03b2c);

    /*--header-background-:;*/
    --layout-background: radial-gradient(circle at 20% 20%, rgba(0, 123, 255, 0.342), #2b262600 60%), radial-gradient(circle at 80% 80%, rgba(0, 191, 255, 0.205), transparent 70%), linear-gradient(135deg, #000, #3d3a665c 50%, #3e3eceb2);
    --sections-background: linear-gradient(336deg,rgba(9, 4, 97, 0.350) 0%, rgba(4, 90, 148, 0.350) 17%, rgba(9, 190, 226, 0.350) 100%);

    --telegram-link-gradient: linear-gradient(180deg,rgba(36, 172, 240, 1) 9%, rgba(37, 150, 207, 1) 30%, rgb(37, 104, 219) 76%);

    /* titles size */
    --logo-font: 20pt;
    --font-13: 13pt;
    --font-105: 1.05rem;
    --font-11: 1.1rem;
    --font-17: 16.5pt;
    --title: 43.5pt;

    /* animations */
    --nav-anim: scale(0.85) !important;
}

/* animations */
@keyframes pulseGlow {
    0%   { box-shadow: 0 0 10px rgba(255, 255, 255, 0.055);}
    50%  { box-shadow: 0 0 25px rgba(255, 255, 255, 0.178);}
    100% { box-shadow: 0 0 10px rgba(255,255,255,0.2);} 
}

* {
    font-family: 'Rubik', Helvetica;
    font-optical-sizing: auto;
    box-sizing: border-box;
}

.draggable-false {
    pointer-events: none;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.content-center {
    justify-content: center;
}

.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.underline {
    text-decoration: underline; 
}

.underline-none {
    text-decoration: none; 
}

.circle-form {
    border-radius: 9999px;
}

.text-center {
    text-align: center;
}

.font-bold {
    font-weight: bold;
}

.font-500 {
    font-weight: 550;
}

html, body {
    background-color: black;
    margin: 0;
    padding: 0;
}

/* header */ 
header {
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 999;
    position: fixed;
    overflow: hidden;
    /*background-color: #252824;
    background-color:rgba(255, 255, 255, 0.4);*/

    background: rgba(20, 20, 30, 0.568);

    border-bottom: 1.6px solid rgba(0, 123, 255, 0.144);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(9px) brightness(1.09) contrast(108%) saturate(140%);
    -webkit-backdrop-filter: blur(9px) brightness(1.09) contrast(108%) saturate(140%);
    /*border-bottom: 1.02px black solid;*/
}

header .header-content {
    justify-content: space-between;
    padding: var(--header-padding);
    width: 100%;
    max-width: var(--header-max-width);
    margin: 0 auto;
    z-index: 2;
}

.header-content a {
    color: white;
    text-decoration: none;
    cursor: pointer;
    text-shadow: var(--section-content-text-shadow);
}

/* navigation */
nav {
    width: auto;
    height: auto;
    font-size: var(--font-size);
    gap: 25.7px;
}

nav a {
  color: #e5e5e5;
  position: relative;
  transition: 0.25s;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00bfff, #007bff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease-in-out;
}

nav a:active {
    transform: var(--nav-anim);
}

nav a:hover {
  background: linear-gradient(90deg, #00bfff, #007bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

nav a:hover::after {
  transform: scale(1);
}

/* layout tags */
#layout {
    background: var(--layout-background);
	background-color: #151f32;
    background-attachment: local;
    border: none;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 0;
    min-height: 100vh;
    color: rgb(228, 225, 225) !important;
}

section {
    padding-left: var(--section-horizontal-padding);
    padding-right: var(--section-horizontal-padding);
    padding-top: var(--section-vertical-padding);
    padding-bottom: var(--section-vertical-padding);
    z-index: 1;
}

.section-content {
    text-wrap: wrap;
}

.section-title-padding {
    padding-top: var(--section-titles-padding);
    padding-bottom: var(--section-titles-padding);
}

.section-title {
    font-size: 24.5pt;
    filter: drop-shadow(0 0 6px #000000b6);
    color:rgb(215, 224, 250);
}

.section-content-spec {
  /*background: var(--sections-background);
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 123, 255, 0.3);*/
  background: linear-gradient(rgba(20, 20, 30, 0.37));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1.98px solid rgba(0, 68, 255, 0.473);
  box-shadow: 0 0 25px rgba(1, 110, 146, 0.15);
  padding: 15px;
  font-size: var(--font-13);
  transition: all 0.3s ease;
}

.section-content-spec:hover {
  border-color: rgba(0, 110, 255, 0.8);
  box-shadow: 0 0 30px rgba(0, 81, 255, 0.7);
  transform: translateY(-5px);
}

.line-height-135 {
    line-height: 1.35; 
}

footer {
    background-color: darkolivegreen;
    height: 50px;
    width: fit-content;
    padding: 15px;
    border-radius: 16px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

footer span {
    font-size: large;
    font-weight: 700;
}

.section-youtube-link {
    color: #0059ff;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    filter:drop-shadow(0 0 2px #0059ffec);
    transition: all 0.4s;
}

.section-youtube-link:active {
    color: #002fff;
}

.section-content a:hover {

}

/* welcome section */
.welcome-section-width {
    max-width: var(--welcome-section-width);
    margin-left: auto;
    margin-right: auto;
}

.welcome-section {
    background-size: cover !important;
    background-clip: border-box !important;
    background-attachment: local !important;
    background-origin: border-box !important;
    background-position: left !important;
    padding-top: 104px;
    padding-bottom: 0;
    border-bottom: 1.95px solid rgba(0, 123, 255, 0.233);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-shadow: var(--white-text-glow);
}

.welcome-section-title {
    font-size: var(--title);
    font-weight: bolder;
}

.welcome-section-content-block {
    display: block;
    padding-left: var(--welcome-section-padding);
    padding-right: var(--welcome-section-padding);
}

.welcome-section-text {
    width: auto;
    padding-left: var(--welcome-section-text-padding);
    padding-right: var(--welcome-section-text-padding);
    font-size: var(--font-17);
    margin-top: 41.5px;
    margin-bottom: 7px;
    gap: 7px;
    display: grid;
}

/* about me section */

.about-section-content-width {
    width: var(--about-section-width);
}

.about-section-subtitle {
    font-size: 14.8pt;  
    background-clip: border-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.about-section-like-subtitle {
    background: linear-gradient(90deg, rgb(3, 141, 26), rgb(29, 223, 22));
    filter: drop-shadow(1px 1px 1px rgba(2, 146, 10, 0.397));
}

.about-section-nolike-subtitle {
    background: linear-gradient(90deg, rgb(175, 13, 4), rgb(240, 45, 45));
    filter: drop-shadow(1px 1px 1px rgba(255, 0, 0, 0.397));
}

/* projects section */

.projects-section-content {
    width: 600px;
    row-gap: 30px;
    padding: 5px;
    display: grid;
}

.projects-section-content-container {
    padding: 5px;
}

.projects-section-content-width {
    width: 500px;
}

.projects-section-subtitle {
    font-size: var(--font-size-17);
    padding-top: 4.5px;
    padding-bottom: 4.5px;
}

.projects-icon {
    height: 148px;
    width: 148px;
    filter: drop-shadow(0px 0px 5.5px rgba(0, 0, 0, 0.37));
    transition: all 0.4s;
}

.projects-icon:hover {
    transform: scale(1.03);
}
/* links section */
.links-section-content {
    gap: 25px;
    padding: 25.5px !important;
    max-height: fit-content;
    max-width: 1178px;
}

.links-section-content:hover {
  box-shadow: 0 0 35px rgba(0, 191, 255, 0.4);
}

.section-content-rounding {
    border-radius: 28px;
}

.links-section-link {
    height: var(--links-icons-size);
    width: var(--links-icons-size);
    padding: 13.5px;
    background: rgba(30, 30, 45, 0.8);
    border: 2.4px solid;
    box-sizing: content-box;
    transition: filter 0.35s, transform 0.35s;
    animation: pulseGlow 2s infinite alternate;
}

.links-section-link:hover {
    transform: scale(1.15);
    background: rgba(185, 185, 185, 0.062);
}

.links-section-link:active {
    transform: scale(0.8);
}

.links-section-icon {
    height: var(--links-icons-size);
    width: var(--links-icons-size);
    padding: 8.3px;
    transition: filter 0.3s, transform 0.3s;
}

.links-section-link:hover .links-section-icon {
  transform: scale(1);
}

/* links */

.youtube-link {
    border-color: #ff0000 !important;
    filter: var(--youtube-backlight);
}

.telegram-link {
    border-color: #28a8ea !important;
    filter: var(--telegram-backlight);
}

.discord-link {
    border-color: #5865f2 !important;
    filter: var(--discord-backlight);
}

.steam-link {
    border-color: #015794 !important;
    filter: var(--steam-backlight);
}

.boosty-link {
    border-color: #f0672b !important;
    filter: var(--boosty-backlight);
}

.vk-link {
    border-color: #0077ff !important;
    filter: var(--vk-backlight);
}

.mail-link {
    border-color: #d64235 !important;
    filter: var(--mail-backlight);  
}

.youtube-icon {
    filter: var(--youtube-backlight);
}

.telegram-icon {
    filter: var(--telegram-backlight);
}

.discord-icon {
    filter: var(--discord-backlight);
}

.steam-icon {
    filter: var(--steam-backlight);
}

.boosty-icon {
    filter: var(--boosty-backlight);
}

.vk-icon {
    filter: var(--vk-backlight);
}

.mail-icon {
    filter: var(--mail-backlight);  
}

/* Under Construction Layout */

.underconstruction-layout {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.underconstruction-block {
    padding: 60px 0 60px 0;
    width: 100%;
    background-color: #f5e109;
    color: black;
    border-image-slice: 38 0 38 0;
    border-image-width: 12px 0px 12px 0px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round; 
    border-image-source: var(--constuction-ribbon-texture);
    border-style: solid;
    font-size: var(--font-size-17);
}

/* spec */
.logo {
    width: auto;
    height: var(--p64);
    word-spacing: -0.36em;
}

.kaban-icon {
    max-height: var(--p64);
    max-width: var(--p64);
    box-shadow: 0 0 10px rgba(104, 103, 103, 0.486);
}

.kaban-photo {
    height: 411.5px;
    width: 400px;
    filter: brightness(1.10) opacity(0.95) drop-shadow(0 0 3px rgba(192, 190, 190, 0.315));
}

.logo-text-margin, .logo span, .logo-kaban-text-area {
    margin-left: var(--logo-margin);
    font-weight: bolder;
    font-size: var(--font-17);
}


.details {
    max-width: min-content;
    gap: 4px;
    padding: 5.5px;
    border-radius: 14px;

  
  background: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(6, 111, 146, 0.6);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  box-shadow: 0 0 15px rgba(0, 191, 255, 0.25);
  cursor: pointer;
  transition: all 0.35s ease;
    margin-top: 20px;
}

.details span {
    color: #dae3ec;
}

.details::before {
    content: "";
    height: var(--details-icon-size);
    width: var(--details-icon-size);
    position: relative;
    display: inline-flex;
    background-image: url('../svg/down.svg');
    background-clip: content-box;
    -webkit-background-clip: content-box;
    background-size: var(--details-icon-size) var(--details-icon-size);
    filter: drop-shadow(0 0 2px rgba(6, 111, 146, 0.6));
}

.default-text-shadow {
    text-shadow: var(--section-content-text-shadow) !important;
}

.author {
    text-shadow: var(--author-text-effect);
    color: orangered;
}

.background-spec {
    background-color:rgba(0,0,0,.85);
    background-blend-mode: multiply;
    background-image: var(--welcome-section-background);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    background-attachment: local;
    background-origin: content-box;
    background-position: center;
}

.underconstruction-layout {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.underconstruction-block {
    padding: 60px 0 60px 0;
    width: 100%;
    background-color: #f5e109;
    color: black;
    border-image-slice: 38 0 38 0;
    border-image-width: 12px 0px 12px 0px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round; 
    border-image-source: url('../img/ribbon.png');
    border-style: solid;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.836);
    font-size: var(--font-size-17);
}