*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: RGB(31, 34, 31);
    font-family: 'Rubik', sans-serif;
}

a{
    border-radius: 50%;
}

.container-menu {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.btn-menu{
    animation: sunlight 20s infinite;
}

.btn-menu.active{
    animation: inherit;
}

.btn-menu.active .logo{
    transform: rotate(180deg);
}

.SL{
  cursor: default;
  text-align: center;
  margin-top: 1%;   
  color: rgba(240, 237, 237, 0.705);
  opacity: 1;
  transition-property: opacity;
  transition: opacity 0,8s ease-in-out;
  -moz-transition: opacity .8s ease-in-out;
  -webkit-transition: opacity .8s ease-in-out;
  -o-transition: opacity .8s ease-in-out;
}

.SL:hover{
  cursor: default;
  opacity: 0;
}

.icone:hover{
    border: 3px solid transparent;
}

@media screen and (min-width: 720px) {
    h1{
        color: lightgray;
        text-align: center;
        font-size: 500%;
        transition: all 0.1s 0.15s ease-in-out;
    }

    h2{
        color: lightgray;
        text-align: center;
        font-size: 200%;
        transition: all 0.1s 0.2s ease-in-out;
    }

    .btn-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-position: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 20;
        cursor: pointer;
    }
    
    .logo{
        width: 400px;
        border-radius: 50%;
        border: 1px solid grey;
        transition: all 0.4s 0s ease-in-out;
    }

    .blob {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s 0s ease-in-out;
        opacity: 0;
    }

    .icone {
        width: 150px;
        border-radius: 50%;
    }

    .H.active .IS{
        opacity: 0;
        transition: all 0.2s 0.2s ease-in-out;
        
    }

    .H.active .SL{
        opacity: 0;
        transition: all 0.19s 0.2s ease-in-out;
    }

    .container-menu.active .blob-1 {
        opacity: 1;
        left: 143%;
    }
    .container-menu.active .blob-2 {
        opacity: 1;
        top: 116%;
        left: 116%;
    }
    .container-menu.active .blob-3 {
        opacity: 1;
        top: 144%;
    }
    .container-menu.active .blob-4 {
        opacity: 1;
        left: -16%;
        top: 116%;
    }
    .container-menu.active .blob-5 {
        opacity: 1;
        left: -43%;
        top: 50%;
    }
    .container-menu.active .blob-6 {
        opacity: 1;
        left: -16%;
        top: -16%;
    }
    .container-menu.active .blob-7 {
        opacity: 1;
        left: 50%;
        top: -43%;
    }
    .container-menu.active .blob-8 {
        opacity: 1;
        left: 121%;
        top: -10%;
    }
}

@media screen and (max-width: 719px) {
    h1{
        margin-top: 10px;
        color: lightgray;
        text-align: center;
        font-size: 250%;
        transition: all 0.1s 0.15s ease-in-out;
    }

    h2{
        color: lightgray;
        text-align: center;
        font-size: 100%;
        transition: all 0.1s 0.2s ease-in-out;
    }

    .SL{
     cursor: default;
     text-align: center;
     margin-top: 1%;   
     color: rgba(240, 237, 237, 0.705);
     opacity: 1;
     transition-property: opacity;
     transition: opacity 0,8s ease-in-out;
     -moz-transition: opacity .8s ease-in-out;
     -webkit-transition: opacity .8s ease-in-out;
     -o-transition: opacity .8s ease-in-out;
    }

    .SL:hover{
     cursor: default;
     opacity: 0;
    }

    .btn-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-position: 50%;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 20;
        cursor: pointer;
    }
    
    .logo{
        width: 200px;
        border-radius: 50%;
        border: 1px solid grey;
        transition: all 0.4s 0s ease-in-out;
    }

    .blob {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s 0s ease-in-out;
        opacity: 0;
    }

    .icone {
        width: 75px;
        border-radius: 50%;
    }

    .container-menu.active .blob-1 {
        opacity: 1;
        left: 97%;
    }
    .container-menu.active .blob-2 {
        opacity: 1;
        top: 124%;
        left: 84%;
    }
    .container-menu.active .blob-3 {
        opacity: 1;
        top: 138%;
    }
    .container-menu.active .blob-4 {
        opacity: 1;
        left: 16%;
        top: 124%;
    }
    .container-menu.active .blob-5 {
        opacity: 1;
        left: 3%;
        top: 90%;
    }
    .container-menu.active .blob-6 {
        opacity: 1;
        left: 17%;
        top: 57%;
    }
    .container-menu.active .blob-7 {
        opacity: 1;
        left: 50%;
        top: 43%;
    }
    .container-menu.active .blob-8 {
        opacity: 1;
        left: 84%;
        top: 56%;
    }
}

@keyframes sunlight{
    0%{
        filter: brightness(100%);
    }
    94%{
        filter: brightness(100%);
    }
    97%{
        filter: brightness(120%);
    }
    100%{
        filter: brightness(100%);
    }
}