html,body {
    padding:0;
    margin:0;
    height:100vh;
    width: 100vw;
    font-weight: 800;
    color: hsl(193, 38%, 86%);  
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
    }
* {
    --primary-1: hsl(193, 38%, 86%);
    --primary-2: hsl(150, 100%, 66%);
    
}

.attribution {
    position:absolute;
    top:90%;
    left: 50%;
    transform: translateX(-50%);  
    z-index:2;
}
.advice-wrapper {
    background-color:hsl(218, 23%, 16%);
    height:100%;
    display:flex;
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100vw;
}

.advice-number-info{
    color:hsl(150, 100%, 66%);
    letter-spacing: 4px;
    padding-top: 36px;
    padding-bottom: 16px;
    font-size:12px;
    
}
#outer-advice {
    margin:0px 10%;
    padding:0px;
    font-size: 1.75em;
    padding-bottom: 24px;
    animation-duration: 1s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-left:100%;
    }
   
}
.advice-inner-container {
   
    background-color: hsl(217, 19%, 24%);
    
    display:flex;
    flex-direction: column;
    align-items: center;
  
    width: 40%;
    text-align: center;
    border-radius:3%;
}
.die-container {
    cursor:pointer;
    border-radius: 50%;
    width:60px;
    height:60px;
    background-color: hsl(150, 100%, 66%);
    display:flex;
    align-items: center;
    justify-content: center;
    justify-self: flex-end;
    position:relative;
    top:29px;
    z-index:3;

}

.die-container:hover {
    background-color:hsl(150, 66%, 55%); ;
}

.advice-divider-images {
width: 80%;
}
#advice-divider {
    width:100%; 
}


@media (max-width:375px) {
    .advice-wrapper {
        display:block;
        margin:auto;
    }
    .advice-inner-container {
        position:relative;
        top: 18%;
        width: 90%;
        margin:auto;
    }
   
    
}