/* Utilizzo "Ispeziona elemento" con dimensioni iPhone 12Pro */

/* CSS Reset + Font */

@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

img {
    max-width: 100%;
    margin-bottom: 1rem;
}

a:hover p {
    color: white;
}

a:hover span {
    color: #33baf3;
}

a:hover span,
a:hover p {
    text-decoration: underline;
}

/* Colore Sfondo */
body {
    background: linear-gradient(#000074, #4646f5);
    background-attachment: fixed;
}

/* INIZIO Logo */
header a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2em;
    color: #33baf3;
    font-style: oblique;
    font-weight: bolder;
    text-decoration: none;
    width: 150px;
}

header img {
    margin-bottom: 15px;
    width: 56px;
    /* Height è implicita in realtà */
    height: auto;
}

/* FINE Logo */
section {
    margin-bottom: 2rem;
}

h1 {
    color: rgb(199, 150, 38);
    padding-bottom: 2rem;
}

h2 {
    color: rgb(199, 150, 38);
}

/* Contenitore dei link alle app */
.app-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 1200px) {
    .app-container {
        justify-content: flex-start;
    }
}

/* Stile dei link/a */
.app-container a {
    margin: 50px 20px 0;
    width: 100px;
    text-decoration: none;
    color: white;
    text-align: center;
}


/* Le immagini usate come link devono riempire tutto lo spazio dato ai link/a */
.app-container a img {
    width: 100%;
}

.app-container a p {
    font-size: 1em;
}

.logo {
    padding: 0.75rem;
    border-radius: 1.5rem;
}

.bg_dark {
    background: linear-gradient(rgb(70, 70, 70), #000000);
}

#world {
    background: linear-gradient(rgb(238, 238, 238), #a7a7a7);
}

#elden {
    border-radius: 1.5rem;
}

#social {
    background: linear-gradient(rgb(0, 21, 255), rgb(101, 174, 252));
    aspect-ratio: 1;
    font-size: 3rem;
    font-family: 'DynaPuff', cursive;
    margin-bottom: 1rem;
}

a:hover #social {
    color: #FFF;
}

#discord {
    background-color: #5865f2;
}

#spotify {
    background-color: #000;
}

#play {
    background-color: #FFF;
}

#bool {
    aspect-ratio: 1;
    object-fit: contain;
}