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

/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### 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%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Overpass](https://fonts.google.com/specimen/Overpass)
- Weights: 400, 700

*/

/*general styling*/

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

@media only screen and (max-width:375px) {
    body {
    font-size: 12px;
    }
    .main-container, .thanks-state {
        max-width: 75%;
    }

    .main-container ul li button {
        width: 1.5rem;
        height: 1.5rem;
    }

    .attribution {
        font-size: 0.6rem;
    }
}

@media only screen and (min-width:375px) {
    body {
    font-size: 12px;
    }
    .main-container, .thanks-state {
        max-width: 75%;
    }

    .main-container ul li button {
        width: 2rem;
        height: 2rem;
    }

    .attribution {
        font-size: 0.6rem;
    }
}

@media only screen and (min-width:425px) {
    body {
    font-size: 12px;
    }
    .main-container, .thanks-state {
        max-width: 75%;
    }

    .main-container ul li button {
        width: 2.5rem;
        height: 2.5rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:500px) {
    body {
    font-size: 12px;
    }
    .main-container, .thanks-state {
        max-width: 75%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:576px) {
    body {
    font-size: 12px;
    }
    .main-container, .thanks-state {
        max-width: 62%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:768px) {
    body {
    font-size: 15px;
    }

    .main-container, .thanks-state {
        max-width: 45%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:1024px) {
    body {
    font-size: 15px;
    }

    .main-container, .thanks-state {
        max-width: 35%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:1200px) {
    body {
    font-size: 15px;
    }

    .main-container, .thanks-state {
        max-width: 30%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width:1400px) {
    body {
    font-size: 15px;
    }

    .main-container, .thanks-state {
        max-width: 25%;
    }

    .main-container ul li button {
        width: 3rem;
        height: 3rem;
    }

    .attribution {
        font-size: 0.8rem;
    }
}

body {
    font-family: 'Overpass', sans-serif;
    background-color: hsl(216, 12%, 8%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 2rem;
    position: relative;
}

button {
    font-family: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

p {
    line-height: 1.7rem;
}

.main-container, .thanks-state {
    background-image: linear-gradient(to top, hsl(215, 25%, 14%) 0%, hsl(216, 12%, 8%) 100%);
    padding: 2rem;
    border-radius: 0 0 4rem 4rem;
}

.btn-submit {
    width: 100%;
    background-color: hsl(25, 97%, 53%);
    border-radius: 2rem;
    padding: 0.8rem 0 0.7rem;
    color: #fff;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.btn-submit:hover {
    color: hsl(25, 97%, 53%);
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.attribution {
    text-align: center;
    position: absolute;
    bottom: 2%;
  }
  .attribution a {
    color: hsl(25, 97%, 53%);
    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }

  .attribution span {
    color: #fff;
  }

  .dot {
    font-size: 3rem;
  }

/*.main-container phase*/

.main-container img {
    padding: 0.5rem;
    border-radius: 50%;
    background-color: hsl(213, 19%, 26%);
}

.main-container h1 {
    color: #fff;
    margin: 2rem 0 1rem;
}

.main-container p {
    color: hsl(217, 12%, 63%);
    margin-bottom: 1rem;
}

.main-container ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.main-container ul li button {
    border-radius: 50%;
    background-color: hsl(213, 19%, 26%);
    color: #fff;
    padding-top: 0.1rem;
}

.main-container ul li button:hover {
    background-color: hsl(25, 97%, 53%);
    box-shadow: #fff 0px 0px 0px 2px inset, hsl(25, 97%, 53%) 10px -10px 0px -3px;
}

.main-container ul li button:focus {
    background-color: hsl(217, 12%, 63%);
    box-shadow: #fff 0px 0px 0px 2px inset, hsl(217, 12%, 63%) 10px -10px 0px -3px;
}

/*.thanks-state phase*/

.thanks-state {
    text-align: center;
}

.thanks-state img {
    display: block;
    margin: 0 auto 2rem;
}

.rating {
    background-color: hsl(213, 19%, 26%);
    max-width: 60%;
    margin: 0 auto 2rem;
    border-radius: 2rem;
    color: hsl(25, 97%, 53%);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.thanks-state h1 {
    color: #fff;
    margin-bottom: 1rem;
}

.thanks-state .appreciate {
    color: hsl(217, 12%, 63%);
    margin-bottom: 2rem;
}

.hidden {
    display: none;
}