:root {
    --bg-color: #CCF8DE;
    --main-color:#02230b;
    --sec-color:#06172a4c;
}
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
    background-color: var(--bg-color);
    font-family: "Poppins", sans-serif;
    
}
/* typography */
h1, h2 {
    text-align: center;
    font-family: "Matemasie", sans-serif;
}

h1 {
    font-size: 4.375rem;
    background: linear-gradient( var(--sec-color), var(--main-color));
    background: -webkit-linear-gradient(var(--sec-color), var(--main-color));
    background-clip:text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size:2.18rem;
    margin-bottom:20px;
}
.get-quote-btn {
    font-size: 1.25rem;
    font-family: "Matemasie", sans-serif;
}
.modal-inner{
    margin-top:25px;
}
.author {
    font-style:italic;
    text-align: center;
    margin-top:3px;
    font-size:0.81rem;
}
/* header */
header {
    display:flex;
    justify-content:center;
    align-items: flex-end;
    gap:20px;
    margin: 20px;
    color:var(--main-color);
    -webkit-text-stroke: 1px #061001;
}

/* button */
.get-quote-btn{
    background: linear-gradient(var(--sec-color), var(--main-color));
    color:whitesmoke;
    padding:10px 20px;
    border-radius:15px;
    display:block;
    margin:20px auto;
    transition:all 1s;
}

.get-quote-btn:hover, 
.get-quote-btn:focus {
    background: linear-gradient(var(--sec-color), whitesmoke);
    color:var(--main-color);
    transform: scale(1.1);
}
/* control container */
.controls {
    display: flex;
    flex-direction: column;
    width:80%;
    margin:0 auto;
}
.emotion-radios{
    display:grid;
    gap:10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.radio{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #bcbcbc;
    border-radius:5px;
    padding: 4px 8px;
    gap:5px;
}
.highlighted{
    font-family:"Matemasie", sans-serif;
    color:var(--main-color);
    accent-color: var(--main-color);
    border: 1px solid var(--main-color);
    background-color: #bcf3d2;
}
/* modal */
.modal {
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    padding:30px;
    transform: translate(-50%, -50%);
    border:0;
    outline:2px solid whitesmoke;
    outline-offset: -10px; 
    border-radius: .5em;
    background-color: #061001;
    transition:500ms;
    color:white;
    
}
.modal:hover, 
.modal:focus    {
    box-shadow: 0 0 8px 4px #061001;
    outline:none;
}
.modal-close-btn{
    cursor:pointer;
    border:none;
    background: none;
    color:whitesmoke;
    font-family: "Matemasie", sans-serif;
    font-size: 1rem;
    position: absolute;
    top:18px;
    right:20px;
}
.modal-close-btn:hover, .modal-close-btn:focus {
    color:var(--bg-color);
}

/* animation */
h1:hover {
    animation:shake 1.5s infinite ease-in-out;
    animation-fill-mode: start;
}
@keyframes shake {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(5deg); }
    20%  { transform: rotate(-5deg); }
    30%  { transform: rotate(5deg); }
    40%  { transform: rotate(-5deg); }
    50%  { transform: rotate(4deg); }
    60%  { transform: rotate(-4deg); }
    70%  { transform: rotate(3deg); }
    80%  { transform: rotate(-3deg); }
    90%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }

}
/* media queries */

@media (max-width: 840px) {
   
    header {
        align-items: center;
        gap:10px;
    }
}
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
header{
    flex-direction: column;
}
h1 {
    font-size:3rem;
}
h2 {
    font-size: 1.3rem;
}}