/*
#333399   Azul
#8ec63f   Verde
#00adef   Azul claro

Bernhardt CG Light
Bernhardt CG Medium
Bernhardt CG Bold
font-family: 'Roboto', sans-serif;
*/
:root {
	--azul-oscuro: #333399 ;
	--verde: #8ec63f ;
	--azul-claro: #00adef ;
	--fuente : 'Roboto', sans-serif;
	--fuente-negrita : 'Noto Sans JP', sans-serif;
    }

body {
    margin: 0;
    padding: 0;
    background-color: rgb(255,255,255);
    color: rgb(240,240,240);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    font-family: Verdana, Tahoma, sans-serif;

    /* background-image: linear-gradient(150deg, #ffffff 0%, #ffffff 35%, var(--azul-claro));
	background-size: 100% 100%; */
	/* background: rgb(51,51,153);
	background: radial-gradient(circle, rgba(51,51,153,1) 0%, rgba(142,198,63,1) 35%, rgba(0,173,239,1) 100%); */
	/* animation: bggrdient 5s ease infinite; */
}

/* @keyframes bggrdient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%; }
	100% {background-position: 0% 50%; }
} */
header {
    width: 95%;
    max-width: 788px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    margin-top: 15px;
}

.share-button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(240,240,240);
}

.share-button svg {
    margin-left: 12px;
    margin-top: 10px;
    color: rgb(0,0,0);
}

.container {
    width: 91%;
    max-width: 680px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--azul-oscuro);
}

a {
    text-decoration: none;
    color: rgb(240,240,240);
}

.tile {
    width: 100%;
    background-color: var(--azul-oscuro);
    margin: 7px;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;
}

.tile:hover {
    transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
    transform: scale(1.02);
}

.tile-share-button {
    margin: 8px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--verde);
}

.tile-share-button svg {
    margin-left: 12px;
    margin-top: 10px;
}


.image-container {
    height: 100px;
    width: 100px;
    /* border-radius: 48px; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    
}

.image-container img {
    height: 100%;
    
    
}

.icon {
    margin: auto 12px;
    width: 25px;
    height: 25px;
}