/* Fullscreen fixed background component */

.fullscreen-fixed-background {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
}

/* Home page */

.noise-background {
    background: url("../images/noise.png") repeat;
    opacity: 5%;
}

.noise2-background {
    background: url("../images/noise2.png") repeat;
    opacity: 10%;
}

.blur-background {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.5vh);
}

/* - Main section */

@media (max-width: 1080px ){
    .main-section {
        flex-direction: column;
    }

    .profile-parent {
        width: 100%;
    }

    .portfolio-content  {
        width: 80%;
    }
}

@media (min-width: 1080px ){
    .main-section {
        flex-direction: row;
    }

    .profile-parent {
        width: min-content;
    }

    .portfolio-content  {
        width: 35%;
    }
}

.main-background {
    background: linear-gradient(180deg, #222831 0%, #171B21 100%) fixed;
}

.logo-background {
    background: url("../images/47logo.png") fixed no-repeat right 2em bottom 6em;
    background-size: 35%;
    opacity: 0.05;
    filter: blur(1vh);
}

.main-section {
    display: flex;
}

.profile-parent {
    display: flex;
    flex-direction: column;
    padding: 5em;

    background-color: rgba(1,1,1,0.25);
}

.skill {
    padding: 0.5em 1em;

    border-radius: 0.75em;
    border: none;

    font-weight: bold;
    font-size: 1em;

    transition: background-color 0.1s, color 0.1s;

    color: var(--foreground-light-color);
    background-color: var(--background-light-color);
}

.links-parent {
    display: flex;
    flex-direction: column;
    padding: 2em 0;
    margin-top: auto;

    width: max-content;
}

.link {
    cursor: pointer;

    border-radius: 50%;

    height: 5em;
    width: 5em;

    background-color: white;

    transition: transform 0.25s ease;
}

.link:hover {
    transform: translateY(-1em);
}

.link * {
    height: 60%;
    width: 60%;
    margin: 20%;
}

.link.telegram {
    background-color: var(--telegram-backcolor);
}

.link.itch-io {
    background-color: var(--itch-io-backcolor);
}

.link.github {
    background-color: var(--github-backcolor);
}

.profile-avatar {
    width: 10em;
    height: 10em;

    background: url("https://avatars.githubusercontent.com/u/108463574");
    background-size: cover;

    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.portfolio-footer {
    display: flex;

    flex-direction: row;
    position: absolute;
    bottom: 0;

    height: 50px;
    width: 100%;

    background-color: var(--foreground-light-color);
}

.portfolio-footer .dash-lines {
    background: url("../images/dashBackground.svg") center;
    background-size: 2.5em;

    margin: 0 1em;

    height: 0.25em;
    width: 100%;

    align-self: center;
}

.portfolio-footer p {
    font-size: 1.2em;
    text-wrap-mode: nowrap;

    align-self: center;
}

.content-parent {
    width: calc(100% - 10em);
    padding: 5em;
    margin-bottom: 5em;
}

/* Portfolio common */

.portfolio-content {
    display: flex;
    flex-direction: column;

    margin: 5em auto;

    gap: 1em;
}

/* - Ballmen section */

.ballmen-section {
    font-size: 1.3em;
}

.ballmen-section * {
    font-family: 'Geologica';
}

.ballman-character-background {
    background: url("../images/ballman.png") fixed no-repeat right;
    background-position-y: 22.5vh;

    height: 120%;
    width: 120%;

    transition: background-position 1.5s ease, background-size 1s ease;
}

.ballmen-background {
    background: url("../images/ballmenBackground.png") fixed repeat center;
    background-size: cover;

    transition: background-position 0.5s ease-out;
}

.focused > .ballmen-background {
    background-position-y: 0;
}

.unfocused > .ballmen-background {
    background-position-y: 10vh;
}

.focused > .ballman-character-background {
    background-size: min(60vw, 60vh);
    background-position-x: 60vw;
}

.unfocused > .ballman-character-background {
    background-size: min(80vw, 80vh);
    background-position-x: 125vw;
}

/* Cut-Cut section*/

.cut-cut-section {
    font-size: 1.3em;
}

.cut-cut-section * {
    font-family: Galiver Sans;
    font-weight: normal;
}

.cut-cut-background {
    background: url("../images/cutcutBackground.png") fixed repeat center;
    background-size: cover;

    transition: background-position 0.5s ease-out;
}

.focused > .cut-cut-background {
    background-position-y: 0;
}

.unfocused > .cut-cut-background {
    background-position-y: 10vh;
}

/* Air Smith section*/

.air-smith-section {
    font-size: 1.3em;
}

.air-smith-div {
    background-color: #222222;
    color: #eeeeee;
}

.air-smith-section * {
    font-family: Roboto;
    font-weight: normal;
}

.air-smith-background {
    background: url("../images/airSmithBackground.png") fixed repeat center;
    background-size: cover;

    transition: background-position 0.5s ease-out;
}

.focused > .air-smith-background {
    background-position-y: 0;
}

.unfocused > .air-smith-background {
    background-position-y: 10vh;
}