/* Fonts connection */

@font-face {
    font-family: 'Rimma_sans-Bold'; /* Title font */
	src: url('../../common/fonts/rimma_sans-bold.eot'); /* IE 9 Compatibility Mode */
	src: url('../../common/fonts/rimma_sans-bold.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
	url('../../common/fonts/rimma_sans-bold.woff2') format('woff2'), /* Super Modern Browsers */
	url('../../common/fonts/rimma_sans-bold.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
	url('../../common/fonts/rimma_sans-bold.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../../common/fonts/rimma_sans-bold.svg#rimma_sans-bold') format('svg'); /* Chrome < 4, Legacy iOS */
}

@font-face {
    font-family: 'Evolventa Regular'; /* Paragraph font */
    font-style: normal;
    font-weight: normal;
    src: local('Evolventa Regular'), url('../../common/fonts/Evolventa-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Evolventa Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Evolventa Oblique'), url('../../common/fonts/Evolventa-Oblique.woff') format('woff');
}

@font-face {
    font-family: 'Evolventa Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Evolventa Bold'), url('../../common/fonts/Evolventa-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Evolventa Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Evolventa Bold Oblique'), url('../../common/fonts/Evolventa-BoldOblique.woff') format('woff');
}

/* Base rules --------------------------------------------------------- */

body {
    background: var(--darkGraphite);
    font-size: 16px;
    color: var(--text-default);
}

.global-padding{
    padding: 2.5vw 9vw;
}

.test-font {
    color: var(--test); /* High contrast font color fill */
}

.test-bg {
    background: var(--test); /* High contrast background fill */
}

/* Text styles --------------------------------------------------------- */

h1 {
    font-family: Rimma_sans-Bold;
    font-size: calc(7.3vw);
    color: var(--text-default);
    line-height: 90%;
}

.p-small {
    font-family: Evolventa Regular;
    font-size: calc(0.5vw);
    text-align: left;
    line-height: calc(1vw);
    letter-spacing: 0.387px;
}

/* Sections --------------------------------------------------------- */

/* .title Contains h1 and subtitle */

.first-screen { /* Contains first photo */
    z-index: -9999;
    width: 100%;
    width: -webkit-fill-available;
    height: 43vw;
    border-radius: calc(3vw);
    background-image: url("../../img/andrey-zaikin-dizayner.jpg");
    background-size: cover;
    background-position: center;
    margin-top: -1vw;
    position: relative;
    animation: first-screen-animation 1.5s ease-out;
}
@keyframes first-screen-animation {
    from {
      opacity: 0;
      top: 30px;
      filter: blur(5px);
    }
    to {
        opacity: 1;
        top: 0;
        filter: blur(0px);
    }
}

  .copyright { /* Contains legal info */
    opacity: 0.3;
    text-align: center;
    color: var(--text-default);
}

/* Articles --------------------------------------------------------- */

.brand-labels-container { /* Contains brand labels on first screen */
    position: absolute;
    right: 2vw;
    bottom: 2vw;
    display: flex;
    width: 40vw;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.8vw;
    flex-wrap: wrap-reverse;
  }

/* Elements --------------------------------------------------------- */

.brand-label { /* Brand label style */
    height: 3vw;
    backdrop-filter: blur(5.625px);
    border-radius: calc(3vw);
  }

.intro { /* Subtitle text style */
    font-family: Evolventa Regular;
    position: relative;
    right: 2vw;
    top: 4.5vw;
    color: var(--text-invert);
    font-size: calc(1.3vw);
    text-align: right;
    animation: intro-animation 3s ease-out;
}
@keyframes intro-animation {
    from {
      opacity: 0;
      filter: blur(20px);
    }
    20% {
        opacity: 0;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

/* Mobile 576 --------------------------------------------------------- */

@media (max-width: 576px) {

/* Base rules --------------------------------------------------------- */

.global-padding{
    padding: 8vw 3vw;
}

/* Text styles --------------------------------------------------------- */
h1 {
    font-size: calc(18vw);
}

.p-small {
    font-size: calc(3vw);
    line-height: calc(5vw);
    letter-spacing: 0.258px;
}

/* Sections --------------------------------------------------------- */

.first-screen {
    height: 93vw;
    margin-top: 10vw;
}

/* Articles --------------------------------------------------------- */

.brand-labels-container {
    width: 75%;
    gap: 1.4vw;
}

/* Elements --------------------------------------------------------- */

.intro {
    right: auto;
    top: 4vw;
    font-size: calc(3.3vw);
    text-align: center;
    animation: none;
    opacity: 0.75;
	color: var(--text-default);
}

.brand-label {
    height: 7.7vw;
}
}