@charset "UTF-8";

@font-face {
    font-family: 'moveitregular';
    src: url('moveitcpc-regular2-webfont.woff2') format('woff2'),
         url('moveitcpc-regular2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
} 

:root { 
    --clr-neutral: hsl(0, 0%, 96%);            /*  [a-white>gray]   f6f6f6   */
    --clr-neutral: var(--clr-neutral-90);

    --clr-neutral-100: hsl(0, 0%, 97%);        /*  [a-white]        f8f8f8   */  
    --clr-a-white: var(--clr-neutral-100);
    
    --clr-neutral-10: hsl(0, 0%, 4%);          /*  [a-black]        0b0b0b   */
    --clr-a-black: var(--clr-neutral-10); 

    --clr-gray-40: hsl(220, 6%, 28%);
    --clr-gray-50: hsl(216, 5%, 38%);
    --clr-gray-60: hsl(222, 4%, 47%);

    --clr-primary: rgb(48,48,255);

    --clr-logo-light: rgb(48,49,255);
    --clr-logo-dark: rgb(49,48,126);
    --clr-logo-accent: rgb(255,47,47);

    --clr-primary-30: hsl(218, 79%, 19%);
    --clr-primary-40: hsl(218, 80%, 28%);
    --clr-primary-50: hsl(218, 80%, 38%);
    
    --clr-red: hsl(359, 69%, 42%);              /* 901d1d = hsl(0, 66%, 34%)  bylo hsl(358, 72%, 50%); */
    --clr-green: hsl(141, 57%, 35%); 
    --clr-blue: hsl(219, 57%, 35%); 

    /* z btn */
    --clr-gray-lighter: #f5f5f5;
    --clr-gray-light: #e5e5e5;
    --clr-gray-dark : #a9a9a9;


    --font-size: 16px;
    --font-size-btn: 24px;

    --line-height: 1.6;
    --margin-xs: 4px; 
    --margin: 16px; 
    --margin-xl: 32px; 
    --padding-xl: var(--margin-xl);

    /*  */
    --gap-icon: 4px;
    --paddings-btn:  6px 12px;    

}

html {
    font-family: 'moveitregular';
} 

body {
    line-height: var(--line-height);
    color: var(--clr-a-black);
    background-color: var(--clr-gray-light);
}

h3{
    justify-content: center;
}

p{
    margin-block: var(--paddings-btn);
}

.hero {
    aspect-ratio: 1.65;
    background-image: url('/images/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
 /*    background-color: var(--clr-neutral-100); */
    background-clip: border-box;
    background-blend-mode: overlay;
    box-sizing: content-box;
    /* margin-bottom: var(--margin); */
  
    display: flex;
    justify-content: center;
    align-items: center;

}

.main-container {
    padding-block: var(--margin);
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 100dvw;
    overflow: hidden;
  
    
}

.bottom-menu{
    display: block;  
    margin-top: var(--margin);
   /*  place-content: space-between; */
}

.bottom-menu-items {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--margin);
    
    padding-inline: var(--margin);
    margin-inline: var(--margin);
}


.bottom-menu-links{
    display: flex;  
    gap: var(--margin);
}

.beta-indicator{
    position: absolute;
    padding-inline: var(--margin);
    color: var(--clr-a-white);
    background-color: var(--clr-logo-accent);
}

.legal-list{
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: var(--margin);
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    /*     
    align-items: left;
    justify-content: left; 
    */
    padding: var(--margin);
}

.legal-wrapper{
    font-family: 'Courier New', Courier, monospace;
    width: min(640px , 88dvw);
    margin-inline: auto;
}

.result-wrapper{
    width: min(640px , 88dvw);
    text-align: center;

  /*   display: flex;
    flex-direction: column;
    gap: calc(var(--margin) *2);
    margin-bottom: calc(var(--margin) *2); */

     background-color: var(--clr-a-white);
}

.shortlink{
    font-size: 2rem;
    text-align: center;
    color: var(--clr-a-white);
    background-color: var(--clr-a-black);
    padding: var(--margin-xs);
}

.shortqr {
    
}

.form-wrapper {
    margin-inline: auto;
    padding-block: var(--margin-xs);
}


form {
    display: flex;
    flex-direction: column;
    width: min-content;
    justify-self: center;
}

form {
    /* width: 100%; */
}


h1 {
    font-size: 2rem;
    text-align: left;
    color: var(--clr-logo-accent);
    color: var(--clr-logo-light);
    padding-block: var(--margin);
}

.text-header {
    padding-bottom: var(--margin-xl);

}

a, 
button, 
.create-button {
    text-decoration: none;
    cursor: pointer;
}

button, 
.create-button,
input, 
input[type=submit] {
    font:inherit;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-icon);
    padding: var(--paddings-btn);    
    font-size:2rem;
    font-family: 'moveitregular';
    width: min(640px , 88dvw);

   
}


label {
    padding-block: var(--margin-xs); 
    margin-bottom: var(--margin);
}

/* colors */
input[type=submit],
button {
    background-color: var(--clr-primary);
    color: var(--clr-neutral-100);
}

input[type=submit]:hover,
input[type=submit]:focus-visible,
button:hover,
button:focus-visible {
    transition: ease 325ms;
    -webkit-transition: ease 325ms;
    -moz-transition: ease 325ms;
    -ms-transition: ease 325ms;
    -o-transition: ease 325ms;

}

input[type=submit]:hover,
input[type=submit]:focus-visible,
button:hover,
button:focus-visible {
    background-color: var(--clr-green);
    border-color: var(--clr-green);

    color: var(--clr-neutral-100);

    /*  */
    background-color: var(--clr-gray-dark);
    border-color: var(--clr-gray-dark);

    color: var(--clr-logo-dark);

    /* --clr-logo-dark */
    background-color: var(--clr-logo-dark);
    border-color: var(--clr-logo-dark);
     
    color: var(--clr-logo-accent);
}



input {
    background-color: var(--clr-gray-light);
    color: var(--clr-neutral-10);
    border-color: var(--clr-primary);
    border: solid 1px var(--clr-primary);   /* ??? BORDER */
}


.create-button {
    background-color: var(--clr-primary);
    color: var(--clr-gray-light);
    font-size: 2rem;
}

.significant{
    font-weight:900;
}


a {
    color:inherit;
}

.logo {
    width: min(640px , 88dvw);
    padding-top: var(--margin-xl);
}

.alone {
    margin-block: var(--margin-xl);
}

.row-wrapper {
    display: flex;
    align-items:flex-start;
    align-items: center;
    gap: var(--margin-xs);
}

@media screen and (orientation:portrait) {

    .main-container {
        justify-self: stretch;
        justify-self: center;
    }
}
/* and (max-width:1200px) */ 

/* 

przy ok 900 forma ZLE WYGLADA

@media screen and (max-width:900px) and (min-width:1400px) {
    .form-wrapper {
        width: 94dvw;
        padding-inline: calc(var(--padding-xl)*0.5);
    }

} 

*/