.attribution { 
        font-size: 11px; text-align: center; 
    }

    .attribution a { 
        color: hsl(228, 45%, 44%); 
    }

    html {
        background-color: hsl(216, 12%, 8%);
        font-size: 15px
    }

    body {
        font-family: 'Overpass', sans-serif;
        color: hsl(217, 12%, 63%);
        
    }

    h1 {
        color: hsl(0, 0%, 100%);
        text-align: center;
    }

    p {
        text-align: left;
    }

    .start-state {
        position: absolute;
        margin: auto;
        width: 350px;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 1.5em;
        border: none;
        background-color: hsl(213, 19%, 18%);
        border-radius: 16px;

    }

    .thankYouImg {
        width: auto;
        margin-left: 25%;
        
    }

    .text {
        color:hsl(25, 97%, 53%);
        text-align: center;
        background-color: hsl(216, 12%, 54%, 15%);
        border: none;
        border-radius: 30px;
        padding: 5px;
        margin-left: 25%;
        margin-right: 25%;
        width: auto;
        
        
    }
    .ratebutton {
        display: flex;
        justify-content: center;
        
    }

    .star {
        background-color: hsl(216, 12%, 54%, 15%);
        border: none;
        border-radius: 50%;
        color:hsl(217, 12%, 63%);
        padding: 1rem;

    }

    .numberbutton {
        background-color: hsl(216, 12%, 54%, 15%);
        border: none;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        color:hsl(217, 12%, 63%);
        margin: 8px;
        cursor: pointer;
    }

    .numberbutton:hover {
        background-color: hsl(0, 0%, 100%);
        transition-delay: 25ms;
        transition-duration: 125ms;
        transition-property: background-color;
    }

    .submitorange {
        background-color: hsl(25, 97%, 53%);
        justify-content: center;
        border: none;
        width: 325px;
        height: 3rem;
        border-radius: 25px;
        color:hsl(0, 0%, 100%);
        letter-spacing: 2px;
        margin-left: 15px;
    }

    .thankyoup {
        text-align: center;
    }

    .submitorange:hover {
        background-color: hsl(0, 0%, 100%);
        color:hsl(25, 97%, 53%);
        transition-delay: 25ms;
        transition-duration: 125ms;
        transition-property: background-color;
    }

    #thankYouSection { 
        display: none;
    }

    #rateStartState{
        display: block;
    }