:root {
    --blue: rgb(96, 140, 223);
    --darkblue: rgb(86, 122, 202);
    --darkerblue: rgb(80, 116, 194);
    --darkwhiteBG: #001b421f;
    --clickableColor: rgb(11, 45, 59);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@keyframes intro {
    0% {
        filter: blur(50px);
        opacity: 0%;
        transform: translateY(30px);
    }

    100% {
        filter: blur(0px);
        opacity: 100%;
        transform: translateY(0);
    }
}

/* Merci à https://www.gradient-animator.com/ */
@keyframes backgroundColorAnimated {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes dotsAnimated {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 508px
    }
}

@keyframes dropShadowAnimated {
    0% {
        filter: drop-shadow(0px 0px 10px rgb(255, 0, 0));
    }

    15% {
        filter: drop-shadow(0px 0px 10px rgb(255, 153, 0));
    }

    30% {
        filter: drop-shadow(0px 0px 10px rgb(255, 251, 0));
    }

    45% {
        filter: drop-shadow(0px 0px 10px rgb(72, 255, 0));
    }

    60% {
        filter: drop-shadow(0px 0px 10px rgb(0, 153, 255));
    }

    75% {
        filter: drop-shadow(0px 0px 10px rgb(55, 0, 255));
    }

    90% {
        filter: drop-shadow(0px 0px 10px rgb(174, 0, 255));
    }

    100% {
        filter: drop-shadow(0px 0px 10px rgb(255, 0, 0));
    }

}

#my-banner {
    width: 100%;
}

html {
    font-family: "Poppins";
    font-weight: 500;
    background: linear-gradient(270deg, #72c9dd, #7279dd);
    /* test background: linear-gradient(10deg, #0c2b58, #569eda); */
    background-size: 400% 400%;
    animation: backgroundColorAnimated 30s ease infinite;
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: radial-gradient(var(--darkwhiteBG) 4px, transparent 4px), radial-gradient(var(--darkwhiteBG) 4px, transparent 4px);
    background-size: 46px 46px;
    background-position: 0 0, 23px 23px;
    animation: dotsAnimated 30s linear infinite;
    z-index: 100;
    min-height: 100%;
}

main {
    padding-top: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 25px;
    padding-bottom: 150px;
}

#main-wrapper {
    padding-top: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 25px;
    padding-bottom: 150px;
}

.horizontalElements {
    display: flex;
    gap: 15px;
    flex-direction: row;
}

.imgFit {
    max-width: 60%;
}

.huge {
    width: 100%
}

.normal {
    width: 70%
}

.smol {
    width: 30%
}

.textWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}

.topnav {
    display: flex;
    background-color: #333;
    overflow: hidden;
    position: fixed;
    font-weight: 700;
    top: 0;
    justify-content: space-between;
    left: 0;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding-left: 20px;
    padding-right: 10px;
}

.topnav p {
    color: rgb(196, 226, 255);
}

#logo {
    transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2))
}

#logo:hover {
    transform: scale(1.1);
}

#logo:active {
    transform: scale(.9);
}

.botnav {
    display: flex;
    background-color: #333;
    overflow: hidden;
    position: fixed;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 700;
    bottom: 0;
    justify-content: space-around;
    left: 0;
    flex-direction: column;
    right: 0;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.botnav p {
    color: rgb(196, 226, 255);
}

a {
    color: rgb(196, 226, 255);
    transition: all 0.3s cubic-bezier(0.65, 0.92, 0.12, 2.11);
    text-decoration: none;
    border-bottom: solid #333 0px;
}

a:hover {
    color: rgb(245, 250, 255);
    border-bottom: solid rgb(245, 250, 255) 5px;
    filter: drop-shadow(0px 0px 10px rgb(0, 153, 255));
    animation: dropShadowAnimated 1s linear infinite normal;

}

a:active {
    transform: scale(0.9);
}

.botnav img {
    object-fit: contain;
    size: cover;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: right;
    padding-top: 1px;
    padding-right: 10px;
    align-self: center;
}

.bulle {
    overflow: hidden;
    display: flex;
    transition: all 0.5s;
    flex-direction: column;
    justify-content: center;
    border-radius: 50px;
    padding: 20px;
    align-items: center;
    align-self: center;
    animation: intro 1s cubic-bezier(0, 0, 0, 1);
}

.light {
    color: rgb(9, 49, 77);
    background-color: rgb(200, 239, 255);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.418);
}

.dark {
    color: rgb(226, 243, 255);
    background-color: rgb(29, 74, 92);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.418);
}

.clickable {
    box-sizing: border-box;
    user-select: none;
    transition: all .3s cubic-bezier(0, 0, 0, 1);
    cursor: pointer;
    border: 5px solid var(--clickableColor);
    box-shadow: 0px 10px 0 var(--clickableColor);
}

.clickable:hover {
    box-shadow: 0px 12px 0 var(--clickableColor);
    transform: translateY(-2px);
}

.clickable:active {
    box-shadow: 0px 0px 0 var(--clickableColor);
    transform: translateY(10px);
}

@media (max-width : 600px) {
    #main-wrapper{
        width: 85%;
    }
}