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


/* navigation */
#navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: var(--nav);
    padding: 17px;
    background-color: #0e0e28;
    top: 0px;
    z-index: 999;
    transition: all 200ms ease-in-out;
}


#navigation h1, .secondary-navigation a {
    font-family: 'Courier New', Courier, monospace;
    color: whitesmoke;
    text-decoration: none;
}

.nav-controler span{
    display: none;
}
.nav-controler {
    display: none;
}
#navigation h1 {
    font-weight: 900;
    letter-spacing: 1.8px;
}

.secondary-navigation a {
    font-weight: 500;
    letter-spacing: 0.5px;
}

.primary-navigation {
   font-family: var(--nav);
}

.secondary-navigation {
    list-style: none;
    display: flex;
}

.secondary-navigation li {
    margin: 0px 12px;
    text-decoration: none;
}

/* main */
body {
    background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
}

form h1 {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size-adjust: 16px;
    color: whitesmoke;
}
form {
    width: 500px;
    box-shadow: 0 0 3px whitesmoke;
    border-radius: 12px;
    height: 400px;
    margin: 120px 45rem;
    padding: 5px;
}

input {
    margin: 10px 6.2rem;
    border-radius: 6px;
    padding: 20px;
    width: 280px;
}

.pageclip-form__submit {
    margin: 15px 11.5rem;
    padding: 15px 35px;
    cursor: pointer;
}

#textarea {
    width: 280px;
    height: 110px;
    margin: 0px 6.2rem;
    border-radius: 6px;
}
@media (max-width: 992px) {
    form {
        margin: 90px 240px;
    }
}
@media (max-width: 768px) {
    form {
        margin: 90px 145px;
    }
}
@media (max-width: 560px) {
    /* navigation */
    .primary-navigation  {
        position: fixed;
        inset: 0 0 0 30%;
        background: steelblue;
        background: hsl(0 0% 100% / 0.1);;
        backdrop-filter: blur(1rem);
        z-index: 1000;
        transform: translateX(100%);
        transition: 200ms ease;
    }
    .primary-navigation[data-visible="true"] {
        transform: translateX(0%);
    }
    .nav-controler {
        aspect-ratio: 1;
        width: 2.5rem;
        z-index: 9999;
        background: url(../image/navbar.svg);
        background-repeat: no-repeat;
        border: 0;
        margin: 0px 0px 0px 120px;
        display: block;
    }
    #navigation .primary-navigation .secondary-navigation {
        position: fixed;
        flex-direction: column;
        padding: min(20vh, 10rem) 2em;
    }
    #navigation .primary-navigation .secondary-navigation li {
        padding: 5px;
        margin: 25px 20px;
    }
    #navigation .primary-navigation .secondary-navigation li a {
        color: whitesmoke;
        font-weight: 900;
    }

    /* main */
    form {
        margin: 90px 80px;
        width: 400px;
    }
    input {
        margin: 10px 55px;
    }
    #textarea {
        margin: 0px 55px;
    }
    .pageclip-form__submit {
        margin: 10px 145px;
    }
}
@media (max-width: 480px) {
    form {
        width: 350px;
        margin: 90px 65px;
    }
    input {
        margin: 10px 35px;
    }
    #textarea {
        margin: 0px 35px;
    }
    .pageclip-form__submit {
        margin: 10px 120px;
    }
}
@media (max-width: 420px) { 
    form {
        width: 350px;
        margin: 90px 27.4px;
    }
    input {
        margin: 10px 35px;
    }
    #textarea {
        margin: 0px 35px;
    }
    .pageclip-form__submit {
        margin: 10px 120px;
    }
}
@media (max-width: 380px) {
    form {
        margin: 90px 40px;
        width: 300px;
        height: 500px
    }
    input {
        width: 220px;
        margin: 10px 2rem;
    }
    .message {
        height: 120px;
    }
    #textarea {
        width: 215px;
        height: 200px;
        margin: 0px 38px;
    }
    .pageclip-form__submit {
        margin: 15px 5.8rem;
    }
}
@media (max-width: 320px) { 
    form {
        width: 270px;
        margin: 90px 24.5px;
    }
    input {
        width: 200px;
    }
    .pageclip-form__submit {
        margin: 10px 80px;
    }
    #textarea {
        width: 200px;
        margin: 0px 35px;
    }
}