section.home
{
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}



section.home > div.flags
{
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 999;
}

section.home > div.flags > ul
{
    list-style: none;
}

section.home > div.flags > ul > li
{
    font-family: var(--mono);
    padding-bottom: 0.3rem;
}

section.home > div.flags > ul > li > a > img
{
    width: 30px;
}



section.home > div.wrapper > div.creative
{
    display: flex;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

section.home > div.wrapper > div.creative > span
{
    transform: translateY(200px);
}

section.home > div.wrapper
{
    transform-style: preserve-3d;
    text-align: right;
    margin: auto;
    height: calc(100vh - 205px - 151px);
}

section.home > div.logo
{
    padding: 5rem 0;
}

section.home > div.logo > img
{
    width: 103px;
}

section.home > div.wrapper > div.creative
{
    font-size: var(--bigFontSize);
    font-family: var(--display);
    line-height: var(--bigFontSize);
}

section.home > div.wrapper > div.designerAndDeveloperWrapper
{
    position: relative;
}

section.home > div.wrapper > div.designerAndDeveloperWrapper > div.designer
{
    position: absolute;
    font-size: var(--bigFontSize);
    font-family: var(--display);
    line-height: var(--bigFontSize);
    background: linear-gradient(45deg,
    #ff0000 0%, 
    #ff9a00 10%,
    #d0de21 20%,
    #4fdc4a 30%, 
    #3fdad8 40%,
    #2fc9e2 50%, 
    #1c7fee 60%, 
    #5f15f2 70%, 
    #ba0cf8 80%, 
    #fb07d9 90%, 
    #ff0000 100%  )
    repeat 0% 0% / 300% 100%;
    animation: rgb 10s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

@keyframes rgb
{
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}



section.home > div.wrapper > div.designerAndDeveloperWrapper > div.developer
{
    font-size: var(--bigFontSize);
    font-family: var(--mono);
    line-height: var(--bigFontSize);
    white-space: nowrap;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

section.home > div.wrapper > div.designerAndDeveloperWrapper > div.developer > span
{
    color: #a73acf;
}

section.home > div.wrapper > img.name
{
    width: 15vw;
    padding-top: 1rem;
    padding-right: calc(var(--smallFontSize) * 2);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

section.home > img.scrollDown
{
    width: 110px;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    animation: scrollDown 10s linear infinite;
    transform: translateX(-50%);
    transform-origin: 0;
    cursor: pointer;
}

@keyframes scrollDown
{
    0% { rotate:0deg; }
    100% { rotate:360deg; }
}



section.banner
{
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 9996;
    margin-top: 2rem;
}

section.banner > div
{
    background-color: var(--black);
    position: relative;
    overflow: hidden;
    min-width: max-content;
    animation: bannermove 50s linear infinite;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    padding: 1.5rem 0;
}

section.banner > div > h1
{
    font-family: var(--mono);
    font-size: var(--smallFontSize);
    white-space: nowrap;
    color: var(--white);
    font-weight: normal;
}

section.banner > div > h1.graphic
{
    font-family: var(--display);
}

section.banner > div > h1.star
{
    color: var(--pistachio);
}

@keyframes bannermove
{
    100% { transform: translateX(-50%); }
}







@media only screen and (orientation: portrait)
{
    section.home > div.wrapper > img.name
    {
        width: 200px;
    }

    section.banner
    {
        margin-top: 0;
    }

    section.banner > div
    {
        gap: 1rem;
        padding: 0.5rem 0;
        margin-top: 2rem;
    }
}


@media only screen and (max-height: 600px)
{
    section.home > img.scrollDown
    {
        display: none;
    }
}