@font-face {
    font-family: my-font;
    src: url(font.ttf);
}

body{
    background-color: #8ab7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: my-font;
    font-size: larger;
    color: rgb(4, 0, 56);
}

.me-flying{
    position: absolute;
    left: 3%;
    top: 25%;
}

#ty{
    position: fixed;
    scale: 600%;
    image-rendering: pixelated;
    margin:auto;
    z-index: -2;
}

#ty > img{
    image-rendering: pixelated;
    position: absolute;
}

.main-window{
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px 15px 15px 15px;
    border-color: rgb(4, 0, 56);
    border-width: 6px;
    border-style:solid;
    padding: 2%;

    line-height: 0.85;

    
}

.main-content{
    padding: 10%;
    width: 50%;

    left: 250px;
    position: relative;
}

button{
    background-color: rgb(4, 0, 56);
    border: none;
    color: white;
    padding: 10px;
    display: inline-block;
    font-size: 20px;
    font-family: my-font;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 15px 15px 5px 5px;
    /* z-index: 3; */
}

button:hover{
    background-color: rgb(30, 24, 122);
}

.clouds-0, .clouds-1, .clouds-2{
    font-size: 0px;   
    display: flex;
    scale: 600%;
    image-rendering: pixelated;
    z-index: -1;
    position: fixed; 
    bottom:0%;

    overflow-x: auto;
}

.clouds-1{
    bottom:15%;
    scale:500%;
    z-index: -3;
}

.clouds-2{
    bottom:20%;
    scale:400%;
    z-index: -4;
}

.clouds-0::-webkit-scrollbar, .clouds-1::-webkit-scrollbar, .clouds-2::-webkit-scrollbar{
    display: none;
}

.clicker_event_button{
    border-radius: 10px 10px 10px 10px;
}

@keyframes scroll{
    from {translate: 0%;}
    to {translate: -100%;}
}

.cloud-row-0{
    display: flex;
    animation: scroll 2s infinite linear;
}

.cloud-row-1{
    display: flex;
    animation: scroll 2s infinite linear;
}

.cloud-row-2{
    display: flex;
    animation: scroll 2s infinite linear;
}

ul > li{
    padding: 10px;
}

a{
    color: rgb(0, 83, 177);
    text-decoration: none;
}

a:visited{
    color: rgb(173, 0, 196);
}

h3{
    font-size: 30px;
}

hr{
    border-style:solid;
    color:rgb(4, 0, 56);
}

#badges > img{
    padding-left: 5px;
    padding-right: 5px;
}

img{
    image-rendering: pixelated;
}

#gallery{
    display: flex;
    justify-content: center;
    align-items: center;
}

#gallery > a > img{
    /* float:left; */
    max-height: 20%;
    max-width: 20%;
    align-items: center;
    image-rendering: optimizeQuality;
    
    flex-flow: row wrap;

    border-style: solid;
    color:rgb(32, 24, 138);
    border-radius: 10px 10px 10px 10px;
    border-width: 5px;
    
}

#gallery > a{
    padding: 15px;
}

.no-page-img{
    width: 40%;
}

/* mobile n shit */
@media only screen and (max-width: 990px) {
    #ty{
        /* position:sticky; */
        scale: 300%;
        image-rendering: pixelated;
        margin:auto;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    /* #ty > img{

    } */

    .main-content{
        padding: 0%;
        padding-top: 20%;
        width: 90%;

        left: 0px;
        position: relative;
    }

    #welcome_message > span{
        width: 3.5%;
        scale:80%;
    }

    .no-page-img{
        width: 80%;
    }
}