/* Variables */















:root {







    --main-bg: #222;







    --block-bg: #333;







    --block-corner: 20px;







    --block-filter: unset;







    --img-filter: unset;







    --transition-time: 0.15s;







}















/* Animations */















@keyframes breathing {







    0% {







        box-shadow: #777 0 0 80px;







    }







    25% {







        box-shadow: #555 0 0 50px;







    }







    100% {







        box-shadow: #777 0 0 80px;







    }







}















@keyframes moving {







    0% {







        transform: rotate(-180deg);







    }







    25% {







        transform: rotate(-90deg);







    }







    50% {







        transform: rotate(-0deg);







    }







    75% {







        transform: rotate(-90deg);







    }







    100% {







        transform: rotate(-180deg);







    }







}















@keyframes moving2 {







    0% {







        transform: rotate(0deg);







    }







    25% {







        transform: rotate(90deg);







    }







    50% {







        transform: rotate(180deg);







    }







    75% {







        transform: rotate(90deg);







    }







    100% {







        transform: rotate(0deg);







    }







}















@keyframes glowing {







    0% {







        color: #aaa;







    }







    50% {







        color: #eee;







    }







    100% {







        color: #aaa;







    }







}















/* Displaying */















::selection {







    background: rgb(10, 79, 88);







    color: #eee;







}















html {







    width: 100%;







    height: 100%;







}















body {







    background: #222;







    user-select: none;







    -moz-user-select: none;







    -webkit-user-select: none;







    /* min-width: 740px; */







    display: flex;







    margin: 0;







    font-family: "Open Sans",Arial,sans-serif;







}















body::-webkit-scrollbar {







    display:none;







}















body .flyingblocks {







    position: fixed;







    width: 100%;







    height: 100%;







    z-index: -1;







}















body .flyingblocks .color {







    height: 1000%;







    width: 20%;







    position: absolute;







    top: -450%;







    filter: blur(130px);







}















body .flyingblocks .c1 {







/*    background: #065291;*/







    left: -40%;







    animation: moving infinite linear 120s;







    z-index: 2;







    animation-delay: 30s;







}















body .flyingblocks .c2 {







    left: 120%;







/*    background: #17a749;*/







    animation: moving2 infinite linear 140s;







    z-index: 1;







}


body .flyingblocks .c1 {
    background: #ad06ae;
}
body .flyingblocks .c2 {
    background: #5a0990;
}



#main {







    width: max-content;







    height: max-content;







    max-width: 940px;







    background: var(--main-bg);







    margin: auto;







    padding: 20px;







    border-radius: calc(20px + var(--block-corner));







    animation: breathing infinite ease-in-out 4s;







    z-index: 1;







    display: flex;







    flex-direction: column;







    gap: 15px;







}















/* Credits -------------------------------------------------------------- 















<div class="group credits right">







    <p>Created by <a>Author</a></p>







</div>







*/















#main .group.credits {







    width: 100%;







    display: flex;







    border-top: #666 1px solid;







    width: 100%;







}















#main .group.credits.left {







    flex-direction: row;







}















#main .group.credits.left p {







    margin-left: 5px;







}















#main .group.credits.right {







    flex-direction: row-reverse;







}















#main .group.credits.right p {







    margin-right: 5px;







}















#main .group.credits > p {







    margin: 0;







    color: #899988;







    letter-spacing: 0.5px;







    padding-top: 5px;







    font-size: 14px;







}















#main .group.credits > p > a[href] {







    animation: glowing infinite linear 5s;







    text-decoration: underline;







}















/* ---------------------------------------------------------------------- */















#main .group {







    width: max-content;







    height: max-content;







    display: flex;







    gap: 20px;







    flex-wrap: wrap;







    flex-direction: column;







}















#main .group .block .container {







    width: 100%;







    height: 100%;







    display: flex;







    flex-direction: column;







}















#main .group .block .container:not(.scrollable) p:first-of-type {







    margin-top: 10px;







}















#main .group .block .container.scrollable div.list {







    margin-top: 10px;







    height: max-content;







    overflow-y: scroll;







    overflow-x: hidden;







    display: flex;







    flex-direction: column;







    gap: 3px;







}















#main .group .block .container.scrollable div.list::-webkit-scrollbar {







    width: 8px;







}















#main .group .block .container.scrollable div.list::-webkit-scrollbar-track {







    background: transparent;







}















#main .group .block .container.scrollable div.list::-webkit-scrollbar-thumb {







    background: #222;







    border-radius: 20px;







}















#main .group .block .container.scrollable div.list p.cursive {







    color: #888;







}















#main .group .block .container.scrollable div.list p.flashing {







    animation:flashing 1.5s ease-in-out infinite;







}















#main .group .block .container p {







    color: #eee;







    margin: 0;







    display: block;







    padding: 0;







    font-size: 21.5px;







    width: max-content;







    margin-left: 5px;







    text-transform: uppercase;







    letter-spacing: 1.5px;







}















/* #main .group .block .container .hidden * {







    opacity: 0;







    transition: var(--transition-time);







}















#main .group .block .container .hidden {







    color: transparent;







    margin-left: -0.5px;







    background: #222;







    padding: 1px 5px 3px 7px;







    margin-top: 3px;







    border-radius: 10px;







    transition: var(--transition-time);







    cursor: pointer;







    z-index: 10;







    position: relative;







    overflow: hidden;







}















#main .group .block .container .hidden span.displaytext {







    position: absolute;







    transform: translateX(-50%) translateY(-50%);







    opacity: 1;







    z-index: 200;







    display: block;







    color: #666;







    top: 50%;







    left: 50%;







    font-style: italic;







    margin: 0;







    width: 100%;







    text-align: center;







}















#main .group .block .container .hidden:hover:active {







    color: #eee;







    background: #444;







    cursor: none;







}















#main .group .block .container .hidden:hover:active * {







    opacity: 1;







}















#main .group .block .container .hidden:hover:active span.displaytext {







    opacity: 0;







} */















#main .group .block .container p * {







    opacity: 1;







    margin: 0;







    padding: 0;







    transition: var(--transition-time);







}















#main .group .block .container p *[href] {







    text-decoration: none;







    font-style: italic;







    cursor: pointer;







}















#main .group .block .container ul li::marker {







    content: '';







}















#main .group .block .container.text {







    width: calc(100% - 40px);







    height: calc(100% - 40px);







    margin: 20px;







    display: flex;







    justify-content: space-between;







}















#main .group .block .container.text p > span.transportlover {



    display:flex;



    flex-direction:row;



    column-gap:4px;



}















#main .group .block .container.text p > span.transportlover > a {



    display:flex;



}















#main .group .big .block .tooltip {







    transform: translateY(-100%);







    font-size: 17px;







}















#main .group .big .block:hover .tooltip {







    opacity: 1;







}















#main .group .small .scrolline .block .tooltip {







    transform: translateY(-100%);







    font-size: 14px;







}















#main .group .small .scrolline .block:hover .tooltip {







    opacity: 1;







}















#main .group .small::-webkit-scrollbar {







    display: none;







}















#main .tooltip {







    width: calc(100% - 10px);







    height: max-content;







    background: rgba(0, 0, 0, 0.8);







    text-align: center;







    padding: 7px 5px;







    color: #bbb;







    z-index: 99;







    margin: 0;







    word-wrap: break-word;







    opacity: 0;







    transition: var(--transition-time);







    position: relative;







    border-radius: 0px 0px var(--block-corner) var(--block-corner);







}















#main .group .block .container img:not(.flag) {







    width: 100%;







    border-radius: var(--block-corner);







    -webkit-user-drag: none;







    filter: var(--img-filter);







}















#main .group .block .container .flag {







    height: 21px;







    width: auto;







    border-radius: 5px;







    margin-left: 8px;







    margin-right: 1.5px;







    position: relative;







    top: 2.5px;







    transition: var(--transition-time);





    user-select:none;

    -webkit-user-select:none;

    -moz-user-select:none;

    user-drag:none;

    -webkit-user-drag:none;







}















#main .group .block .container .flag.detail {







    margin:auto 0;



    top:0;



    width:24px;



    height:24px;



    filter:invert(1);







}















#main .group .block .container h1 {







    color: #eee;







    margin: 0;







    margin-left: 5px;







    font-size: 35px;







    letter-spacing: 2px;







    text-transform: uppercase;







    width: max-content;







}















#main .group .block .container h1::after {







    height: 3px;







    width: calc(130%);







    position: relative;







    top: 1px;







    left: -3px;







    background: linear-gradient(90deg,#eee 0%, var(--block-bg) 80%);







    display: block;







    content: "";







    transition: width var(--transition-time);







    border-radius: 30px;







}















#main .group .block .container .ig {







    width: 80%;







    margin: auto;







    filter: invert() brightness(0.85);







    transition: margin var(--transition-time);







}















#main .group .big {







    width: 940px;







    height: 300px;







    display: flex;







    gap: 20px;







    flex-wrap: wrap;







    flex-direction: row;







}















#main .group .big .block {







    width: 300px;







    height: 300px;







    background: var(--block-bg);







    border-radius: var(--block-corner);







    filter: var(--block-filter);







    overflow: hidden;







    position: relative;







}















#main .group .big .block.width2 {

    width: 620px;

}















#main .group .block img {







    filter: var(--img-filter);







    border-radius: --block-corner;







}















#main .group .small {







    width: 940px;







    height: max-content;







    display: flex;







    overflow-x: scroll;







    flex-wrap: wrap;







    gap: 20px;







    flex-direction: column;







}















#main .group .small .scrolline {







    width: 940px;







    display: flex;







    gap: 20px;







    justify-content: space-evenly;







    flex-direction: row;







    z-index: 4;







}















#main .group .small .scrolline .block {







    width: 172px;







    min-width: 172px;







    max-width: 172px;







    height: 172px;







    background: var(--block-bg);







    border-radius: var(--block-corner);







    filter: var(--block-filter);







    z-index: 5;







}















#main .group .block a.link {







    text-decoration: none;







}















.spacing0-5 {letter-spacing: 0.5px !important;}







.spacing1 {letter-spacing: 1px !important;}







.spacing1-5 {letter-spacing: 1.5px !important;}







.spacing2 {letter-spacing: 2px !important;}







.spacing2-5 {letter-spacing: 2.5px !important;}







.spacing3 {letter-spacing: 3px !important;}















/* Responsibility */















@media screen and (width >= 750px) and (width < 1050px) and (height >= 740px) {







    #main {







        width: max-content;







        height: max-content;







        margin: 50px auto;







    }







    #main .group {







        flex-direction: row;







    }







    #main .group .big {







        width: 300px;







        height: 940px;







    }







    #main .group .small {







        height: 940px;







        width: 172px;







        overflow-x: hidden;







    }







    #main .group .small .scrolline {







        height: 960px;







        flex-direction: column;







        overflow-y: scroll;







        overflow-x: hidden;







        width: 100%;







    }







    #main .group .small .scrolline::-webkit-scrollbar {







        display:none;







    }







    #main .group .small .scrolline .block {







        height: 172px;







        min-height: 172px;







        max-width: 172px;







        width: 172px;







    }







    .tab-order-1 {







        order: 1;







    }







    .tab-order-2 {







        order: 2;







    }







    .tab-order-3 {







        order: 3;







    }



    







    #main .group .big .block.width2 {

        width: 300px;

        height: max-content;

    }



    #main.max-content .group .big {

        height: max-content;

    }







}















@media screen and (width >= 750px) and (width < 1050px) and (height < 740px) {







    #main.max-content {

        height: max-content;

    }



    #main .group .big .block.width2 {

        width: 300px;

        height: max-content;

    }



    #main {







        width: max-content;







        height: max-content;







        margin: 50px auto;







    }





    #main .group {







        flex-direction: row;







    }







    #main .group .big {







        width: 300px;







        height: 940px;







    }







    #main .group .small {







        height: 940px;







        width: 172px;







    }







    #main .group .small .scrolline {







        height: 960px;







        flex-direction: column;







        overflow-y: scroll;







        overflow-x: hidden;







        width:100%;







    }







    #main .group .small .scrolline::-webkit-scrollbar {







        display:none;







    }







    #main .group .small .scrolline .block {







        height: 172px;







        min-height: 172px;







        max-width: 172px;







        width: 172px;







    }







    .tab-order-1 {







        order: 1;







    }







    .tab-order-2 {







        order: 2;







    }







    .tab-order-3 {







        order: 3;







    }







}















@media screen and (width > 1000px) and (height < 630px) {







    #main {







        margin: 50px auto;







    }







}















@media screen and (width > 740px) and (height > 950px) {







    #main {







        margin: auto;







    }







}















@media screen and (width < 750px) {







    #main {







        width: max-content;







        height: max-content;







        margin: 50px auto;







    }







    #main .group {







        flex-direction: column;







    }







    #main .group .big {







        width: 300px;







        height: 940px;







    }







    #main .group .small {







        width: 300px;







        height: max-content;







    }







    #main .group .small .scrolline {







        height: max-content;







        flex-direction: row;







        flex-wrap: wrap;







        width: 100%;







    }







    #main .group .small .scrolline .block {







        height: 140px;







        min-height: 140px;







        min-width: 140px;







        width: 140px;







        position: relative;







    }







    .mob-order-1 {







        order: 1;







    }







    .mob-order-2 {







        order: 2;







    }







    .mob-order-3 {







        order: 3;







    }







}















@media screen and (width < 400px) {







    body {







        zoom:0.85;







    }







}















@media (hover: none) {







    #main .group .small .scrolline .block .tooltip {







        display: none;







    }







    #main .group .big .block .tooltip {







        display: none;







    }







    .flag {







        display: none;







    }







}



@keyframes flashing {

    0% {

        color:#888;

    }

    50% {

        color:#fff;

    }

    100% {

        color:#888;

    }

}