@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@200&display=swap');

/*
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
### Primary
- Orange: hsl(25, 97%, 53%)
### Neutral
- White: hsl(0, 0%, 100%)
- Light Grey: hsl(217, 12%, 63%)
- Medium Grey: hsl(216, 12%, 54%)
- Dark Blue: hsl(213, 19%, 18%)
- Very Dark Blue: hsl(216, 12%, 8%)
*/

**{
    margin: 0;
    padding: 0;
    
}

body {
    background-color: hsl(216, 12%, 8%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Overpass', sans-serif;
}

main#start {
    color: hsl(217, 12%, 63%);
    background-color: hsl(213, 19%, 18%);
    width: 290px;
    border-radius: 20px;
    padding: 20px;
    text-align: justify;
    margin: auto;   
}

h1 {
    color: white;
}

ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    text-align: center;
    max-width: 100%;
    padding: 0;
}

li, .img-star {
    padding: 15px;
    background-color: hsla(213, 20%, 35%, 0.20);
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

li:hover {
    background-color: hsl(25, 97%, 53%);
    cursor: pointer;
    color: white;
}

/*li:active{
    background-color: hsl(217, 12%, 63%);
}*/

button {
    width: 100%;
    border-radius: 25px;
    border: 0;
    padding: 10px;
    margin: 0;
    background-color: hsl(25, 97%, 53%);
    color: white;
}

button:hover {
    background-color: white;
    color: hsl(25, 97%, 53%);
    cursor: pointer;
}

.attribution {
    font-size: 11px; text-align: center;
    color: white;
}
.attribution a {
    color: hsl(228, 45%, 44%);
}

section {
    background-color: white;
}