@font-face {
    font-family: 'Orbitron';
    src: url('../assets/fonts/Orbitron/static/Orbitron-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Orbitron';
    src: url('../assets/fonts/Orbitron/static/Orbitron-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('../assets/fonts/Rajdhani/Rajdhani-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    opacity: 0;
    transition: opacity 300ms ease;
}

body.page-loaded {
    opacity: 1;
}

body.page-leaving {
    opacity: 0;
}

.viewport-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.canvas-wrapper {
    flex-shrink: 0;
    overflow: hidden;
}

.site-canvas {
    position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
}

.page-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    display: block;
    pointer-events: none;
    user-select: none;
}

header,
main,
footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    pointer-events: none;
}

header .nav-btn,
main .entry-btn,
main .home-text,
main .contact-icon,
main .contact-text,
footer .footer-icon {
    pointer-events: auto;
}

.main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    margin: 0;
    padding: 0;
}

.nav-btn {
    position: absolute;
    width: 184.75px;
    height: 184.75px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}

.nav-home {
    left: 89.625px;
    top: 53.425px;
}

.nav-about {
    left: 382.625px;
    top: 53.425px;
}

.nav-portfolio {
    left: 679.625px;
    top: 53.425px;
}

.nav-lab {
    left: 976.625px;
    top: 53.425px;
}

.nav-contacts {
    left: 1271.125px;
    top: 53.425px;
}

.entry-btn {
    position: absolute;
    left: 805px;
    top: 435.4px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}

.home-text {
    position: absolute;
    left: 157px;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.home-title {
    top: 380px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
}

.home-welcome {
    top: 475px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 24pt;
    color: #b4b02d;
    line-height: 1;
}

.home-body {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 18pt;
    color: #f0f0f0;
    line-height: 1.35;
}

.home-body-1 {
    top: 532px;
}

.home-body-2 {
    top: 645px;
}

.home-body-3 {
    top: 712px;
}

.home-body-4 {
    top: 865px;
}

.about-text {
    position: absolute;
    left: 157px;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.about-title {
    top: 380px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
}

.about-welcome {
    top: 475px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 24pt;
    color: #b4b02d;
    line-height: 1;
}

.about-body {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 18pt;
    color: #f0f0f0;
    line-height: 1.35;
}

.about-body-1 {
    top: 532px;
}

.about-body-2 {
    top: 645px;
}

.about-body-3 {
    top: 712px;
}

.about-body-4 {
    top: 800px;
}
.portfolio-text {
    position: absolute;
    left: 157px;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.portfolio-title {
    top: 380px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
}

.portfolio-welcome {
    top: 475px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 24pt;
    color: #b4b02d;
    line-height: 1;
}

.portfolio-body {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 18pt;
    color: #f0f0f0;
    line-height: 1.35;
}

.portfolio-body-1 {
    top: 532px;
}

.portfolio-body-2 {
    top: 645px;
}

.portfolio-body-3 {
    top: 712px;
}

.portfolio-body-4 {
    top: 865px;
}

.lab-text {
    position: absolute;
    left: 157px;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.lab-title {
    top: 380px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
}

.lab-welcome {
    top: 475px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 24pt;
    color: #b4b02d;
    line-height: 1;
}

.lab-body {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 18pt;
    color: #f0f0f0;
    line-height: 1.35;
}

.lab-body-1 {
    top: 532px;
}

.lab-body-2 {
    top: 600px;
}

.lab-body-3 {
    top: 680px;
}

.lab-body-4 {
    top: 750px;
}
.contacts-text {
    position: absolute;
    left: 157px;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.contacts-title {
    top: 380px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
}

.contacts-welcome {
    top: 475px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 24pt;
    color: #b4b02d;
    line-height: 1;
}

.contacts-body {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 18pt;
    color: #f0f0f0;
    line-height: 1.35;
}

.contacts-body-1 {
    top: 532px;
}

.contact-icon {
    position: absolute;
    left: 157px;
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}
.contact-icon-email {
    filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(825%) hue-rotate(358deg) brightness(104%) contrast(104%);
}

.contact-icon-telegram {
    filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(825%) hue-rotate(358deg) brightness(104%) contrast(104%);
}

.contact-icon-facebook {
    filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(825%) hue-rotate(358deg) brightness(104%) contrast(104%);
}

.footer-icon-img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(825%) hue-rotate(358deg) brightness(104%) contrast(104%);
}
.contact-icon-email {
    top: 700px;
}

.contact-icon-telegram {
    top: 800px;
}

.contact-icon-facebook {
    top: 900px;
}

.contact-text {
    position: absolute;
    left: 260px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.contact-text-email {
    top: 700px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 30pt;
    color: #ffd92e;
}

.contact-text-telegram {
    top: 805px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 30pt;
    color: #b4b02d;
}

.contact-text-facebook {
    top: 905px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 30pt;
    color: #f0f0f0;
}

.footer-icon {
    position: absolute;
    top: 1005px;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.footer-icon:hover {
    opacity: 0.75;
}

.footer-icon-email {
    left: 1545px;
    width: 37px;
    height: 31px;
}

.footer-icon-telegram {
    left: 1620px;
    width: 37px;
    height: 31px;
}

.footer-icon-facebook {
    left: 1689px;
    width: 35px;
    height: 31px;
}

.footer-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-text {
    position: absolute;
    left: 875px;
    top: 1010px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 16pt;
    color: #c3c836;
    margin: 0;
    padding: 0;
    line-height: 1;
    pointer-events: none;
}