@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:400;src:url('media/fonts/poppins-v24-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;src:url('media/fonts/poppins-v24-latin-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:700;src:url('media/fonts/poppins-v24-latin-700.woff2') format('woff2')}

:root {
    --lightBlue: #2e76ae;
    --bgColor: #ebf2fa;
    --sectionBg: #ffffff;
    --textColor: #123350;
    --textAreaBg: #ffffff;
    --borderRadius:8px;
    --shadow: 0px 0px 20px rgba(0,0,0,0.1);
}

* {
    box-sizing:border-box;
}

html {
    margin:0;
    font-size:18px;
    font-family:'Poppins',system-ui,sans-serif;
    color: var(--textColor);
    background-color: var(--bgColor);
    color-scheme: light dark;
}

body {
    margin:0;
    padding:1em;
    padding-top: calc(15vh + 80px);
    min-height:100vh;
}

main {
    background-color:var(--sectionBg);
    max-width: 600px;
    margin-inline:auto;
    padding:1rem;
    text-align:center;
    border-radius:calc(var(--borderRadius)*2);
    box-shadow:var(--shadow);
}

.logo {
    display:block;
    max-width:120px;
    margin-top:-80px;
    padding-inline:10px;
    aspect-ratio:1;
    object-fit:contain;
    object-position:center;
    margin-bottom:1rem;
    margin-inline:auto;
    background-color:var(--lightBlue);
    border-radius:var(--borderRadius);
    box-shadow:var(--shadow);
}

h1 {
    margin:0;
    line-height:1em;
    font-weight:600;
}

.rating {
    display:inline-flex;
    flex-direction:row-reverse;
    gap:6px;
    padding:5px 10px;
    background-color:var(--bgColor);
    border-radius:2em;
}

.rating input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.rating label {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    cursor:pointer;
    color:#8298b1;
    transition:color 180ms ease,transform 120ms ease;
    border-radius:8px;
}

.rating label svg {
    width:100%;
    height:100%;
    fill:currentColor;
}

.rating:hover label {
    color:#8298b1;
}

.rating input:hover + label,.rating input:hover ~ input + label {
    color:var(--lightBlue);
}

.rating:not(:hover) input:checked + label,.rating:not(:hover) input:checked ~ input + label {
    color:var(--lightBlue);
}

.rating input:focus-visible + label {
    outline:2px solid var(--lightBlue);
    outline-offset:4px;
}

.rating label:hover {
    transform:scale(1.1);
}

textarea {
    display:block;
    width:100%;
    min-height:5em;
    padding:0.6em 0.7em 0.4em 0.7em;
    text-align:left;
    font-size:1rem;
    font-family:'Poppins',system-ui,sans-serif;
    color: var(--textColor);
    background-color: var(--textAreaBg);
    border-color: var(--lightBlue);
    border-radius:var(--borderRadius);
}

.submit {
    margin-top:1rem;
    padding:0.3em 1em;
    color:white;
    font-weight:400;
    font-size:1.2rem;
    font-family:'Poppins',system-ui,sans-serif;
    background-color:var(--lightBlue);
    border:none;
    border-radius:4px;
    cursor:pointer;
    transition:filter 0.3s;
}

.submit:hover {
    filter:brightness(1.2);
}

.google-img {
    display:block;
    width: min(100%, 300px);
    aspect-ratio: 3;
    object-fit: contain;
    object-position: center;
    margin-inline:auto;
    transition:filter 0.3s;
}

.google-img:hover {
    filter:brightness(1.1);
}

@media (max-width: 450px) {
    body {
        padding-top: calc(5vh + 80px);

    }
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightBlue: #2e76ae;
    --bgColor: #010f1c;
    --sectionBg: #021a30;
    --textColor: #f2f2f2;
    --textAreaBg: #010f1c;
  }
}

@view-transition {
    navigation:auto;
}