/* OGÓLNE */
*{
    box-sizing: border-box;
}
html{
    background-repeat: no-repeat;
    background-image: linear-gradient(150deg,hsl(240, 35%, 25%), hsl(0, 0%, 5%));
    background-size: cover;
    color: white;
    font-family: "Rubik", sans-serif;
    height:100%;
}
body{
    margin: 0px;
}


/* HEADER (logo + nawigacja) */
header{
    width: 100%;
    padding-bottom: 10px;
    background-color: hsla(0, 0%, 40%,0.4);
    height: 90px;
}
#header{
    max-width: 1200px;
    margin: 0 auto;
}
/* logo */
div#logo{
    float: left;
    width:400px;
    height: 90px;
    /*background-image: linear-gradient(100deg, hsl(20, 88%, 54%), hsl(233, 80%, 44%), hsl(140, 88%, 54%));*/
}
div#logo img{
    float: left;
    width:80px;
    margin:5px 10px;
}
h1#foxtail{
    width:250px;
    font-size: 70px;
    text-align: center;
    margin:2px 5px 2px 20px;
    font-family: Cambria;
    float: left;
    background: linear-gradient(90deg, hsl(20, 88%, 54%), hsl(230, 80%, 70%), hsl(140, 88%, 54%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* nawigacja */
nav#nav_header{
    width:calc(100%-420px);
    text-align:center;
    display: flex;
    justify-content: flex-end;
    float: right;
    padding-right: 10px;
}
.nav_przycisk{
    height:60px;
    background-color: #454545;
    padding:20px;
    border-radius: 4px;
    font-size: 20px;
    margin: 15px 10px;
}
nav#nav_header h3{
    margin: 20px;
}
a{
    color: white;
    text-decoration: none;
}



/* TREŚĆ STRONY */
main{
    max-width: 1200px;
    margin: 60px auto;
}
h2{
  text-align: center;
  font-size: 48px;
  clear: both;
}
h3{
    text-align: center;
    font-size: 42px;
    clear: both;
}
nav#versionss{
    width:calc(100%);
    text-align:center;
    display: flex;
    justify-content: flex-end;
}
div.version{
    width:calc(100%);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    padding: 10px;
    margin: 15px;
}
div.version p{
    text-align: right;
    margin-right: 10px;
}
div#version1{
    background-image: linear-gradient(100deg,hsl(20, 88%, 54%), hsl(230, 80%, 44%));
}
div#version2{
    background-image: linear-gradient(100deg,hsl(140, 88%, 54%), hsl(230, 80%, 44%));
}
section{
    width:1000px;
    background-color: hsla(0, 0%, 40%,0.4);
    border-radius: 2px;
    margin: 20px auto;
    font-size: 20px;
    padding:20px;
    text-align: justify;
    line-height: 1.3;
    letter-spacing: 0.55px;
}
main a{
    color:hsl(240,90%,70%);
}


/* FORMULARZ (Podstrona z logowaniem i rejestracją)*/
.input_row{
    text-align: center;
    margin:8px;
}
label{
    font-size: 22px;
    margin-right:20px;
}
input{
    font-size: 22px;
    background-color: #555566;
    color: white;
    padding: 3px;
    border-radius: 2px;
    width:350px;
}
button{
    font-size: 22px;
    background-color: #444444;
    color:white;
    border-radius: 8px;
    border: 2px solid #222222;
    padding:10px;
    width:200px;
    margin-top:10px;
    margin-bottom:20px;
    transition: 200ms;
}
button:hover{
    border: 2px solid #444466;
    background-color: #777799;
    transition: 200ms;
}


/* O NAS */
#autorzy_info{
    display: flex;
    width: 100%;
}

.autor_info{
    width: 400px;
    margin:10px
}

.autor_info h3{
    margin:10px
}

.autor_info p{
    text-align: left;
}