@font-face {
  font-family: 'Indie Flower';
  src: URL('https://msf.kodaro.it/static/indieflower.ttf') format('truetype');
}

body {
    margin: 0px;
    position: absolute;
    width: 100%;
}

main {
    margin: 0px;
    padding: 1px;
    font-family: Indie Flower;
    background-image: url("/static/splash.jpg");
    background-size: 80vw;

    .glue-container {
        max-width: 1400px;
        margin: auto;
        padding: 2%;
        position: relative;

        svg {
            transition: ease all;
            transition-duration: 1s;
        }

        section {
            position: absolute;
            top: 9%;
            height: 67%;
            width: 80%;
            margin: 2%;
            left: 8%;
            /* background-color: rgba(0,0,0,0.5); */
        }
    }

    h1 {
        text-align: center;
    }
}

#license-text a {
    color: inherit;
}

#script {
    display: none;
}

#logo {
    text-align: center;
    padding: 1%;
}

#logo img {
    width: 500px;
    max-width: 60%;
}

a {
    text-decoration: none;
}

button {
    background-color: transparent;
    border: none;
    font-family: Indie Flower;
}

.frame {
    display: block;
    width: 100%;
    text-align: center;

    img {
	max-width: 100%;
    }
}

table {
    text-align: left;
    margin: auto;
}

.baloon {
    background-color: white;
    border: 10px solid black;
    padding: 2%;
    font-family: Indie Flower;
    font-size: 15px;
}

#update {
    position: absolute;
    top: 4%;
    left: 5%;
    width: 20%;
    height: 70%;
    transform: rotate(-4deg);
    background-image: url("/static/update.jpg");
    background-size: cover;
}
#share {
    position: absolute;
    top: -1%;
    left: 37%;
    width: 20%;
    height: 70%;
    background-image: url("/static/artworks.jpg");
    background-size: cover;
}
#touch {
    position: absolute;
    top: -4%;
    left: 69%;
    width: 20%;
    height: 70%;
    transform: rotate(4deg);
    background-image: url("/static/touch.jpg");
    background-size: cover;
}

.disabled img {
    opacity: 50%;
}

@media (width <= 1400px) {

    #characters img {
        display: none;
    }

    #characters section {
        width: 100% !important;
        padding: 2%
    }

    .desktop {
        display: none;
    }

}

@media (width > 1400px) {
    .frame a img:hover, button img:hover {
	opacity: 50%;
    }
}