/* Media queries adapted for phone */
@media only screen and (max-width: 600px) {

    .SocialMediaButtons,
    .TvShowAndReading,
    .Games {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .button {
        margin: 5px !important;
        align-self: center;
    }

}

/* Reset General */
*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html,
body {
    display: grid;
    font-family: "Poppins", sans-serif;
    height: 100%;
    width: 100%;
    background: linear-gradient(315deg, #fff 0%, #d7e1ec 74%);
    align-items: center;
}

h1,
h2,
p {
    text-align: center;
    padding: 10px 5%;
    /* (top : 10px, bot: 5%) */
}

img {
    max-width: 30px;
    object-fit: cover;
    vertical-align: middle;
}

/* Container that encompasses all divs */
.container {
    margin: 0 1%;
    background-color: #D66D6D;
}

/* Divs on middle (middle, all buttons) */
.SocialMediaButtons,
.TvShowAndReading,
.Games {
    display: flex;
    background-color: #66D6D6;

    justify-content: center;
    transition: 1s;
}

.button {
    height: 60px;
    width: 60px;
    margin: 0 5px;
    border-radius: 50px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);

    overflow: hidden;
    cursor: pointer;

    transition: all 0.3s ease-out;
    background: #fff;
}

.button .icon,
.button .iconLocal {
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
}

.button span {
    display: none;
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all 0.3s ease-out;
}

.button .o {
    margin-left: 0px;
}

.button:hover {
    width: 200px;
}

.button:hover span {
    display: inline;
}


.fa-github {
    /* Color of icon (Github) */
    color: #333;
}

.SocialMediaButtons .button:nth-child(1):hover {
    /* Color of button background (Github) during a hover */
    background: #333;
}

.fa-twitter {
    /* Color of icon (Twitter) */
    color: #1D9BF0;
}

.SocialMediaButtons .button:nth-child(2):hover {
    /* Color of button background (Twitter) during a hover */
    background: #1D9BF0;
}

.fa-instagram {
    /* Gradiant color of icon (Insta) */
    background-image: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.SocialMediaButtons .button:nth-child(3):hover {
    /* Gradiant color of button background (Insta) during a hover */
    background-image: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.fa-youtube {
    /* Color of icon (Youtube) */
    color: #ff0000;
}

.SocialMediaButtons .button:nth-child(4):hover {
    /* Color of button background (Youtube) during a hover */
    background: #ff0000;
}

.fa-tiktok {
    /* Anaglyph color of icon (TikTok) */
    color: #111;
    filter: drop-shadow(1px 0px 0px #FD3E3E) drop-shadow(-1px -1px 0px #4DE8F4);
    margin-left: initial;
}

.SocialMediaButtons .button:nth-child(5) span {
    /* Anaglyph color the letter "o" in "Tiktok" (TikTok) */
    letter-spacing: 2px;
}

.SocialMediaButtons .button:nth-child(5) span .o {
    /* Anaglyph color the letter "o" in "Tiktok" (TikTok) */
    color: #FFF;
    filter: drop-shadow(0.5px 0px 0px #FD3E3E) drop-shadow(-0.5px -.5px 0px #4DE8F4);
    margin-left: initial;
}

.SocialMediaButtons .button:nth-child(5):hover {
    /* Color of button background (Tiktok) during a hover */
    background: #333;
}

.fa-twitch {
    /* Color of icon (Twitch) */
    color: #6441A5;
}

.SocialMediaButtons .button:nth-child(6):hover {
    /* Color of button background (Twitch) */
    background: #6441A5;
}

.fa-spotify {
    /* Color of icon (Spotify) */
    color: #1DB954;
}

.SocialMediaButtons .button:nth-child(7):hover {
    /* Color of button background (Spotify) during a hover */
    background: #1DB954;
}

.fa-snapchat {
    /* Color of icon (Snapchat) */
    color: #FFFC00;
}

.SocialMediaButtons .button:nth-child(8):hover {
    /* Color of button background (Snapchat) during a hover */
    background: #FFFC00;
}

.fa-discord {
    /* Color of icon (Discord) */
    color: #7289DA;
}

.SocialMediaButtons .button:nth-child(9):hover {
    /* Color of button background (Discord) during a hover */
    background: #7289DA;
}

.TvShowAndReading .button:nth-child(1):hover {
    /* Color of background button (TvTime) during a hover */
    background: #F9D457;
}

.TvShowAndReading .button:nth-child(1):hover .iconLocal img {
    /* A compléter */
    content: url(../img/TvTimeHover.png);
}

.TvShowAndReading .button:nth-child(2):hover {
    /* Color of background button (MyAnimeList) during a hover */
    background: #2E51A2;
}

.TvShowAndReading .button:nth-child(2):hover .iconLocal img {
    /* A compléter */
    content: url(../img/MyAnimeListHover.png);
}

.TvShowAndReading .button:nth-child(3):hover {
    /* Color of background button (Anilist) during a hover */
    background: #1E2630;
}

.TvShowAndReading .button:nth-child(3):hover .iconLocal img {
    /* A compléter */
    content: url(../img/AnilistHover.png);
}

.TvShowAndReading .button:nth-child(4):hover {
    /* Color of background button (Gleeph) during a hover */
    background: #252525;
}

.TvShowAndReading .button:nth-child(4):hover .iconLocal img {
    /* A compléter */
    content: url(../img/GleephHover.png);
}

.TvShowAndReading .button:nth-child(5):hover {
    /* Color of background button (Wattpad) during a hover */
    background: #FF4F0B;
}

.TvShowAndReading .button:nth-child(5):hover .iconLocal img {
    /* A compléter */
    content: url(../img/WattpadHover.png);
}

.Games .button:nth-child(1):hover {
    /* Color of background button (Epic games) during a hover */
    background: #333;
}

.Games .button:nth-child(1):hover .iconLocal img {
    /* A compléter */
    content: url(../img/EpicGamesHover.png);
}

.fa-steam {
    /* Gradient color of icon & span (Steam) */
    background-image: linear-gradient(120deg, #00ADEE, #000);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.Games .button:nth-child(2):hover {
    /* Gradient color of button background (Steam) during a hover */
    background-image: linear-gradient(120deg, #00ADEE, #000);
}

.Games .button:nth-child(3):hover {
    /* Color of background button (GOG) during a hover */
    background: #0f0f0f;
}

.Games .button:nth-child(3):hover .iconLocal img {
    /* A compléter */
    content: url(../img/GogHover.png);
}

.Games .button:nth-child(4):hover {
    /* Color of background button (Uplay) during a hover */
    background-image: conic-gradient(from 358deg at center center, #84343e 20%, #758237 30%, #2e8486 70%, #353687 80%);
}

.Games .button:nth-child(4):hover .iconLocal img {
    /* A compléter */
    content: url(../img/UplayHover.png);
}

/****************************************/
.button:hover .fab,
.button span {
    /* Color of icons & span by defaut and during a hover */
    color: whitesmoke;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}