body {
    background-color : rgb(29, 161, 243);
    color : white;
    font-family : "Source Sans Pro";
    margin : 0;
    overflow-x : hidden;
    display:flex;
    flex-direction : column;
    justify-content: space-between;
    min-height : 100vh;
}

h1 {
    font-size : 35pt;
    margin : 10px 0 0 0;
    text-align : center;
}

main {
    display:flex;
    flex-direction : column;
    justify-content: space-between;
    margin-top : 5vh;
}

.how-it-works {
    display:block;
    font-size : 25pt;
    text-align : center;
}

.mashup-area {
    display:flex;
    justify-content : space-between;
    width : 80%;
    margin : auto;
    margin-top : 20px;
}


.emoji-area {
    width : 40%;
    background-color : white;
    border-radius : 10px;
    max-height : 60vh;
    position : relative;
}

.displayed-emoji {
    animation-name : emoji-entry;
    animation-duration : 700ms;
    animation-fill-mode: forwards;
    margin : auto;
}

@keyframes emoji-entry {
    from {
        height : 0;
    }
    
    to {
       height : 30vh;
    }
}

@keyframes emoji-area-expend {
    from {
        width : 40%; 
        border-radius : 10px;
    }
    
    to {
        width : 50%;
        border-radius : 0;
    }
}

.selector {
    display:flex;
    flex-wrap : wrap;
    justify-content: space-around;
    align-content: space-between;
    padding : 0 5%;
    height : 50vh;
    overflow-y:scroll;
}

.selector::-webkit-scrollbar {
    width: 12px;
}

.selector::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius : 50px;
}

.selector::-webkit-scrollbar-thumb {
    background: black;
    border-radius : 30px;
}

.selector::-webkit-scrollbar-button{
    display:none
}

.selector img {
    width : 70px;
    margin-bottom : 20px;
    margin-left : 20px;
    cursor : pointer;
}

.selector img::selection {
  background-color: transparent;
}

.switch {
    width : 10%;
    height : 8vw;
    background-image : url(media/images/arrows.svg);
    background-size : contain;
    background-repeat : no-repeat;
    background-position: center;
    align-self : center;
}

.switch-rotate {
    animation-name : switch-rotate;
    animation-duration : 200ms;
    animation-fill-mode: forwards;
}

@keyframes switch-rotate {
    from {
        transform : rotate(0);
    }
    
    to {
        transform: rotate(360deg);
    }
}

h2 {
    color:black;
    text-align : center;
    margin : 0 0 10px 0;
}

.selected-emoji {
    width : 50px;
    height : 50px;
}

button {
    font-family : "Source Sans Pro";
    font-size : 1.5vw;
    background-color : rgb(27, 122, 181);
    color : white;
    border : none;
    border-radius : 5000px;
    height : 3vw;
    cursor : pointer;
}

.boutons {
    align-self : center;
    display:flex;
    justify-content : space-around;
    width : 50vw;
    margin-top : 80px;
    margin-bottom : 80px;
    align-items : center;
}

.mashup-button {
    font-size : 2.5vw;
    height : 4vw;
}

.boutons>button {
    width : 30%
}

.boutons>a {
    width : 30%
}

.boutons>a>button {
    width : 100%
}

footer {
    width : 100vw;
    display:flex;
    justify-content : space-around;
    margin-top : 4vh;
    font-size : 9pt;
    background-color : rgb(39, 147, 214);
    padding : 10px;
    color : black
}

footer a {
    color : black;
}

footer>div {
    width : 25%
}

footer div div{
    width : 100%;
    text-align : center;
}

.beta-test {
    font-size : 15pt;
    text-align: center;
}

.beta-test span {
    color : white;
}

/* Mashup page */

.mashup {
    background-color : white;
    border-radius : 10px;
    color : black;
    margin : 0 10vw;
    padding : 0.5vw;;
}

.equation {
    font-size : 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom : 20px;
}

.equation img {
    width : 4vw;
    margin : 10px;
}

.new-emoji {
    display:flex;
    justify-content: center;
    margin-bottom : 20px;
}

iframe {
    width : 70vw;
    height : 60vh;
    border:none;
    font-size : 1.5vw;
}

.buttons {
    display:flex;
    margin : 20px 10vw 0 10vw;
    justify-content: space-around;
    align-items: center;
    
}

.buttons button {
    width : 15vw;
    font-size : 1.5vw;
}

.buttons .restart-button {
    font-size : 2vw;
    height : 4vw;
}

/** ADVERTS **/

.horizontal {
    width : 1200px;
    height : 70px;
    margin : 0 auto 30px auto;
    /**background-color : #1462ad;**/
    display:none;
}