html {
font-family: 'Roboto', sans-serif;
font-size: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #A8A8A8;
}
.overflowHidden {
overflow-x: hidden;
}
.secondBackground {
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
/*nawigacja*/
nav {
font-size: 0;
width: 100vw;
margin: 0 auto;
padding: 40px 30px;
border-radius: 0;
}
.navColor {
background-color: black;
color: white;
border: 2px solid white;
position: relative;
width: 100%;
/* border: solid 2px gray; */
}
.navBlack {
color: black;
border: 2px solid black;
background-color: #A8A8A8;
}
.main {
background-color: black;
color: white;
}
nav ol li {
display: inline-block;
width: 12.5%;
font-size: 1.6rem;
}
.logos {
position: absolute;
left: 30px;
top: 2px;
width: 162px;
height: 124px;
cursor: pointer;
}
nav ol a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
padding: 10px 10px;
margin-left: 1px;
}
.aColor {
color: white;
}
.aColor1 {
color: black;
background-color: #A8A8A8;
/* border: 1px solid black; */
}
ol li ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 25px;
background-color: black;
visibility: hidden;
position: absolute;
border-radius: 20px;
z-index: 10;
}
i {
padding-right: 10px;
font-size: 2.5rem;
}
i.fa-solid fa-house {
background-color: white;
color: white;
}
i.fa-solid fa-fingerprint {
background-color: white;
color: white;
}
ol li ul li {
display: block;
width: 250px;
padding: 10px 20px;
/* border: solid 1px white; */
font-size: 1.5rem;
}
ol li ul li a {
border: 1px solid white;
text-align: center;
padding: 10px 30px;
}
.navBurger {
display: none;
}
.navBurger2 {
display: none;
}
aside.invisible {
display: none;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.95);
z-index: 1000;
transition: opacity 0.3s ease;
}
aside.invisible2 {
display: none;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.95);
z-index: 1000;
transition: opacity 0.3s ease;
}
.navBurgerOff {
display: none;
}
.navBurger2Off {
display: none;
}
.navCross {
display: none;
}
.navCross2 {
display: none;
}
/*nawigacja-elementy hover*/
ol li a.aColor:hover {
font-weight: 900;
/* color: #FFFFCC; */
color: #CCFF66;
}
ol li a.aColor1:hover {
font-weight: 900;
color: white;
}
ol li ul li a:hover {
/* background-color: #FFFFCC; */
font-weight: bold;
}
ol li:hover>ul {
visibility: visible;
}
a.aColor i:hover {
animation: book .5s linear infinite alternate;
color: #CCFF66;
}
a.aColor1 i:hover {
animation: book .5s linear infinite alternate;
color: white;
}
@keyframes book {
0% {
transform: rotate(20deg);
}
100% {
transform: rotate(-20deg);
}
}
/* logowanie */
.login {
width: 400px;
height: 80px;
position: absolute;
left: 10%;
top: 34%;
}
.failurelogin {
color: red;
font-size: 2rem;
position: absolute;
left: 33%;
top: 22%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.login:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.login1 {
width: 200px;
height: 80px;
position: absolute;
left: 5%;
top: 36%;
}
.yourPassword {
width: 400px;
height: 80px;
position: absolute;
left: 10%;
top: 44%;
}
.yourPassword:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.yourPassword1 {
width: 400px;
height: 80px;
position: absolute;
left: 5%;
top: 48%;
}
.confirm {
width: 400px;
height: 80px;
position: absolute;
left: 10%;
top: 54%;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 2.2rem;
}
.confirm:hover {
cursor: pointer;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 2px;
}
.zalogowany {
width: 100%;
position: absolute;
left: 0;
top: 20%;
color: greenyellow;
text-shadow: 2px 0 2px black;
border: 1px solid white;
background-color: black;
text-align: center;
padding: 4px;
}
/* logowanie strona mobilna */
@media (max-width:1362px) {
.login1 {
width: 200px;
height: 60px;
position: absolute;
left: 5%;
top: 36%;
}
.yourPassword1 {
width: 400px;
height: 60px;
position: absolute;
left: 5%;
top: 48%;
}
.login {
width: 400px;
height: 70px;
position: absolute;
left: 15%;
top: 34%;
}
.yourPassword {
width: 400px;
height: 70px;
position: absolute;
left: 15%;
top: 44%;
}
.confirm {
left: 15%;
}
}
@media (max-width:400px) {
.login {
width: 80vw;
height: 70px;
position: absolute;
left: 10%;
top: 20%;
}
.failurelogin {
color: red;
font-size: 2rem;
position: absolute;
left: 5%;
top: 80%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.login:hover {
background-color: #0066FF;
color: white;
}
.login1 {
width: 80vw;
height: 50px;
position: absolute;
left: 10%;
top: 15%;
font-size: 1.5rem;
text-align: left;
color: white;
}
.yourPassword {
width: 80vw;
height: 70px;
position: absolute;
left: 10%;
top: 45%;
}
.yourPassword:hover {
background-color: #0066FF;
color: white;
}
.yourPassword1 {
width: 100px;
height: 50px;
font-size: 1.5rem;
position: absolute;
left: 10%;
top: 40%;
text-align: left;
color: white;
}
.confirm {
width: 80vw;
height: 60px;
position: absolute;
left: 10%;
top: 62%;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 2.2rem;
}
.confirm:hover {
cursor: pointer;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 2px;
}
.zalogowany {
width: 100vw;
position: absolute;
left: 0%;
top: 64%;
color: greenyellow;
text-shadow: 2px 0 2px black;
border: 1px solid white;
background-color: black;
text-align: center;
padding: 4px;
}
}
/* Rejestracja */
.nick {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 20%;
}
.nick:hover {
cursor: pointer;
background-color: #0066FF;
color: white;
}
.mailRegister {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 30%;
}
.mailRegister:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.pass1 {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 40%;
}
.pass1:hover {
cursor: pointer;
background-color: #0066FF;
color: white;
}
.pass2 {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 50%
}
.pass2:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.bird {
width: 40px;
height: 40px;
position: absolute;
left: 13%;
top: 60%;
}
.bird:hover {
cursor: pointer;
background-color: #0066FF;
}
.register {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 75%;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 2.2rem;
}
.register:hover {
cursor: pointer;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 2px;
}
.rejestr1 {
position: absolute;
left: 2%;
top: 22%;
}
.rejestr2 {
position: absolute;
left: 2%;
top: 32%;
}
.rejestr3 {
position: absolute;
left: 2%;
top: 42%;
}
.rejestr4 {
position: absolute;
left: 2%;
top: 52%;
}
.rejestr5 {
position: absolute;
left: 17%;
top: 60%;
font-size: 2rem;
}
.g-recaptcha {
width: 400px;
height: 80px;
position: absolute;
left: 13%;
top: 66%;
}
.nickError {
color: red;
font-size: 2rem;
position: absolute;
left: 35%;
top: 22%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
/* box-shadow: 2px 0 10px 2px white; */
}
.emailError {
color: red;
font-size: 2rem;
position: absolute;
left: 35%;
top: 32%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.passError {
color: red;
font-size: 2rem;
position: absolute;
left: 35%;
top: 42%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.regulaminError {
color: red;
font-size: 2rem;
position: absolute;
left: 35%;
top: 60%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.botError {
color: red;
font-size: 2rem;
position: absolute;
left: 35%;
top: 68%;
text-shadow: 2px 0 2px black;
border: 2px solid black;
background-color: white;
padding: 2px 2px;
}
.rodo {
font-weight: bolder;
}
.rodo:hover {
cursor: pointer;
}
/* Rejestracja - strona mobilna */
@media (max-width:1362px) {
.nick {
width: 400px;
height: 70px;
position: absolute;
left: 16%;
top: 20%;
}
.mailRegister {
width: 400px;
height: 70px;
position: absolute;
left: 16%;
top: 30%;
}
.pass1 {
width: 400px;
height: 70px;
position: absolute;
left: 16%;
top: 40%;
}
.pass2 {
width: 400px;
height: 70px;
position: absolute;
left: 16%;
top: 50%
}
.register {
width: 400px;
height: 80px;
left: 16%;
top: 80%;
}
.g-recaptcha {
width: 400px;
height: 80px;
position: absolute;
left: 16%;
top: 66%;
}
.regulaminError {
left: 40%;
top: 60%;
}
.nickError {
left: 47%;
top: 22%;
}
.emailError {
left: 47%;
top: 32%;
}
.passError {
left: 47%;
top: 42%;
}
.regulaminError {
left: 47%;
top: 60%;
}
.botError {
left: 47%;
top: 68%;
}
}
@media (max-width:400px) {
.nick {
width: 85vw;
height: 70px;
position: absolute;
left: 5%;
top: 15%;
}
.nick:hover {
cursor: pointer;
background-color: #0066FF;
color: white;
}
.mailRegister {
width: 85vw;
height: 70px;
position: absolute;
left: 5%;
top: 36%;
}
.mailRegister:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.pass1 {
width: 85vw;
height: 70px;
position: absolute;
left: 5%;
top: 56%;
}
.pass1:hover {
cursor: pointer;
background-color: #0066FF;
color: white;
}
.pass2 {
width: 85vw;
height: 70px;
position: absolute;
left: 5%;
top: 76%
}
.pass2:hover {
background-color: #0066FF;
cursor: pointer;
color: white;
}
.bird {
width: 40px;
height: 40px;
position: absolute;
left: 5%;
top: 92%;
}
.bird:hover {
cursor: pointer;
background-color: #0066FF;
}
.register {
width: 85vw;
height: 80px;
position: absolute;
left: 5%;
top: 115%;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 2rem;
padding-bottom: 2px;
}
.register:hover {
cursor: pointer;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 2px;
}
.rejestr1 {
position: absolute;
left: 2%;
top: 10%;
font-size: 1.5rem;
color: white;
}
.rejestr2 {
position: absolute;
left: 2%;
top: 31%;
font-size: 1.5rem;
color: white;
}
.rejestr3 {
position: absolute;
left: 2%;
top: 52%;
font-size: 1.5rem;
color: white;
}
.rejestr4 {
position: absolute;
left: 2%;
top: 72%;
font-size: 1.5rem;
color: white;
}
.rejestr5 {
position: absolute;
left: 17%;
top: 92%;
font-size: 1.5rem;
color: white;
}
.g-recaptcha {
width: 85vw;
height: 80px;
position: absolute;
left: 5%;
top: 100%;
}
.nickError {
color: red;
font-size: 1.1rem;
position: absolute;
left: 1%;
top: 26%;
text-shadow: 1px 0 1px black;
border: 1px solid black;
background-color: white;
padding: 1px 1px;
/* box-shadow: 2px 0 10px 2px white; */
}
.emailError {
color: red;
font-size: 1.1rem;
position: absolute;
left: 1%;
top: 47%;
text-shadow: 1px 0 1px black;
border: 1px solid black;
background-color: white;
padding: 1px 1px;
}
.passError {
color: red;
font-size: 1.1rem;
position: absolute;
left: 1%;
top: 67%;
text-shadow: 1px 0 1px black;
border: 1px solid black;
background-color: white;
padding: 1px 1px;
}
.regulaminError {
color: red;
font-size: 1.1rem;
position: absolute;
left: 17%;
top: 96%;
text-shadow: 1px 0 1px black;
border: 1px solid black;
background-color: white;
padding: 1px 1px;
}
.botError {
color: red;
font-size: 1.1rem;
position: absolute;
left: 1%;
top: 112%;
text-shadow: 1px 0 1px black;
border: 1px solid black;
background-color: white;
padding: 1px 1px;
}
}
/* logowanie z sukcesem */
.sukces {
position: absolute;
left: 10%;
top: 20%;
}
.firstLogin {
position: absolute;
left: 10%;
top: 30%;
}
.firstLogin2 {
text-decoration: none;
color: #CCFF66;
}
.mailStyle {
width: 600px;
position: absolute;
left: 2%;
top: 55%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 2.2rem;
text-align: center;
}
.premiumStyle {
width: 650px;
position: absolute;
left: 60%;
top: 55%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 2.2rem;
}
.lastLogin {
width: 600px;
position: absolute;
left: 2%;
top: 60%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 2.2rem;
text-align: center;
}
/* Logowanie z sukcesem - strona mobilna */
@media (max-width:400px) {
.mailStyle {
width: 99vw;
height: 6vh;
line-height: 30px;
position: absolute;
left: 1%;
top: 70%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 1.5rem;
text-align: center;
}
.premiumStyle {
width: 99vw;
height: 10vh;
position: absolute;
left: 2%;
top: 104%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 2.2rem;
}
.lastLogin {
width: 99vw;
height: 6vh;
line-height: 30px;
position: absolute;
left: 1%;
top: 78%;
color: white;
border: 2px solid black;
padding: 4px;
font-size: 1.5rem;
text-align: center;
}
}
/*header*/
header {
/* background-image: url('../img/gory.jpg'); */
height: 85vh;
background-size: cover;
background-attachment: fixed;
/* background-repeat: no-repeat; */
/* animation: mountain 40s 6s linear infinite; */
margin: 0 auto;
width: 100vw;
}
img.slider {
position: absolute;
z-index: -10;
height: 85vh;
width: 100vw;
margin: 0 auto;
}
h1.quote {
font-size: 7rem;
text-align: center;
font-family: 'Italianno', cursive;
color: white;
/* line-height: 50vh; */
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
/* animation: cytat1 40s 2s linear infinite both; */
}
/*ANIMACJA*/
/* @keyframes mountain {
0%,
22% {
background-image: url('../gory.jpg');
height: 85vh;
}
25%,
47% {
background-image: url('../gory2.jpg');
background-size: 100%;
height: 85vh;
}
50%,
72% {
background-image: url('../gory6.jpg');
background-size: 100%;
height: 85vh;
}
75%,
100% {
background-image: url('../gory5.jpg');
background-size: 100%;
height: 85vh;
}
} */
@keyframes cytat1 {
0% {
color: white;
opacity: 0;
top: 20%;
left: 4%;
z-index: -1;
}
25% {
color: white;
opacity: 1;
top: 40%;
left: 4%;
font-size: 7rem;
z-index: 0;
}
50% {
color: white;
opacity: 1;
top: 70%;
left: 4%;
font-size: 7rem;
}
52%,
74% {
color: white;
opacity: 1;
top: 80%;
left: 4%;
font-size: 7rem;
}
100% {
color: white;
opacity: 0;
top: 90%;
left: 4%;
font-size: 7rem;
z-index: -1;
}
}
@keyframes cytat2 {
0% {
opacity: 0;
z-index: -1;
}
25% {
opacity: 0;
top: 10%;
left: 10%;
z-index: -1;
}
50% {
opacity: 0;
color: white;
top: 30%;
left: 10%;
z-index: -1;
}
75% {
opacity: 1;
color: white;
top: 30%;
left: 10%;
z-index: 0;
}
90%,
100% {
opacity: 1;
color: white;
top: 80%;
left: 10%;
}
}
@keyframes header {
0% {
height: 0vh;
}
100% {
height: 90vh;
}
}
/*Main*/
main {
width: 100vw;
margin: 60px auto;
}
main p {
font-size: 2.7rem;
text-align: center;
margin: 0 30px 0 30px;
text-shadow: 1px 0 2px black;
}
main p:hover {
cursor: pointer;
}
.show {
display: none;
}
/* p.english {
font-size: 2.5rem;
} */
div.feature {
margin: 100px 20px 0 100px;
box-sizing: border-box;
height: 36vh;
position: relative;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
div.image1 {
height: 36vh;
background-image: url(../img/computer.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
}
div.image1:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
border-radius: 50%;
}
div.image2 {
height: 36vh;
background-image: url(../img/book.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
right: 650px;
bottom: -2px;
}
div.image2:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
border-radius: 50%;
}
div.image3 {
height: 36vh;
background-image: url(../img/idioms.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
right: 50px;
bottom: -2px;
}
div.image3:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
border-radius: 50%;
}
div.feature2 {
width: 100vw;
text-transform: uppercase;
margin: 30px auto;
letter-spacing: 1px;
padding: 20px 20px;
box-sizing: border-box;
}
div.feature2 span {
text-transform: lowercase;
}
p.describe {
text-align: center;
}
div.opis,
div.opis2,
div.opis3 {
width: 25%;
display: block;
float: left;
margin-left: 120px;
margin-top: 60px;
}
div p a {
text-decoration: none;
border: 2px solid black;
padding: 10px 10px;
border-radius: 20px;
transition: 0.5s;
color: black;
}
div p a:hover {
background-color: #00008B;
color: white;
}
div p a:hover span {
color: red;
}
.clocker {
color: white;
position: absolute;
top: 195%;
right: 0;
transform: translate(-50%, -50%);
font-size: 1.5rem;
/* text-decoration: underline; */
}
.clocker2 {
color: white;
position: absolute;
top: 195%;
left: 5%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
/* text-decoration: underline; */
}
/* STRONA GŁÓWNA - STRONA MOBILNA */
@media (max-width:1600px) {
img.slider {
position: absolute;
z-index: -10;
height: 80vh;
width: 100vw;
margin: 0 auto;
}
h1.quote {
font-size: 4rem;
text-align: center;
font-family: 'Italianno', cursive;
color: white;
/* line-height: 50vh; */
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
/* animation: cytat1 40s 2s linear infinite both; */
}
nav ol li {
display: inline-block;
width: 14.2%;
font-size: 1rem;
}
ol li ul li {
display: block;
width: 150px;
padding: 5px 10px;
border: solid 1px white;
font-size: 0.8rem;
}
ol li ul li a {
border: 1px solid white;
text-align: center;
padding: 10px 30px;
}
main p {
font-size: 2rem;
text-align: center;
margin: 0 30px 0 30px;
text-shadow: 1px 0 2px black;
}
i {
padding-right: 10px;
font-size: 1.5rem;
}
div.feature {
margin: 50px 20px 0 100px;
box-sizing: border-box;
height: 20vh;
position: relative;
}
div.image1 {
height: 36vh;
background-image: url(../img/computer.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 20%;
left: 0;
}
div.image2 {
height: 36vh;
background-image: url(../img/book.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 10px 0 10px;
border-radius: 20%;
position: absolute;
top: 20%;
left: 30%;
}
div.image3 {
height: 36vh;
background-image: url(../img/idioms.jpg);
background-size: cover;
width: 30%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
top: 20%;
left: 60%;
}
div.opis,
div.opis2,
div.opis3 {
width: 25%;
display: block;
float: left;
margin-left: 50px;
margin-top: 60px;
}
.clocker {
color: white;
position: absolute;
top: 185%;
right: 0;
transform: translate(-50%, -50%);
font-size: 1.5rem;
/* text-decoration: underline; */
}
.clocker2 {
color: white;
position: absolute;
top: 185%;
left: 5%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
/* text-decoration: underline; */
}
}
@media (max-width:1362px) {
nav ol li {
display: inline-block;
width: 12.2%;
font-size: 1.2rem;
}
ol li ul li {
display: block;
width: 150px;
padding: 5px 10px;
border: solid 1px white;
font-size: 1rem;
}
div.image1 {
height: 32vh;
width: 30%;
top: 20%;
left: 0;
}
div.image2 {
height: 32vh;
width: 30%;
margin: 0 10px 0 10px;
top: 20%;
left: 30%;
}
div.image3 {
height: 32vh;
width: 30%;
margin: 0 0 0 20px;
top: 20%;
left: 60%;
}
div.opis,
div.opis2,
div.opis3 {
width: 25%;
display: block;
float: left;
margin-left: 70px;
margin-top: 120px;
}
h1.quote {
font-size: 5rem;
top: 70%;
}
.clocker {
top: 190%;
right: 0;
font-size: 1.5rem;
}
.clocker2 {
top: 190%;
left: 5%;
font-size: 1.5rem;
}
@media (orientation: landscape) and (max-width:1080px) {
nav {
width: 100vw;
/* padding: 10px 30px; */
border-radius: 0;
color: white;
/* padding: 20px 10px; */
box-sizing: border-box;
display: none;
}
aside.invisible {
display: block;
width: 60vw;
height: 120vh;
position: absolute;
background-color: black;
color: white;
z-index: 2;
transition: 2s;
transform: translate(-90%, -100%);
}
.invisibleOn {
display: block;
width: 80vw;
height: 122vh;
position: absolute;
background-color: black;
border: 1px solid white;
/* border-radius: 50%; */
color: white;
font-weight: 800;
z-index: 2;
opacity: 0.9;
transition: 1s;
transform: translate(12%, 0);
}
.navBurger {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 4%;
transition: 0.5s;
}
.navBurgerOff {
display: none;
transition: 0.5s;
}
.navCross {
display: none;
transition: 0.5s;
/* color: white;
font-size: 4rem;
position: absolute;
right: 6%;
top: 3%; */
}
.navCrossOff {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 4%;
z-index: 3;
transition: 0.5s;
}
main p {
font-size: 2.2rem;
letter-spacing: 1.5px;
text-align: center;
margin: 0 30px 0 30px;
text-shadow: 1px 0 2px black;
}
}
h2.tips {
font-family: 'Italianno';
width: 80vw;
text-align: center;
word-spacing: 5px;
font-size: 2.5rem;
background-color: #CCFF66;
border: 1px solid black;
color: black;
opacity: 1;
}
header aside li a {
color: white;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
font-size: 2.5rem;
text-align: left;
list-style: none;
padding-top: 5px;
}
section.classy aside li a {
color: white;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 2rem;
text-align: center;
list-style: none;
}
section.classy2 aside li a {
color: white;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 2rem;
text-align: center;
list-style: none;
}
header aside li a:hover {
cursor: pointer;
text-decoration: underline;
}
header aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
}
section.classy aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
}
section.classy2 aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
}
section.classy {
width: 0%;
height: 0%;
position: absolute;
left: 0;
top: 0;
}
section.classy2 {
width: 0%;
height: 0%;
position: absolute;
left: 0;
top: 0;
}
img.slider {
position: absolute;
height: 85vh;
width: 100vw;
margin: 0 auto;
}
main {
width: 100vw;
margin: 40px 0;
height: 250vh;
}
main p {
font-size: 1.5rem;
text-align: justify;
margin: 0 20px 0 25px;
}
header {
display: block;
width: 100vw;
background-color: rgba(0, 0, 0, 0.2);
}
h1.quote {
font-size: 3.5rem;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 2px;
width: 90%;
}
div.image1 {
height: 70vh;
margin-bottom: 10px;
background-image: url(../img/computer.jpg);
background-size: cover;
width: 60%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 0;
left: 130px;
}
div.opis p a {
color: white;
font-weight: 800;
background-color: #0033CC;
}
div.opis2 p a {
color: white;
font-weight: 800;
background-color: #0033CC;
}
div.opis3 p a {
color: white;
font-weight: 800;
background-color: #0033CC;
}
div.image2 {
height: 70vh;
background-image: url(../img/book.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 60%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 250px;
left: 130px;
}
div.image3 {
height: 70vh;
background-image: url(../img/idioms.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 60%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
top: 500px;
left: 130px;
}
div.feature {
margin: 40px 0;
box-sizing: border-box;
height: 80vh;
position: relative;
width: 100vw;
/* display: none; */
}
div.opis {
position: absolute;
top: 370px;
left: 200px;
z-index: 2;
color: white;
}
div.opis2 {
position: absolute;
top: 645px;
left: 200px;
z-index: 2;
}
div.opis3 {
position: absolute;
top: 900px;
left: 200px;
z-index: 2;
}
.clocker {
top: 450%;
right: 0;
font-size: 1.5rem;
z-index: 2;
}
.clocker2 {
top: 450%;
left: 5%;
font-size: 1.5rem;
z-index: 2;
}
}
@media (orientation: portrait) and (max-width:800px) {
nav {
width: 100vw;
/* padding: 10px 30px; */
border-radius: 0;
color: white;
padding: 20px 10px;
box-sizing: border-box;
/* display: none; */
}
header {
animation-play-state: paused;
/* display: none; */
}
main {
width: 100vw;
margin: 40px 0;
}
main p {
font-size: 1.3rem;
text-align: justify;
margin: 0 20px 0 20px;
}
div.image1 {
height: 70vh;
background-image: url(../img/computer.jpg);
background-size: cover;
width: 70%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 0;
left: 50px;
}
div.image2 {
height: 30vh;
background-image: url(../img/book.jpg);
background-size: cover;
width: 70%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 310px;
left: 50px;
}
div.image3 {
height: 30vh;
background-image: url(../img/idioms.jpg);
background-size: cover;
width: 70%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
top: 600px;
left: 50px;
}
div.feature {
margin: 50px 0;
box-sizing: border-box;
height: 36vh;
position: relative;
width: 100%;
/* display: none; */
}
nav ol li {
font-size: 0.6rem;
width: 12.5%;
padding-right: 5px;
}
nav ol a {
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 10px;
}
i {
padding-right: 8px;
padding-bottom: 10px;
font-size: 2rem;
}
ol li ul li {
width: 80px;
padding: 5px 10px;
border: solid 1px white;
font-size: 0.6rem;
}
div.feature2 {
position: relative;
}
div.opis {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: -120px;
left: -65px;
}
div.opis2 {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: 180px;
left: -65px;
}
div.opis3 {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: 490px;
left: -65px;
}
}
@media (max-width:400px) {
nav {
width: 100vw;
/* padding: 10px 30px; */
border-radius: 0;
color: white;
/* padding: 20px 10px; */
box-sizing: border-box;
display: none;
}
aside.invisible {
display: block !important;
width: 100vw;
height: 50vh;
position: absolute;
background-color: black;
color: white;
z-index: 3;
transition: 2s;
transform: translate(-90%, -100%);
}
aside.invisible2 {
display: block !important;
width: 100vw;
height: 50vh;
position: absolute;
background-color: black;
color: white;
z-index: 3;
transition: 2s;
transform: translate(-90%, -100%);
}
.invisibleOn {
display: block;
width: 100vw;
height: 60vh;
position: absolute;
background-color: black;
border: 1px solid white;
/* border-radius: 50%; */
color: white;
z-index: 2;
opacity: 0.9;
transition: 1s;
}
.invisibleOn2 {
display: block;
width: 100vw;
height: 60vh;
position: absolute;
background-color: black;
border: 1px solid white;
/* border-radius: 50%; */
color: white;
z-index: 2;
opacity: 1;
transition: 1s;
pointer-events: all;
}
.navBurger {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 5%;
transition: 0.5s;
z-index: 2;
}
.navBurger2 {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 12%;
transition: 0.5s;
z-index: 2;
}
.navBurgerOff {
display: none;
transition: 0.5s;
}
.navBurger2Off {
display: none;
transition: 0.5s;
}
.navCross {
display: none;
transition: 0.5s;
z-index: 2;
/* color: white;
font-size: 4rem;
position: absolute;
right: 6%;
top: 3%; */
}
.navCross2 {
display: none;
transition: 0.5s;
z-index: 2;
/* color: white;
font-size: 4rem;
position: absolute;
right: 6%;
top: 3%; */
}
.navCrossOff {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 5%;
z-index: 3;
transition: 0.5s;
}
.navCross2Off {
display: block;
color: white;
font-size: 3.5rem;
position: absolute;
right: 5%;
top: 12%;
z-index: 3;
transition: 0.5s;
}
h2.tips {
font-family: 'Italianno';
width: 100vw;
text-align: center;
word-spacing: 5px;
font-size: 2.5rem;
background-color: #CCFF66;
border: 1px solid black;
color: black;
opacity: 1;
}
header aside li a {
color: white;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 2rem;
text-align: center;
list-style: none;
}
section.classy aside li a {
color: white;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 2rem;
text-align: center;
list-style: none;
}
section.classy2 aside li a {
color: white;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 2rem;
text-align: center;
list-style: none;
}
header aside li a:hover {
cursor: pointer;
text-decoration: underline;
}
header aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
}
section.classy aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
}
section.classy2 aside li {
text-decoration: none;
text-align: center;
list-style: none;
padding: 4px;
font-size: 2rem;
}
section.classy {
width: 0%;
height: 0%;
position: absolute;
left: 0;
top: 0;
}
section.classy2 {
width: 0%;
height: 0%;
position: absolute;
left: 0;
top: 0;
}
img.slider {
position: absolute;
height: 85vh;
width: 100vw;
margin: 0 auto;
}
main {
width: 100vw;
margin: 40px 0;
height: 130vh;
}
main p {
font-size: 1.5rem;
text-align: justify;
margin: 0 20px 0 25px;
}
header {
display: block;
width: 100vw;
background-color: rgba(0, 0, 0, 0.2);
}
h1.quote {
font-size: 2.8rem;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 2px;
width: 90%;
}
div.image1 {
height: 25vh;
margin-bottom: 10px;
background-image: url(../img/computer.jpg);
background-size: cover;
width: 80%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 0;
left: 30px;
}
div.image2 {
height: 25vh;
background-image: url(../img/book.jpg);
background-size: cover;
width: 80%;
float: left;
border: 5px solid #A8A8A8;
border-radius: 20%;
position: absolute;
top: 250px;
left: 30px;
}
div.image3 {
height: 25vh;
background-image: url(../img/idioms.jpg);
background-size: cover;
width: 80%;
float: left;
border: 5px solid #A8A8A8;
margin: 0 0 0 10px;
border-radius: 20%;
position: absolute;
top: 500px;
left: 30px;
}
div.feature {
margin: 40px 0;
box-sizing: border-box;
height: 30vh;
position: relative;
width: 100vw;
/* display: none; */
}
nav ol li {
font-size: 0.7rem;
width: 14.2%;
padding-right: 2px;
line-height: 10px;
}
nav ol a {
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 7px 2px;
line-height: 14px;
text-align: center;
}
i {
padding-right: 5px;
padding-bottom: 7px;
font-size: 1.8rem;
}
ol li ul li {
width: 80px;
padding: 4px 1px;
border: solid 1px white;
font-size: 0.7rem;
text-align: left;
line-height: 6px;
}
ol li ul li a {
text-align: center;
padding: 2px 2px;
}
div.feature2 {
position: relative;
margin-top: 5px;
}
div.opis {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: -130px;
left: -65px;
}
div.opis p a {
color: black;
font-weight: 800;
background-color: white;
}
div.opis2 p a {
color: black;
font-weight: 800;
background-color: white;
}
div.opis3 p a {
color: black;
font-weight: 800;
background-color: white;
}
div.opis2 {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: 135px;
left: -65px;
}
div.opis3 {
width: 70%;
margin-left: 120px;
margin-top: 60px;
position: absolute;
top: 380px;
left: -65px;
}
.clocker {
color: white;
position: absolute;
top: 255%;
right: -10px;
transform: translate(-50%, -50%);
font-size: 1.2rem;
/* text-decoration: underline; */
}
.clocker2 {
color: white;
position: absolute;
top: 255%;
left: 15%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
/* text-decoration: underline; */
}
}
@media (max-width:360px) {
.clocker {
top: 235%;
}
.clocker2 {
top: 235%;
}
main {
width: 100vw;
margin: 40px 0;
height: 142vh;
}
}
/*footer Stopka*/
footer {
background-color: black;
margin: 100px 0 0 0;
height: 15vh;
width: 100vw;
}
p.copyright {
color: white;
font-size: 1rem;
display: block;
background-color: black;
text-align: center;
/* padding-left: 20px; */
}
div.footer {
margin: 20px 150px 0 150px;
text-align: center;
}
p.icons {
color: white;
font-size: 6.5rem;
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px 0 20px 0px;
}
p.icons1 {
color: white;
font-size: 6.5rem;
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px 0 20px 0;
}
p.icons2 {
color: white;
font-size: 6.5rem;
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px 0 20px 0;
}
p.icons3 {
color: white;
font-size: 6.5rem;
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px 0 20px 0;
}
div.footer a p:hover {
font-weight: bolder;
color: #CCFF66;
animation: book .5s linear infinite alternate;
}
/* STOPKA - STRONA MOBILNA */
@media (orientation: landscape) and (max-width:1080px) {
footer {
background-color: black;
margin: 100px 0 0 0;
height: 38vh;
width: 100vw;
/* display: none; */
position: absolute;
top: 1200px;
left: 0;
}
p.icons {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons1 {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons2 {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons3 {
width: 22%;
padding-top: 0;
}
div.foot p {
font-size: 0.8rem;
}
}
@media (orientation: portrait) and (max-width:800px) {
footer {
background-color: black;
margin: 100px 0 0 0;
height: 20vh;
width: 100vw;
/* display: none; */
position: absolute;
top: 2000px;
left: 0;
}
p.copyright {
font-size: 0.6rem;
}
p.icons {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons1 {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons2 {
width: 22%;
padding-top: 0;
padding-right: 25px;
}
p.icons3 {
width: 22%;
padding-top: 0;
}
}
@media (max-width:400px) {
footer {
background-color: black;
margin: 100px 0 0 0;
height: 15vh;
width: 100vw;
/* display: none; */
position: absolute;
top: 1650px;
left: 0;
}
div.footer {
margin: 0 auto;
text-align: center;
}
div.foot p {
font-size: 0.5rem;
}
p.icons {
width: 25%;
padding-top: 0;
}
p.icons1 {
width: 25%;
padding-top: 0;
}
p.icons2 {
width: 25%;
padding-top: 0;
}
p.icons3 {
width: 24%;
padding-top: 0;
}
p.copyright {
font-size: 0.3rem;
}
}
/*Strona o autorze*/
body.link1 {
background-image: url(../img/road.jpg);
position: relative;
background-attachment: fixed;
background-blend-mode: soft-light;
}
div.photo {
width: 30%;
height: 50vh;
top: 280px;
left: 100px;
position: absolute;
background-image: url(../img/me.JPG);
background-size: cover;
background-position: center;
box-shadow: 0 0 10px 2px white;
border-radius: 10%;
}
div.author {
position: absolute;
right: 120px;
top: 410px;
left: auto;
width: 50%;
height: 45vh;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 10%;
box-shadow: 0 0 10px 2px white;
}
div.ja {
position: absolute;
top: 0;
left: 8%;
margin-top: 20px;
}
h1.author1 {
color: black;
}
div.author p {
font-size: 2.1rem;
letter-spacing: 1.5px;
padding: 20px 20px 0 0;
text-align: justify;
text-shadow: 1px 0 2px black;
}
span {
text-transform: uppercase;
font-size: 2.4rem;
color: black;
font-weight: bold;
text-shadow: 1px 0 2px black;
}
/* STRONA O AUTORZE MOBILNA */
@media (max-width:1600px) {
div.photo {
width: 30%;
height: 50vh;
position: absolute;
left: 10%;
top: 190%;
background-image: url(../img/me.JPG);
background-size: cover;
background-position: center;
box-shadow: 0 0 10px 2px white;
border-radius: 10%;
z-index: -1;
}
div.ja {
position: absolute;
top: 10%;
left: 20%;
margin-top: 20px;
/* z-index: -1; */
height: 50vh;
}
div.author {
position: absolute;
right: 30px;
top: 240px;
left: auto;
width: 50%;
height: 90vh;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10%;
box-shadow: 0 0 10px 2px white;
}
div.author p {
font-size: 1.7rem;
letter-spacing: 1.2px;
padding-right: 50px;
}
}
@media (orientation: landscape) and (max-width:1080px) {
div.photo {
width: 45vw;
height: 65vh;
position: absolute;
top: 50px;
left: 30px;
position: absolute;
}
div.author {
position: absolute;
right: 20px;
top: 50px;
left: auto;
width: 45%;
height: 175vh;
}
div.author p {
font-size: 1.5rem;
letter-spacing: .8px;
padding-right: 40px;
padding-left: -20px;
width: 100%;
}
}
@media (max-width:400px) {
div.photo {
width: 35%;
height: 30vh;
top: 150px;
left: 20px;
}
div.author {
right: 20px;
top: 150px;
left: auto;
width: 50%;
height: 62vh;
}
div.author p {
font-size: 1rem;
letter-spacing: 0.6px;
padding-left: 0;
padding-top: 5px;
padding-right: 10px;
text-align: left;
text-shadow: 1px 0 2px black;
}
div.ja span {
font-size: 1.4rem;
}
}
/*Strona o Idiomach*/
div.all {
margin: 0 auto;
width: 100%;
overflow-x: hidden;
}
div.item {
width: 33.33%;
height: 35vh;
float: left;
background-position: center;
transition: 2s;
cursor: pointer;
background-size: 100%;
border: 2px solid black;
}
section.scroll1 {
height: 70vh;
}
section.scroll2 {
transform: translateX(-215vh);
height: 70vh;
transition: 2.5s;
}
section.scroll3 {
transform: translateX(315vh);
height: 70vh;
transition: 2.5s;
}
.scroll2.visible {
transform: translateX(0);
}
.scroll3.visible {
transform: translateX(0);
}
div.item:nth-of-type(1) {
background-image: url(../img/money.jpg);
}
div.item:nth-of-type(2) {
background-image: url(../img/character.jpg);
}
div.item:nth-of-type(3) {
background-image: url(../img/weather.jpg);
}
div.item:nth-of-type(4) {
background-image: url(../img/image.jpg);
}
div.item:nth-of-type(5) {
background-image: url(../img/education.jpg);
}
div.item:nth-of-type(6) {
background-image: url(../img/travels.jpg);
}
section.scroll2 div.item:nth-of-type(1) {
background-image: url(../img/health.jpg);
}
section.scroll2 div.item:nth-of-type(2) {
background-image: url(../img/family.jpg);
}
section.scroll2 div.item:nth-of-type(3) {
background-image: url(../img/numbers.jpg);
}
section.scroll2 div.item:nth-of-type(4) {
background-image: url(../img/law.jpg);
}
section.scroll2 div.item:nth-of-type(5) {
background-image: url(../img/suit.jpg);
}
section.scroll2 div.item:nth-of-type(6) {
background-image: url(../img/sport.jpg);
}
section.scroll3 div.item:nth-of-type(1) {
background-image: url(../img/animals.jpg);
}
section.scroll3 div.item:nth-of-type(2) {
background-image: url(../img/culture.jpg);
}
section.scroll3 div.item:nth-of-type(3) {
background-image: url(../img/food.jpg);
}
section.scroll3 div.item:nth-of-type(4) {
background-image: url(../img/issues.jpg);
}
section.scroll3 div.item:nth-of-type(5) {
background-image: url(../img/hobby.jpg);
}
section.scroll3 div.item:nth-of-type(6) {
background-image: url(../img/contacts.jpg);
}
div.item p {
color: white;
font-size: 4rem;
line-height: 35vh;
text-align: center;
/* font-family: 'Italianno', cursive;*/
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
transition: 1s;
opacity: 1;
}
div.item a {
color: white;
opacity: 0;
text-decoration: none;
transition: 0.5s;
}
div.item:hover a {
opacity: 1;
border: none;
background-color: transparent;
text-decoration: none;
}
h1.idioms {
height: 20vh;
color: white;
line-height: 20vh;
font-size: 8rem;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
margin: 0 0 0 800px;
}
div.item:hover p {
background-color: rgba(0, 0, 0, 0.7);
opacity: 1;
}
div.item:hover {
background-size: 120%;
}
/* Strona o Idiomach - Mobilna */
@media (max-width:1600px) {
h1.idioms {
height: 20vh;
color: white;
line-height: 20vh;
font-size: 4rem;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
display: none;
}
div.all {
margin: 100px auto;
width: 100vw;
overflow-x: hidden;
}
div.item p {
color: white;
font-size: 2rem;
line-height: 35vh;
text-align: center;
/* font-family: 'Italianno', cursive;*/
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
transition: 1s;
opacity: 1;
}
}
@media (max-width:1362px) {
section.scroll1 {
height: 66vh;
}
section.scroll2 {
transform: translateX(-215vh);
height: 66vh;
transition: 2.5s;
}
section.scroll3 {
transform: translateX(315vh);
height: 66vh;
transition: 2.5s;
}
div.all {
margin: 50px auto;
width: 100vw;
height: 200vh;
}
h1.idioms {
font-size: 5.5rem;
}
div.item:nth-of-type(2) {
background-image: url(../img/character.jpg);
background-repeat: no-repeat;
background-size: cover;
}
div.item:nth-of-type(3) {
background-image: url(../img/weather.jpg);
background-repeat: no-repeat;
background-size: cover;
}
}
@media (orientation: landscape) and (max-width:1080px) {
div.item a {
opacity: 1;
}
div.item p {
font-size: 2.5rem;
background-color: rgba(0, 0, 0, 0.3);
}
}
@media (max-width:800px) {
div.item p {
color: #F1F8E9;
font-size: 2.5rem;
font-weight: 400;
line-height: 35vh;
text-align: center;
font-family: 'Italianno', cursive;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
opacity: 1;
}
}
@media (max-width:400px) {
div.all {
margin: 0 auto;
width: 100vw;
overflow-x: hidden;
}
div.item {
width: 100%;
height: 35vh;
float: left;
background-position: center;
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: cover;
background-color: rgba(0, 0, 0, 0.6);
}
div.item p {
color: #F1F8E9;
font-size: 4rem;
font-weight: 400;
line-height: 35vh;
text-align: center;
font-family: 'Italianno', cursive;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
opacity: 1;
z-index: 2;
background-color: rgba(0, 0, 0, 0.2);
}
div.item a {
opacity: 1;
}
section.scroll1 {
height: 210vh;
margin-top: 85px;
}
section.scroll2 {
transform: translateX(0);
height: 210vh;
}
section.scroll3 {
transform: translateX(0);
height: 70vh;
}
h1.idioms {
height: 15vh;
line-height: 15vh;
font-size: 2rem;
position: absolute;
top: 0;
left: 5%;
z-index: 5;
}
}
/*Strona Kontakt*/
section.kontakt {
width: 100%;
height: 100vh;
background-color: black;
margin: 30px auto;
}
h1.kontakt1 {
font-family: 'Roboto', sans-serif;
color: white;
font-size: 3.5rem;
text-align: center;
margin-left: 50px;
padding-top: 100px;
text-transform: uppercase;
}
div.wrap1 {
margin: 90px auto;
text-align: center;
height: 70vh;
background-color: #66CCCC;
width: 50%;
border-radius: 15%;
position: relative;
}
#mail {
background-color: white;
border: solid 2px gray;
width: 50%;
height: 10%;
margin-left: 30px;
margin-bottom: 20px;
padding: 20px 20px;
font-size: 20px;
position: absolute;
top: 8vh;
left: 21.8%;
}
#msg {
background-color: white;
border: solid 2px gray;
width: 50%;
height: 30vh;
margin-bottom: 20px;
font-size: 20px;
padding: 10px;
position: absolute;
top: 20vh;
left: 25%;
}
#send {
background-color: white;
color: black;
width: 50%;
height: 10%;
font-size: 25px;
font-family: 'Roboto', sans-serif;
padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.7s;
position: absolute;
top: 55vh;
left: 25%;
}
#send:hover {
background-color: black;
color: white;
letter-spacing: 3px;
border-radius: 15%;
}
/* STRONA MOBILNA */
@media (max-width:1362px) {
section.kontakt {
width: 100%;
height: 100vh;
background-color: black;
margin: 30px auto;
}
div.wrap1 {
margin: 90px auto;
text-align: center;
height: 60vh;
background-color: #66CCCC;
width: 50%;
border-radius: 15%;
position: relative;
}
#mail {
top: 8vh;
left: 20%;
}
#msg {
top: 18vh;
left: 25%;
}
#send {
top: 50vh;
left: 25%;
}
}
@media (max-width:400px) {
h1.kontakt1 {
font-size: 2rem;
margin-left: 15px;
padding-top: 50px;
}
div.wrap1 {
margin: 30px auto;
height: 60vh;
width: 80%;
}
#mail {
width: 80%;
margin-left: 30px;
margin-bottom: 20px;
padding: 20px 20px;
font-size: 10px;
position: absolute;
top: 10vh;
left: 2%;
}
#msg {
width: 80%;
height: 20vh;
margin-bottom: 20px;
font-size: 10px;
padding: 10px;
position: absolute;
top: 20vh;
left: 12.5%;
}
#send {
width: 50%;
font-size: 25px;
padding: 10px;
position: absolute;
top: 45vh;
left: 25%;
}
}
/* Podstrona Thank you */
.thankyou {
margin: 50px 200px 0 100px;
font-size: 3rem;
text-align: center;
}
/*Podstrona money(idiomy)*/
section.money {
height: 20vh;
background-image: url(../img/dolar.jpg);
background-size: cover;
background-position: center;
border: 2px solid white;
}
h1.money1 {
line-height: 20vh;
color: white;
font-size: 6rem;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
background-color: rgba(0, 0, 0, 0.5);
letter-spacing: 4px;
text-align: center;
}
div.money2 {
margin-top: 35px;
height: 90vh;
}
div.money3,
div.money4,
div.money5,
div.money6,
div.money7,
div.money8,
div.money10,
div.money11,
div.money12,
div.money9 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.money3,
div.money4,
div.money5,
div.money6,
div.money7,
div.money9,
div.money10,
div.money11,
div.money12,
div.money8:hover {
cursor: pointer;
}
p.idioms {
font-size: 3rem;
color: white;
letter-spacing: 1px;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 1px 0 2px black;
}
div.money3:hover div.example1 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money4:hover div.example2 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money5:hover div.example3 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money6:hover div.example4 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money7:hover div.example5 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money8:hover div.example6 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money9:hover div.example7 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money10:hover div.example8 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money11:hover div.example9 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.money12:hover div.example10 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
/*
div.money3:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money4:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money5:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money6:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money7:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money8:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money9:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.money10:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
*/
@media (max-width:1362px) {
p.idioms {
font-size: 2rem;
color: white;
letter-spacing: 1px;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 1px 0 2px black;
}
div.money3:hover~div.example1 {
font-size: 2rem;
}
div.money4:hover~div.example2 {
font-size: 2rem;
}
div.money5:hover~div.example3 {
display: block;
font-size: 2rem;
}
div.money6:hover~div.example4 {
font-size: 2rem;
}
div.money7:hover~div.example5 {
font-size: 2rem;
}
div.money8:hover~div.example6 {
font-size: 2rem;
}
div.money9:hover~div.example7 {
font-size: 2rem;
}
div.money10:hover~div.example8 {
font-size: 2rem;
}
div.money11:hover~div.example9 {
font-size: 2rem;
}
div.money12:hover~div.example10 {
font-size: 2rem;
}
}
@media (orientation: landscape) and (max-width:1080px) {
h1.money1 {
font-size: 4rem;
}
}
/* STRONA MOBILNA MONEY */
@media (max-width:400px) {
h1.money1 {
font-size: 4rem;
}
p.idioms {
font-size: 1.8rem;
}
div.money3:hover div.example1 {
font-size: 1.5rem;
opacity: 1;
visibility: visible;
width: 96vw;
margin-left: 6px;
}
div.money4:hover div.example2 {
font-size: 1.5rem;
opacity: 1;
visibility: visible;
width: 96vw;
margin-left: 6px;
}
div.money5:hover div.example3 {
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
opacity: 1;
visibility: visible;
}
div.money6:hover div.example4 {
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money7:hover div.example5 {
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.money3,
div.money4,
div.money5,
div.money6,
div.money7,
div.money8,
div.money10,
div.money11,
div.money12,
div.money9 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/*Podstrona animals(idiomy)*/
section.animals {
height: 20vh;
background-image: url(../img/animals2.jpg);
background-size: cover;
background-position: center 85%;
border: 2px solid white;
}
/*Podstrona character(idiomy)*/
section.character {
height: 20vh;
background-image: url(../img/character2.jpg);
background-size: cover;
background-position: 100%;
border: 2px solid white;
}
div.character3,
div.character4,
div.character5,
div.character6,
div.character7,
div.character9,
div.character10,
div.character11,
div.character12,
div.character8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.character3,
div.character4,
div.character5,
div.character6,
div.character7,
div.character9,
div.character10,
div.character11,
div.character12,
div.character8:hover {
cursor: pointer;
}
div.character3:hover div.example1 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character4:hover div.example2 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character5:hover div.example3 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character6:hover div.example4 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character7:hover div.example5 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character8:hover div.example6 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character9:hover div.example7 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character10:hover div.example8 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character11:hover div.example9 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
div.character12:hover div.example10 {
opacity: 1;
visibility: visible;
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
}
h1.character1 {
line-height: 20vh;
color: white;
font-size: 6rem;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
background-color: rgba(0, 0, 0, 0.5);
letter-spacing: 4px;
text-align: center;
}
@media (max-width:1362px) {
div.character3:hover~div.example1 {
font-size: 2rem;
}
div.character4:hover~div.example2 {
font-size: 2rem;
}
div.character5:hover~div.example3 {
font-size: 2rem;
}
div.character6:hover~div.example4 {
font-size: 2rem;
}
div.character7:hover~div.example5 {
font-size: 2rem;
}
div.character8:hover~div.example6 {
font-size: 2rem;
}
div.character9:hover~div.example7 {
font-size: 2rem;
}
div.character10:hover~div.example8 {
font-size: 2rem;
}
div.character11:hover~div.example9 {
font-size: 2rem;
}
div.character12:hover~div.example10 {
font-size: 2rem;
}
}
/* STRONA MOBILNA CHARACTER */
@media (max-width:400px) {
h1.character1 {
line-height: 15vh;
font-size: 3rem;
letter-spacing: 2px;
text-align: center;
}
section.character {
height: 15vh;
border: 1px solid white;
}
div.character3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.character3,
div.character4,
div.character5,
div.character6,
div.character7,
div.character9,
div.character10,
div.character11,
div.character12,
div.character8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/*Podstrona contacts(idiomy)*/
section.contacts {
height: 20vh;
background-image: url(../img/contacts3.jpg);
background-size: cover;
background-position: center 40%;
border: 2px solid white;
}
/*Podstrona culture(idiomy)*/
section.culture {
height: 20vh;
background-image: url(../img/culture2.jpg);
background-size: cover;
background-position: center 35%;
border: 2px solid white;
}
div.culture3 {
margin: 15px 0 15px 0;
border-radius: 10%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.culture4 {
margin: 15px 0 15px 0;
border-radius: 10%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.example1,
div.example2,
div.example3,
div.example4,
div.example5,
div.example6,
div.example8,
div.example9,
div.example10,
div.example7 {
position: absolute;
top: 100%;
/* pod moneyX */
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
}
div.culture3,
div.culture4:hover {
cursor: pointer;
}
div.culture3:hover~div.example1 {
display: block;
font-size: 2.5rem;
margin: 0 auto;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 80vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
border-radius: 10%;
}
div.culture4:hover~div.example2 {
display: block;
font-size: 2.5rem;
margin: 0 auto;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 80vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
border-radius: 10%;
}
div.culture3:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
div.culture4:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
@media (max-width:1362px) {
div.culture3:hover~div.example1 {
font-size: 2rem;
}
div.culture4:hover~div.example2 {
font-size: 2rem;
}
}
/*Podstrona education(idiomy)*/
section.education {
height: 20vh;
background-image: url(../img/education3.jpg);
background-size: cover;
background-position: 100% 55%;
background-repeat: no-repeat;
border: 2px solid white;
}
div.education3,
div.education4,
div.education5,
div.education6,
div.education7,
div.education9,
div.education10,
div.education11,
div.education12,
div.education8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.education3,
div.education4,
div.education5,
div.education6,
div.education7,
div.education9,
div.education10,
div.education11,
div.education12,
div.education8:hover {
cursor: pointer;
}
div.education3:hover div.example1 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
border-radius: 10%;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education4:hover div.example2 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education5:hover div.example3 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education6:hover div.example4 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education7:hover div.example5 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education8:hover div.example6 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education9:hover div.example7 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education10:hover div.example8 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education11:hover div.example9 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.education12:hover div.example10 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
/* STRONA MOBILNA EDUKACJA */
@media (max-width:1362px) {
div.education3:hover~div.example1 {
font-size: 2rem;
}
div.education4:hover~div.example2 {
font-size: 2rem;
}
div.education5:hover~div.example3 {
font-size: 2rem;
}
div.education6:hover~div.example4 {
font-size: 2rem;
}
div.education7:hover~div.example5 {
font-size: 2rem;
}
div.education8:hover~div.example6 {
font-size: 2rem;
}
div.education9:hover~div.example7 {
font-size: 2rem;
}
div.education10:hover~div.example8 {
font-size: 2rem;
}
div.education11:hover~div.example9 {
font-size: 2rem;
}
div.education12:hover~div.example10 {
font-size: 2rem;
}
}
@media (max-width:400px) {
div.education3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.education3,
div.education4,
div.education5,
div.education6,
div.education7,
div.education9,
div.education10,
div.education11,
div.education12,
div.education8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/*Podstrona family(idiomy)*/
section.family {
height: 20vh;
background-image: url(../img/family2.jpg);
background-size: cover;
background-position: center center;
border: 2px solid white;
}
/*Podstrona food(idiomy)*/
section.food {
height: 20vh;
background-image: url(../img/food2.jpg);
background-size: cover;
background-position: center center;
border: 2px solid white;
}
/*Podstrona health(idiomy)*/
section.health {
height: 20vh;
background-image: url(../img/health2.jpg);
background-size: cover;
background-position: 100% 60%;
border: 2px solid white;
}
div.health3,
div.health4,
div.health5,
div.health6,
div.health7,
div.health9,
div.health10,
div.health11,
div.health12,
div.health8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.health3,
div.health4,
div.health5,
div.health6,
div.health7,
div.health9,
div.health10,
div.health11,
div.health12,
div.health8:hover {
cursor: pointer;
}
div.health3:hover div.example1 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health4:hover div.example2 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health5:hover div.example3 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health6:hover div.example4 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health7:hover div.example5 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health8:hover div.example6 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health9:hover div.example7 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health10:hover div.example8 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health11:hover div.example9 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.health12:hover div.example10 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
/* STRONA MOBILNA ZDROWIE */
@media (max-width:1362px) {
div.health3:hover~div.example1 {
font-size: 2rem;
}
div.health4:hover~div.example2 {
font-size: 2rem;
}
div.health5:hover~div.example3 {
font-size: 2rem;
}
div.health6:hover~div.example4 {
font-size: 2rem;
}
div.health7:hover~div.example5 {
font-size: 2rem;
}
div.health8:hover~div.example6 {
display: block;
font-size: 2rem;
}
div.health9:hover~div.example7 {
display: block;
font-size: 2rem;
}
div.health10:hover~div.example8 {
display: block;
font-size: 2rem;
}
div.health11:hover~div.example9 {
display: block;
font-size: 2rem;
}
div.health12:hover~div.example10 {
display: block;
font-size: 2rem;
}
}
@media (max-width:400px) {
div.health3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.health3,
div.health4,
div.health5,
div.health6,
div.health7,
div.health9,
div.health10,
div.health11,
div.health12,
div.health8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/*Podstrona image(idiomy)*/
section.image {
height: 20vh;
background-image: url(../img/image2.jpg);
background-size: cover;
background-position: center 40%;
border: 2px solid white;
}
div.wzimage3,
div.wzimage4,
div.wzimage5,
div.wzimage6,
div.wzimage7,
div.wzimage9,
div.wzimage10,
div.wzimage11,
div.wzimage12,
div.wzimage8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.wzimage3,
div.wzimage4,
div.wzimage5,
div.wzimage6,
div.wzimage7,
div.wzimage9,
div.wzimage10,
div.wzimage11,
div.wzimage12,
div.wzimage8:hover {
cursor: pointer;
}
div.wzimage3:hover div.example1 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage4:hover div.example2 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage5:hover div.example3 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage6:hover div.example4 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage7:hover div.example5 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage8:hover div.example6 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage9:hover div.example7 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage10:hover div.example8 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage11:hover div.example9 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.wzimage12:hover div.example10 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
h1.image1 {
line-height: 20vh;
color: white;
font-size: 6rem;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
background-color: rgba(0, 0, 0, 0.5);
letter-spacing: 4px;
text-align: center;
}
/* STRONA MOBILNA IMAGE */
@media (max-width:1362px) {
div.wzimage3:hover~div.example1 {
font-size: 2rem;
}
div.wzimage4:hover~div.example2 {
font-size: 2rem;
}
div.wzimage5:hover~div.example3 {
font-size: 2rem;
}
div.wzimage6:hover~div.example4 {
font-size: 2rem;
}
div.wzimage7:hover~div.example5 {
font-size: 2rem;
}
div.wzimage8:hover~div.example6 {
font-size: 2rem;
}
div.wzimage9:hover~div.example7 {
font-size: 2rem;
}
div.wzimage10:hover~div.example8 {
font-size: 2rem;
}
div.wzimage11:hover~div.example9 {
font-size: 2rem;
}
div.wzimage12:hover~div.example10 {
font-size: 2rem;
}
}
@media (orientation: landscape) and (max-width:1080px) {
h1.image1 {
font-size: 4rem;
}
}
@media (max-width:400px) {
div.wzimage3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.wzimage12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
h1.image1 {
line-height: 20vh;
color: white;
font-size: 2.8rem;
}
section.image {
height: 20vh;
border: 1px solid white;
}
div.wzimage3,
div.wzimage4,
div.wzimage5,
div.wzimage6,
div.wzimage7,
div.wzimage9,
div.wzimage10,
div.wzimage11,
div.wzimage12,
div.wzimage8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/*Podstrona interests(idiomy)*/
section.interests {
height: 20vh;
background-image: url(../img/hobby3.jpg);
background-size: cover;
background-position: center center;
border: 2px solid white;
}
h1.interests1 {
line-height: 20vh;
color: white;
font-size: 6rem;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
background-color: rgba(0, 0, 0, 0.5);
letter-spacing: 4px;
text-align: center;
}
/* STRONA MOBILNA INTERESTS */
@media (orientation: landscape) and (max-width:1080px) {
h1.interests1 {
font-size: 4rem;
}
}
@media (max-width:400px) {
h1.interests1 {
line-height: 20vh;
font-size: 3rem;
letter-spacing: 3px;
}
}
/*Podstrona issues(idiomy)*/
section.issues {
height: 20vh;
background-image: url(../img/issues2.jpg);
background-size: cover;
background-position: center 47%;
border: 2px solid white;
}
/*Podstrona law(idiomy)*/
section.law {
height: 20vh;
background-image: url(../img/law2.jpg);
background-size: cover;
background-position: center 40%;
border: 2px solid white;
}
/*Podstrona numbers(idiomy)*/
section.numbers {
height: 20vh;
background-image: url(../img/numbers2.jpg);
background-size: cover;
background-position: 100% 30%;
border: 2px solid white;
}
/*Podstrona sport(idiomy)*/
section.sport {
height: 20vh;
background-image: url(../img/sport2.jpg);
background-size: cover;
background-position: center 60%;
border: 2px solid white;
}
/*Podstrona suit(idiomy)*/
section.suit {
height: 20vh;
background-image: url(../img/suit2.jpg);
background-size: cover;
background-position: center center;
border: 2px solid white;
}
/*Podstrona travels(idiomy)*/
section.travels {
height: 20vh;
background-image: url(../img/travels2.jpg);
background-size: cover;
background-position: 100% 60%;
border: 2px solid white;
}
div.travels3,
div.travels4,
div.travels5,
div.travels6,
div.travels7,
div.travels9,
div.travels10,
div.travels11,
div.travels12,
div.travels8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.travels3,
div.travels4,
div.travels5,
div.travels6,
div.travels7,
div.travels9,
div.travels10,
div.travels11,
div.travels12,
div.travels8:hover {
cursor: pointer;
}
div.travels3:hover div.example1 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels4:hover div.example2 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels5:hover div.example3 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels6:hover div.example4 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels7:hover div.example5 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels8:hover div.example6 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels9:hover div.example7 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels10:hover div.example8 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels11:hover div.example9 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
div.travels12:hover div.example10 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
opacity: 1;
visibility: visible;
text-align: center;
}
@media (max-width:1362px) {
div.travels3:hover~div.example1 {
font-size: 2rem;
}
div.travels4:hover~div.example2 {
font-size: 2rem;
}
div.travels5:hover~div.example3 {
font-size: 2rem;
}
div.travels6:hover~div.example4 {
font-size: 2rem;
}
div.travels7:hover~div.example5 {
font-size: 2rem;
}
div.travels8:hover~div.example6 {
font-size: 2rem;
}
div.travels9:hover~div.example7 {
font-size: 2rem;
}
div.travels10:hover~div.example8 {
font-size: 2rem;
}
div.travels11:hover~div.example9 {
font-size: 2rem;
}
div.travels12:hover~div.example10 {
font-size: 2rem;
}
div.travels3,
div.travels4,
div.travels5,
div.travels6,
div.travels7,
div.travels9,
div.travels10,
div.travels11,
div.travels12,
div.travels8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/* STRONA MOBILNA TRAVEL */
@media (max-width:400px) {
div.travels3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.travels12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
}
/*Podstrona weather(idiomy)*/
section.weather {
height: 20vh;
background-image: url(../img/weather2.jpg);
background-size: cover;
background-position: center 90%;
border: 2px solid white;
}
div.weather3,
div.weather4,
div.weather5,
div.weather6,
div.weather7,
div.weather9,
div.weather10,
div.weather11,
div.weather12,
div.weather8 {
position: relative;
margin: 50px 0 50px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
div.weather3,
div.weather4,
div.weather5,
div.weather6,
div.weather7,
div.weather9,
div.weather10,
div.weather11,
div.weather12,
div.weather8:hover {
cursor: pointer;
}
div.weather3:hover div.example1 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather4:hover div.example2 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 100vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather5:hover div.example3 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather6:hover div.example4 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather7:hover div.example5 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather8:hover div.example6 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather9:hover div.example7 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather10:hover div.example8 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather11:hover div.example9 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
div.weather12:hover div.example10 {
font-size: 2.5rem;
margin-left: 30px;
padding: 10px 0 10px 15px;
box-shadow: 3px 0 15px 0 white;
width: 96vw;
background-color: rgba(0, 0, 0);
color: #C0C0C0;
text-align: center;
opacity: 1;
visibility: visible;
}
/*
div.weather3:hover {
transform: skew(-20deg, 0);
box-shadow: 0 0 10px 10px black;
}
*/
/* STRONA MOBILNA WEATHER */
@media (max-width:1362px) {
div.weather3:hover~div.example1 {
font-size: 2rem;
}
div.weather4:hover~div.example2 {
font-size: 2rem;
}
div.weather5:hover~div.example3 {
font-size: 2rem;
}
div.weather6:hover~div.example4 {
font-size: 2rem;
}
div.weather7:hover~div.example5 {
font-size: 2rem;
}
div.weather8:hover~div.example6 {
font-size: 2rem;
}
div.weather9:hover~div.example7 {
font-size: 2rem;
}
div.weather10:hover~div.example8 {
font-size: 2rem;
}
div.weather11:hover~div.example9 {
font-size: 2rem;
}
div.weather12:hover~div.example10 {
font-size: 2rem;
}
}
@media (max-width:400px) {
div.weather3:hover div.example1 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather4:hover div.example2 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather5:hover div.example3 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather6:hover div.example4 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather7:hover div.example5 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather8:hover div.example6 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather9:hover div.example7 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather10:hover div.example8 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather11:hover div.example9 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather12:hover div.example10 {
display: block;
font-size: 1.5rem;
width: 96vw;
margin-left: 6px;
}
div.weather3,
div.weather4,
div.weather5,
div.weather6,
div.weather7,
div.weather9,
div.weather10,
div.weather11,
div.weather12,
div.weather8 {
position: relative;
margin: 58px 0 58px 0;
border-radius: 5%;
background-color: rgba(0, 51, 255, 0.5);
box-shadow: 0 0 10px 4px white;
transition: 1s linear;
}
}
/* Strona o IT */
.bodyIT {
background-color: white;
}
section.it {
width: 100%;
height: 50vh;
position: static;
top: 0;
left: 0;
overflow: hidden;
z-index: -210;
box-sizing: border-box;
}
div.absolute {
width: 100%;
height: 50vh;
position: static;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
box-sizing: border-box;
animation: It 1.2s linear both;
animation-delay: 0.5s;
}
div.absolute1 {
width: 100%;
height: 50vh;
position: static;
top: 0;
right: 0;
overflow: hidden;
z-index: -1;
box-sizing: border-box;
animation: It 0.5s linear both;
animation-delay: 0.3s;
}
div.absolute2 {
width: 100%;
height: 50vh;
position: static;
top: 0;
right: 0;
overflow: hidden;
z-index: -1;
box-sizing: border-box;
animation: It2 0.5s linear both;
animation-delay: 0.4s;
}
.it.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20vh;
max-width: 100%;
z-index: 2;
object-fit: cover;
}
h1.titleIT {
color: white;
font-size: 50px;
position: absolute;
top: 20%;
left: 30%;
z-index: 1;
}
.itwrap {
display: block;
}
.filter {
filter: blur(4px);
}
section.general {
display: flex;
flex-direction: row;
height: 50vh;
width: 100%;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
justify-content: space-between;
background-color: white;
margin-top: 20px;
animation: Itflex 5s linear both;
animation-delay: 3s;
}
div.itterms {
background-color: rgb(0, 0, 0);
width: 31%;
border: solid 2px black;
color: rgb(255, 255, 255);
box-shadow: 3px 3px 30px 0 #3366FF;
}
div.itexamples {
background-color: rgb(0, 0, 0);
width: 31%;
border: solid 2px black;
color: rgb(255, 255, 255);
box-shadow: 3px 3px 30px 0 #3366FF;
}
div.it1 {
background-color: rgb(0, 0, 0);
width: 31%;
border: solid 2px black;
color: rgb(255, 255, 255);
box-shadow: 3px 3px 30px 0 #3366FF;
}
div.itterms p,
div.itexamples p,
div.it1 p {
padding: 30px 15px 0 15px;
font-size: 2rem;
text-align: justify;
position: relative;
}
i.always {
color: white;
padding: 20px 20px 0 0;
font-size: 50px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
z-index: 7;
position: fixed;
}
i.always:hover {
color: white;
font-size: 50px;
transform: scale(1.2);
}
aside {
z-index: 3;
}
aside.off {
display: none;
background-image: linear-gradient(45deg, #CCCC99 30%, #00CCCC 100%);
font-weight: 1000;
font-family: 'Roboto', sans-serif;
width: 500px;
height: 468px;
z-index: 1;
position: absolute;
top: 0;
right: 0;
border: 2px solid black;
transform: translateX(100vh);
transform: scale(0);
}
.off {
display: none;
}
aside.on h2,
aside.off h2 {
font-size: 2rem;
box-sizing: border-box;
padding: 30px 0 0 40px;
color: white;
text-transform: uppercase;
}
aside.on li,
aside.off li {
list-style: none;
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
box-sizing: border-box;
padding: 35px 0 0 40px;
text-align: center;
}
aside.on li a,
aside.off a {
text-decoration: none;
color: black;
text-transform: uppercase;
transition: 0.4s;
}
aside.on li a:hover {
color: white;
text-decoration: underline;
font-size: 1.7rem;
}
aside.on {
/* right: 0; */
transform: translateX(0);
transform: scale(1);
display: block;
border-radius: 10%;
}
/* Animacja */
@keyframes It {
0% {
width: 0%;
}
20% {
width: 20%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
@keyframes It2 {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes Itflex {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
/* STRONA IT MOBILNA */
@media (max-width:1600px) {
h1.titleIT {
color: white;
font-size: 30px;
position: absolute;
top: 20%;
left: 25%;
z-index: 4;
}
div.itterms p,
div.itexamples p,
div.it1 p {
padding: 30px 15px 0 15px;
font-size: 1.4rem;
text-align: justify;
position: relative;
}
aside.on li,
aside.off li {
list-style: none;
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
box-sizing: border-box;
padding: 25px 0 0 40px;
text-align: center;
z-index: 5;
}
aside.off {
z-index: 5;
}
i.always {
font-size: 40px;
}
aside.on li a:hover {
color: white;
font-size: 1.9rem;
}
}
@media (max-width:1362px) {
aside.off {
display: none;
background-image: linear-gradient(45deg, #CCCC99 30%, #00CCCC 100%);
font-weight: 1000;
font-family: 'Roboto', sans-serif;
width: 450px;
height: 390px;
z-index: 1;
position: absolute;
top: 0;
right: 0;
border: 2px solid black;
transform: translateX(100vh);
transform: scale(0);
}
.off {
display: none;
}
aside.on {
/* right: 0; */
transform: translateX(0);
transform: scale(1);
display: block;
border-radius: 10%;
}
}
@media (orientation: landscape) and (max-width:1080px) {
section.general {
height: 100vh;
justify-content: space-around;
flex-direction: column;
margin-top: 5px;
}
div.itterms {
width: 100%;
height: 30vh;
}
div.itexamples {
width: 100%;
height: 30vh;
}
div.it1 {
width: 100%;
height: 30vh;
}
div.itterms p,
div.itexamples p,
div.it1 p {
padding: 20px 20px 0 15px;
font-size: 1.7rem;
}
aside.off {
width: 350px;
height: 330px;
z-index: 5;
position: absolute;
top: 0;
left: 10px;
}
aside.on li,
aside.off li {
font-size: 1.4rem;
box-sizing: border-box;
padding: 20px 0 0 0;
text-align: center;
z-index: 5;
}
i.always {
font-size: 40px;
}
i.always:hover {
font-size: 40px;
}
}
@media (max-width:400px) {
section.it {
height: 30vh;
}
h1.titleIT {
color: white;
font-size: 25px;
position: absolute;
top: 15%;
left: 25%;
z-index: 4;
}
section.general {
height: 70vh;
justify-content: space-around;
flex-direction: column;
margin-top: 5px;
}
div.itterms {
width: 100%;
height: 19vh;
}
div.itexamples {
width: 100%;
height: 21vh;
}
div.it1 {
width: 100%;
height: 23vh;
}
div.itterms p,
div.itexamples p,
div.it1 p {
padding: 30px 20px 0 15px;
font-size: 1.5rem;
}
aside.off {
width: 370px;
height: 330px;
z-index: 5;
position: absolute;
top: 0;
left: 10px;
}
aside.on li,
aside.off li {
font-size: 1.2rem;
box-sizing: border-box;
padding: 20px 0 0 40px;
text-align: left;
z-index: 5;
}
i.always {
font-size: 40px;
}
i.always:hover {
font-size: 40px;
}
}
/* Strona jezyk w IT */
.add-word {
color: white;
cursor: pointer;
background-color: #33cc00;
border-radius: 25%;
font-size: 2.5rem;
}
@media (max-width:400px) {
.add-word {
color: white;
background-color: #33cc00;
border-radius: 5%;
font-size: 2rem;
}
}
/* Strona Hardware */
h1.titleHardware {
color: white;
font-size: 60px;
position: absolute;
top: 20%;
left: 40%;
z-index: 1;
}
.hardwareGeneral {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
flex-wrap: wrap;
/* height: 180vh; */
width: 100%;
}
.hardwareGeneral p {
font-size: 2rem;
color: white;
padding: 20px 0 15px 40px;
box-sizing: border-box;
font-weight: bold;
}
.hardwareGeneral p i.fa-comment {
padding-left: 15px;
color: white;
cursor: zoom-in;
}
p.cpu,
p.motherboard {
cursor: zoom-in;
}
p.cpu:hover {
color: black;
}
.hardwareVoc {
width: 47%;
background-image: linear-gradient(35deg, #B0BEC5 40%, #9999CC 100%);
color: white;
border: 2px solid black;
margin-top: 15px;
box-shadow: 0 0 3px 3px black;
}
.hardwareVoc p {
border: 1px solid white;
}
/* Modal Pop up */
.modal {
position: fixed;
top: 0;
left: 0;
/* filter: blur(3px); */
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
display: none;
font-size: 2rem;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
}
.modalactive {
display: block;
}
.pop,
.popR {
position: absolute;
top: 20vh;
left: 20vw;
width: 60vw;
height: 65vh;
background-color: rgba(153, 153, 204);
border: 2px solid black;
box-sizing: border-box;
box-shadow: 0 0 10px 10px white;
display: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
text-align: justify;
}
span.second,
span.first {
position: absolute;
top: 0;
right: 0;
color: black;
width: 30px;
height: 30px;
font-size: 25px;
text-align: center;
background-color: white;
border: 2px solid white;
box-sizing: border-box;
}
span.second:hover {
cursor: pointer;
}
span.first:hover {
cursor: pointer;
}
.popR.active {
display: block;
}
.pop.active {
display: block;
}
.fa-window-close {
position: absolute;
top: -2.5px;
right: -10px;
font-size: 35px;
cursor: pointer;
}
.fa-window-close:hover {
color: white;
}
/* HARDWARE MOBILNA */
@media (max-width:1600px) {
h1.titleHardware {
color: white;
font-size: 40px;
position: absolute;
top: 20%;
left: 40%;
z-index: 1;
}
.hardwareGeneral p {
font-size: 1.2rem;
}
}
@media (max-width:1362px) {
.hardwareGeneral p {
font-size: 2.2rem;
color: white;
padding: 20px 0 15px 40px;
box-sizing: border-box;
font-weight: bold;
}
}
@media (orientation: landscape) and (max-width:1080px) {
.hardwareGeneral p {
font-size: 1.3rem;
color: white;
padding: 20px 0 15px 20px;
box-sizing: border-box;
font-weight: bold;
}
}
@media (max-width:400px) {
h1.titleHardware {
color: white;
font-size: 30px;
position: absolute;
top: 15%;
left: 30%;
z-index: 1;
}
.hardwareGeneral p {
font-size: 1.4rem;
color: white;
padding: 20px 0 15px 20px;
box-sizing: border-box;
font-weight: bold;
}
.hardwareVoc {
width: 100%;
}
}
/* footer IT */
.foot {
background-color: black;
color: white;
width: 100%;
height: 10vh;
margin-top: 12px;
text-align: center;
}
div.foot a:hover i {
color: black;
}
div.foot p {
font-size: 0.7rem;
}
div.foot a p i {
text-align: center;
line-height: 8vh;
color: white;
}
div.foot a p i:hover {
color: black;
background-color: #FFFFCC;
}
div.foot a p:hover {
color: black;
background-color: #FFFFCC;
}
/* QUIZ */
h1.quiz {
text-align: center;
margin: 30px 0;
color: whitesmoke;
font-size: 2.3rem;
}
i.fa {
color: white;
position: absolute;
left: 20%;
top: 80%;
font-size: 3rem;
z-index: 3;
}
i.fa:hover {
cursor: pointer;
}
.add-idiom-btn {
color: white;
cursor: pointer;
background-color: #33cc00;
border-radius: 25%;
font-size: 3rem;
position: absolute;
left: 47.5%;
bottom: 8%;
width: 40px;
height: 40px;
}
@media (max-width:400px) {
.add-idiom-btn {
color: white;
cursor: pointer;
background-color: #33cc00;
border-radius: 5%;
font-size: 2rem;
position: absolute;
left: 46%;
bottom: 6%;
width: 25px;
height: 25px;
}
}
button.idioms,
button.item,
button.phrasals {
display: block;
font-size: 2.5rem;
width: 40%;
height: 30%;
background-color: #66CCCC;
/* border: 2px solid black; */
box-shadow: 0 0 3px 3px black;
margin: 10px auto;
}
button.idioms:hover {
color: white;
cursor: pointer;
}
button.item:hover {
color: white;
cursor: pointer;
}
button.phrasals:hover {
color: white;
cursor: pointer;
}
h2.default {
font-size: 5rem;
color: white;
text-align: center;
margin-top: 250px;
overflow: hidden;
}
.hole {
position: absolute;
top: 265px;
left: 100px;
width: 600px;
height: 600px;
background-color: black;
margin: 0 auto;
box-shadow: 0 0 10px 10px white;
border-radius: 50%;
overflow: hidden;
transition: 0.7s;
}
.hole:hover {
cursor: pointer;
}
.holePolish {
/* background-image: linear-gradient(180deg, #E1F5FE 22%, #CC3333 100%); */
background-color: white;
position: absolute;
top: 265px;
left: 100px;
width: 600px;
height: 600px;
margin: 0 auto;
box-shadow: 0 0 10px 10px black;
border-radius: 50%;
overflow: hidden;
transition: 0.7s;
}
.holePolish:hover {
cursor: pointer;
}
.entry {
position: absolute;
top: 200px;
right: 50px;
width: 50%;
height: 30%;
}
input {
display: block;
font-size: 2.5rem;
width: 41%;
height: 30%;
position: absolute;
left: 284px;
}
.searching {
width: 500px;
height: 200px;
background-color: black;
border: 1px solid black;
position: absolute;
left: 60%;
top: 65%;
border-radius: 5%;
overflow: hidden;
box-shadow: 0 0 5px 5px black;
}
div.searching p {
color: white;
font-size: 2.5rem;
text-align: center;
margin-top: 10%;
}
/* GENERATOR STRONA MOBILNA */
@media (max-width:1600px) {
h1.quiz {
text-align: center;
margin: 30px 0;
color: whitesmoke;
font-size: 2rem;
}
.hole {
position: absolute;
top: 190px;
left: 100px;
width: 350px;
height: 350px;
background-color: black;
margin: 0 auto;
box-shadow: 0 0 10px 10px white;
border-radius: 50%;
}
.holePolish {
box-shadow: 0 0 10px 10px black;
position: absolute;
top: 190px;
left: 100px;
width: 350px;
height: 350px;
background-color: white;
margin: 0 auto;
border-radius: 50%;
}
button.idioms,
button.item,
button.phrasals {
display: block;
font-size: 2rem;
width: 40%;
height: 30%;
background-color: #66CCCC;
/* border: 2px solid black; */
box-shadow: 0 0 3px 3px black;
margin: 20px auto;
}
.entry {
position: absolute;
top: 230px;
right: 20px;
width: 50%;
height: 30%;
}
h2.default {
font-size: 4.3rem;
color: white;
text-align: center;
margin-top: 130px;
}
input {
display: block;
font-size: 2.5rem;
width: 42%;
height: 30%;
position: absolute;
left: 200px;
}
.searching {
display: none;
}
div.searching p {
color: white;
font-size: 3rem;
text-align: center;
margin-top: 10%;
}
@media (max-width:1362px) {
.hole {
top: 230px;
left: 100px;
width: 450px;
height: 450px;
}
.holePolish {
top: 230px;
left: 100px;
width: 450px;
height: 450px;
}
h2.default {
font-size: 4rem;
margin-top: 180px;
}
i.fa {
color: white;
position: absolute;
left: 22%;
top: 80%;
font-size: 3rem;
z-index: 3;
}
}
@media (orientation: landscape) and (max-width:1080px) {
h1.quiz {
text-align: center;
margin: 75px 20px 0 20px;
color: whitesmoke;
font-size: 1.8rem;
}
button.phrasals {
display: block;
font-size: 2rem;
width: 50%;
height: 33%;
margin: 20px auto;
position: absolute;
top: 50px;
left: 180px;
}
button.item {
display: block;
font-size: 2rem;
width: 50%;
height: 33%;
margin: 20px auto;
position: absolute;
top: 110px;
left: 180px;
}
button.idioms {
display: block;
font-size: 2rem;
width: 50%;
height: 33%;
margin: 20px auto;
position: absolute;
top: 170px;
left: 180px;
text-align: center;
}
.hole {
position: absolute;
top: 190px;
left: 90px;
width: 340px;
height: 340px;
background-color: black;
margin: 0 auto;
box-shadow: 0 0 10px 10px white;
border-radius: 50%;
}
.holePolish {
box-shadow: 0 0 10px 10px black;
position: absolute;
top: 190px;
left: 90px;
width: 340px;
height: 340px;
background-color: white;
margin: 0 auto;
border-radius: 50%;
}
h2.default {
font-size: 3rem;
color: white;
text-align: center;
margin-top: 130px;
}
input {
display: block;
font-size: 2rem;
width: 50%;
height: 50%;
position: absolute;
left: 180px;
top: 10px;
}
i.fa {
color: white;
position: absolute;
left: 32%;
top: 155%;
font-size: 2.8rem;
z-index: 3;
}
}
@media (max-width:400px) {
h1.quiz {
text-align: center;
margin: 85px 10px;
color: whitesmoke;
font-size: 1rem;
}
.hole,
.holePolish {
position: absolute;
top: 130px;
left: 45px;
width: 300px;
height: 300px;
transition: 0.3s;
}
.entry {
position: relative;
top: 230px;
left: 0;
width: 100%;
height: 60vh;
}
h2.default {
font-size: 2.5rem;
color: white;
text-align: center;
margin-top: 120px;
}
input {
display: block;
font-size: 2.5rem;
width: 72%;
height: 15%;
position: absolute;
left: 58px;
top: 82%;
border: 1px solid white;
background-color: black;
color: white;
}
.searching {
display: none;
}
div.searching p {
color: white;
font-size: 3rem;
text-align: center;
margin-top: 10%;
}
/* button.idioms,
button.item, */
button.phrasals {
display: block;
font-size: 1.5rem;
width: 70%;
height: 15%;
margin: 20px auto;
position: absolute;
top: 70px;
left: 60px;
}
button.item {
display: block;
font-size: 1.5rem;
width: 70%;
height: 15%;
margin: 20px auto;
position: absolute;
top: 160px;
left: 60px;
}
button.idioms {
display: block;
font-size: 1.5rem;
width: 70%;
height: 15%;
margin: 20px auto;
position: absolute;
top: 250px;
left: 60px;
text-align: center;
}
i.fa {
color: white;
position: absolute;
left: 47%;
top: 50%;
font-size: 2.2rem;
z-index: 3;
}
}
}
/* Questions */
.question-group {
display: none;
/* Domyślnie ukrywa wszystkie grupy pytań */
}
.prev,
.next {
display: inline-block;
}
.prev {
position: fixed;
right: 330px;
top: 700px;
width: 115px;
height: 115px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
}
.next {
position: fixed;
right: 450px;
top: 700px;
width: 115px;
height: 115px;
border-radius: 50%;
font-size: 1.5rem;
transition: .5s;
cursor: pointer;
}
.next:hover {
background-color: #99ff99;
}
.green {
background-color: green;
color: white !important;
}
.red {
background-color: red;
color: white !important;
}
.black {
background-color: white;
}
span.questions {
position: absolute;
left: 37%;
top: 20px;
font-size: 3.5rem;
text-transform: uppercase;
color: #556B2F;
}
span.questions2 {
position: absolute;
left: 37%;
top: 20px;
font-size: 3.5rem;
text-transform: uppercase;
color: #556B2F;
}
button.result {
position: fixed;
right: 250px;
top: 200px;
font-size: 1.5rem;
background-color: black;
color: white;
border: 2px solid blue;
padding: 10px 10px;
box-shadow: 0 0 3px 3px white;
text-transform: uppercase;
width: 230px;
height: 130px;
}
button.failures {
position: fixed;
right: 250px;
top: 350px;
font-size: 1.5rem;
background-color: black;
color: white;
border: 2px solid blue;
padding: 10px 10px;
box-shadow: 0 0 3px 3px white;
text-transform: uppercase;
width: 230px;
height: 130px;
}
button.percentage {
position: fixed;
right: 250px;
top: 500px;
font-size: 1.5rem;
background-color: black;
color: white;
border: 2px solid blue;
padding: 10px 10px;
box-shadow: 0 0 3px 3px white;
text-transform: uppercase;
width: 230px;
height: 130px;
}
button.reset {
position: fixed;
right: 210px;
top: 700px;
font-size: 1.5rem;
background-color: black;
color: white;
padding: 10px 10px;
border-radius: 50%;
box-shadow: 0 0 3px 3px white;
cursor: pointer;
width: 115px;
height: 115px;
border-radius: 50%;
transition: .5s;
}
button.reset:hover {
background-color: red;
color: white;
font-weight: bolder;
}
button.answer {
text-align: center;
font-size: 1.6rem;
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
width: 300px;
height: 50px;
padding: 2px 2px;
box-shadow: 0 0 3px 3px black;
cursor: pointer;
display: inline-block;
vertical-align: top;
}
p.question {
font-size: 2rem;
text-align: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 5px;
/* text-transform: uppercase; */
width: 1100px;
box-shadow: 0 0 3px 3px black;
font-weight: bolder;
background-color: #616161;
padding: 2px;
color: white;
}
.summary {
position: relative;
width: 90vw;
height: 105vh;
border-radius: 5%;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
.summaryTwo {
position: absolute;
top: 10%;
left: 5%;
}
.title {
font-style: italic;
font-size: 2rem;
color: #556B2F;
}
.title2 {
font-style: italic;
font-size: 2.5rem;
color: #0000cc;
text-align: center;
font-weight: bold;
}
.question-item {
cursor: pointer;
}
/* QUESTIONS STRONA MOBILNA */
@media (max-width:1600px) {
.summary {
width: 80vw;
height: 125vh;
}
button.answer {
text-align: center;
font-size: 1.2rem;
margin-left: 15px;
width: 150px;
padding: 2px 2px;
}
button.result {
position: fixed;
right: 100px;
top: 200px;
font-size: 2rem;
}
button.reset {
position: fixed;
right: 100px;
top: 260px;
font-size: 1.5rem;
}
span.questions {
position: absolute;
left: 35%;
top: 10px;
font-size: 2rem;
}
span.questions2 {
position: absolute;
left: 35%;
top: 10px;
font-size: 2rem;
}
p.question {
font-size: 1.5rem;
}
/* STRONA MOBILNA - QUESTIONS */
@media (max-width:1362px) {
.summary {
width: 90vw;
height: 160vh;
margin: 30px auto;
}
button.result {
right: 150px;
top: 400px;
font-size: 3.5rem;
position: fixed;
}
button.reset {
position: fixed;
right: 150px;
top: 500px;
font-size: 2rem;
}
button.answer {
text-align: center;
font-size: 2rem;
margin-left: 15px;
width: 200px;
padding: 2px 2px;
box-shadow: 0 0 3px 3px black;
cursor: pointer;
}
p.question {
font-size: 2rem;
text-align: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
text-transform: uppercase;
}
span.questions {
left: 25%;
top: 20px;
font-size: 4rem;
}
span.questions2 {
left: 25%;
top: 20px;
font-size: 4rem;
}
}
@media (orientation: landscape) and (max-width:1080px) {
button.answer {
text-align: center;
font-size: 1.2rem;
margin-left: 15px;
width: 150px;
padding: 2px 2px;
}
button.result {
position: absolute;
left: 0;
top: 148vh;
font-size: 1.5rem;
width: 150px;
}
button.reset {
position: absolute;
left: 200px;
top: 148vh;
font-size: 1.5rem;
width: 150px;
}
p.question {
font-size: 1.8rem;
text-align: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
text-transform: uppercase;
}
.summary {
position: relative;
width: 90vw;
height: 180vh;
border-radius: 10%;
background-color: rgba(255, 255, 255, 0.5);
margin: 30px auto;
}
span.questions {
left: 25%;
top: 20px;
font-size: 2.5rem;
}
span.questions2 {
left: 25%;
top: 20px;
font-size: 2.5rem;
}
}
@media (max-width:400px) {
/* STRONA MOBILNA - backup_test.php */
/* STRONA MOBILNA - virtual_test.php */
span.questions {
position: absolute;
left: 35%;
top: 30px;
font-size: 3rem;
}
span.questions2 {
position: absolute;
left: 20%;
top: 30px;
font-size: 3rem;
}
.summary {
width: 100%;
height: 200vh;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
/* margin: 65px auto; */
}
button.result {
position: absolute;
left: 0;
top: -200px;
font-size: 1.5rem;
width: 45%;
height: 60px;
background-color: black;
color: white;
border: 2px solid blue;
padding: 15px 15px 15px 15px;
box-shadow: 0 0 3px 3px white;
text-transform: uppercase;
text-align: center;
margin-left: 0;
margin-right: 60px;
}
button.failures {
position: absolute;
right: 0;
top: -200px;
font-size: 1.5rem;
width: 45%;
height: 60px;
background-color: black;
color: white;
border: 2px solid blue;
padding: 15px 15px 15px 15px;
box-shadow: 0 0 3px 3px white;
text-transform: uppercase;
text-align: center;
margin-left: 60px;
margin-right: 0;
}
button.reset {
position: absolute;
right: 10%;
top: -5%;
font-size: 1.2rem;
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 50%;
box-shadow: 0 0 3px 3px white;
cursor: pointer;
width: 70px;
height: 70px;
}
.next {
position: absolute;
left: 10%;
top: -5%;
width: 70px;
height: 70px;
border-radius: 50%;
font-size: 1.2rem;
transition: .5s;
cursor: pointer;
}
.prev {
position: absolute;
left: 40%;
top: -5%;
width: 70px;
height: 70px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
}
button.percentage {
display: none;
}
.summaryTwo {
position: absolute;
top: 20%;
width: 90vw;
height: 180vh;
z-index: 1;
}
button.answer {
text-align: center;
font-size: 1.3rem;
margin-left: 15px;
width: 300px;
padding: 2px 2px;
margin-top: 10px;
margin-right: 50px;
}
.question-item {
width: 200px;
margin-top: 40px;
margin-top: 40px;
}
p.question {
position: relative;
left: -20px;
font-size: 1.3rem;
text-align: center;
/* text-transform: uppercase; */
width: 95vw;
box-shadow: 0 0 3px 3px black;
font-weight: bolder;
background-color: #616161;
color: white;
margin-bottom: 45px;
margin-top: 45px;
}
}
}
/*Tenses */
section.generalPastTense {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 125vh;
justify-content: center;
/* background-color: #A8A8A8; */
flex-wrap: nowrap;
justify-content: space-between;
}
div.TenseReference {
width: 20%;
background-color: white;
color: black;
text-transform: uppercase;
text-align: center;
padding-top: 15px;
font-size: 1.5rem;
border: 2px solid black;
}
div.generalPastInfo {
width: 60%;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
padding: 15px;
}
.pastSimpleInfo {
color: white;
font-size: 2.5rem;
padding-bottom: 20px;
padding-left: 15px;
padding-top: 20px;
text-shadow: 1px 0 1px black;
cursor: pointer;
}
.pastSimpleInfo2 {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
text-shadow: 1px 0 1px black;
cursor: pointer;
}
.exampleFirst {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSecond {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleThird {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleFourth {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleFifth {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSixth {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSeven {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleEight {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleNine {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleTen {
color: white;
font-size: 2.5rem;
padding-left: 15px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.pastSimpleInfo3 {
color: white;
font-size: 2rem;
padding-left: 15px;
padding-top: 20px;
text-shadow: 1px 0 1px black;
}
.generalWhite {
color: white;
font-size: 2.5rem;
padding-bottom: 30px;
padding-left: 15px;
padding-top: 30px;
text-align: justify;
text-shadow: 1px 0 1px black;
cursor: pointer;
}
div.exercisePast {
width: 25%;
background-color: black;
color: white;
}
.invisibleMenu {
display: none;
}
.invisibleMenu2 {
display: none !important;
}
/*usunieto !important*/
.toBe {
color: white;
}
/* odmiana to be przez osoby */
.toBeVariation2 {
width: 800px;
height: 400px;
border: 2px solid white;
background-color: #996666;
position: absolute;
top: 15%;
left: 27%;
}
.toBeVariation3 {
width: 800px;
height: 400px;
border: 2px solid white;
background-color: #996666;
position: absolute;
top: 15%;
left: 27%;
}
.number1 {
position: absolute;
top: 25px;
left: 150px;
}
.number2 {
position: absolute;
top: 25px;
left: 500px;
}
.person1 {
position: absolute;
top: 80px;
left: 7px;
}
.person2 {
position: absolute;
top: 130px;
left: 7px;
}
.person3 {
position: absolute;
top: 180px;
left: 7px;
}
.variation1 {
position: absolute;
top: 80px;
left: 200px;
color: white;
}
.variation2 {
position: absolute;
top: 130px;
left: 200px;
color: white;
}
.variation3 {
position: absolute;
top: 180px;
left: 200px;
color: white;
}
.variation4 {
position: absolute;
top: 80px;
left: 520px;
color: white;
}
.variation5 {
position: absolute;
top: 130px;
left: 520px;
color: white;
}
.variation6 {
position: absolute;
top: 180px;
left: 520px;
color: white;
}
.pastSimple {
padding-top: 15px;
padding-bottom: 15px;
}
.pastContinuous {
padding-top: 15px;
padding-bottom: 15px;
}
.presentSimple {
padding-top: 15px;
padding-bottom: 15px;
}
.presentContinuous {
padding-top: 15px;
padding-bottom: 15px;
}
.presentPerfect {
padding-top: 15px;
padding-bottom: 15px;
}
.pastPerfect {
padding-top: 15px;
padding-bottom: 15px;
}
.futureSimple {
padding-top: 15px;
padding-bottom: 15px;
}
.futureContinuous {
padding-top: 15px;
padding-bottom: 15px;
}
.futurePerfect {
padding-top: 15px;
padding-bottom: 15px;
}
.pastSimple:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.pastContinuous:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.pastPerfect:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.presentSimple:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.presentContinuous:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.presentPerfect:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.futureSimple:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.futureContinuous:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.futurePerfect:hover {
cursor: pointer;
color: black;
text-decoration: dotted;
/* background-color: #9966FF; */
}
.timeClock {
background-image: url(../img/time.jpg);
background-size: cover;
width: 100%;
height: 50%;
}
.futurePicture {
background-image: url(../img/future.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 100px;
}
.futurePicture2 {
background-image: url(../img/future2.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 80px;
}
.futurePicture3 {
background-image: url(../img/plane.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 80px;
}
.contPicture {
background-image: url(../img/train.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 80px;
}
.contPicture2 {
background-image: url(../img/run.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 40px;
}
.pastPicture {
background-image: url(../img/past.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 40px;
}
.simplePicture {
background-image: url(../img/simple.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 40px;
}
.perfectPicture {
background-image: url(../img/perfecto.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 20px;
}
.perfectPicture2 {
background-image: url(../img/ideal.jpg);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 50%;
margin-top: 80px;
}
.exercisePast ul li {
font-size: 1.8rem;
text-align: center;
padding: 20px;
text-transform: uppercase;
list-style: none;
}
.exercisePast ul li:hover {
cursor: pointer;
color: white;
font-weight: 900;
transition: .5s;
}
.exercisePast2 {
display: block;
transform: translateY(150%);
color: black;
transition: 2s;
}
.exercisePast2Visible {
display: block;
transform: translateX(0);
color: white;
}
.blue {
color: #0033CC;
}
.activeTense {
background-color: #009999;
color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
transition: 1s;
letter-spacing: 2px;
}
.activeSideMenu {
color: white;
font-weight: 900;
background-color: #339966;
border-left: 1px solid black;
letter-spacing: 2px;
}
.translation {
color: #666600;
}
.testTenses {
width: 150px;
height: 150px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
right: 8%;
bottom: -6%;
cursor: pointer;
transition: .5s;
}
.testTenses:hover {
background-color: #CC9933;
color: white;
}
.testFirst {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testSecond {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testThird {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testFourth {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testFifth {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testSixth {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testSeventh {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testEighth {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
.testNinth {
/* width: 55%;
border-radius: 10%; */
background-color: rgba(255, 255, 255, 0.5);
width: 60%;
position: relative;
left: 0;
/* margin: 30px auto; */
}
/* Pierwszy input */
.pass {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass12 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass22 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass32 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass42 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass52 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass62 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass72 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
.pass82 {
width: 190px;
height: 45px;
position: absolute;
top: 7%;
left: 73%;
}
/* Drugi input */
.pass3 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass13 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass23 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass33 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass43 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass53 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass63 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass73 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
.pass83 {
width: 190px;
height: 45px;
position: absolute;
top: 12%;
left: 73%;
}
/* Trzeci input */
.pass4 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass14 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass24 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass34 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass44 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass54 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass64 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass74 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
.pass84 {
width: 190px;
height: 45px;
position: absolute;
top: 17%;
left: 73%;
}
/* Czwarty input */
.pass5 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass15 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass25 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass35 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass45 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass55 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass65 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass75 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
.pass85 {
width: 190px;
height: 45px;
position: absolute;
top: 22%;
left: 73%;
}
/* Piąty input */
.pass6 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass16 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass26 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass36 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass46 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass56 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass66 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass76 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
.pass86 {
width: 190px;
height: 45px;
position: absolute;
top: 27%;
left: 73%;
}
/* Szósty input */
.pass7 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass17 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass27 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass37 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass47 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass57 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass67 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass77 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
.pass87 {
width: 190px;
height: 45px;
position: absolute;
top: 32%;
left: 73%;
}
/* Siódmy input */
.pass8 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass18 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass28 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass38 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass48 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass58 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass68 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass78 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
.pass88 {
width: 190px;
height: 45px;
position: absolute;
top: 37%;
left: 73%;
}
/* Ósmy input */
.pass9 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass19 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass29 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass39 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass49 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass59 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass69 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass79 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
.pass89 {
width: 190px;
height: 45px;
position: absolute;
top: 42%;
left: 73%;
}
/* Dziewiąty input */
.pass10 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass20 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass30 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass40 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass50 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass60 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass70 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass80 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
.pass90 {
width: 190px;
height: 45px;
position: absolute;
top: 47%;
left: 73%;
}
/* Dziesiąty input */
.pass11 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass21 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass31 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass41 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass51 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass61 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass71 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass81 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.pass91 {
width: 190px;
height: 45px;
position: absolute;
top: 52%;
left: 73%;
}
.testInfo {
position: absolute;
left: 2%;
padding: 5px;
width: 90%;
color: white;
font-size: 25px;
text-shadow: 2px 0 2px black;
}
.sentence1 {
position: absolute;
top: 7%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%;
}
.sentence2 {
position: absolute;
top: 12%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence3 {
position: absolute;
top: 17%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence4 {
position: absolute;
top: 22%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence5 {
position: absolute;
top: 27%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence6 {
position: absolute;
top: 32%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence7 {
position: absolute;
top: 37%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence8 {
position: absolute;
top: 42%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence9 {
position: absolute;
top: 47%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.sentence10 {
position: absolute;
top: 52%;
left: 2%;
font-size: 2.2rem;
border: 1px solid black;
padding: 5px;
width: 70%
}
.blackboard {
background-color: black;
color: white;
font-size: 2rem;
}
.check {
width: 180px;
height: 180px;
background-color: white;
color: black;
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 25%;
top: 88%;
cursor: pointer;
transition: .5s;
}
.check:hover {
background-color: #CC9933;
color: white;
}
.points {
width: 180px;
height: 180px;
background-color: white;
color: black;
font-size: 25px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 40%;
top: 88%;
}
.resetButton {
width: 180px;
height: 180px;
background-color: white;
color: black;
font-size: 25px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
cursor: pointer;
position: absolute;
left: 55%;
top: 88%;
transition: .5s;
}
.resetButton:hover {
background-color: #CC9933;
color: white;
}
.blocker {
display: block;
}
.green {
color: white;
font-size: 30px;
font-weight: bold;
}
.green1 {
color: #238E23;
font-size: 30px;
font-weight: bold;
}
.green2 {
color: #238E23;
font-size: 60px;
font-weight: bold;
}
.red1 {
color: #FF0000;
font-size: 30px;
font-weight: bold;
}
.correctInput {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 109%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.correctInput2 {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 114%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.failedInput {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 119%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
/* PODSTRONA CZĘŚCI MOWY */
.speechMenu {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 160vh;
background-color: white;
flex-wrap: nowrap;
justify-content: space-between;
border: 2px solid black;
}
.speechMenuVariant {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 350vh;
background-color: white;
flex-wrap: nowrap;
justify-content: space-between;
border: 2px solid black;
}
.speechList {
color: black;
text-transform: uppercase;
justify-content: center;
padding-top: 20px;
text-align: center;
width: 20vw;
height: 100vh;
}
.speechList li {
padding-top: 20px;
padding-bottom: 20px;
font-size: 22.5px;
list-style: none;
font-weight: bold;
}
.speechList li:hover {
cursor: pointer;
}
.nounDetails {
display: flex;
justify-content: space-evenly;
width: 80vw;
height: 160vh;
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
.nounDetailsAttribute {
height: 350vh;
display: flex;
justify-content: space-evenly;
width: 80vw;
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
/* PODSTRONA ANGIELSKI W BIZNESIE */
.summaryBusiness {
display: flex;
justify-content: space-evenly;
width: 100vw;
height: 160vh;
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
.InformationTechnology {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/informationTechnology.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.InformationTechnology h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.InformationTechnology:hover {
background-size: 120%;
cursor: pointer;
}
.InformationTechnology h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.HumanResources {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/humanResources.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.HumanResources h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.HumanResources:hover {
background-size: 120%;
cursor: pointer;
}
.HumanResources h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.Finances {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/finances.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.Finances h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Finances:hover {
background-size: 120%;
cursor: pointer;
}
.Finances h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.SocialMedia {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/socialMedia.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.SocialMedia h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.SocialMedia:hover {
background-size: 120%;
cursor: pointer;
}
.SocialMedia h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.LawAdmin {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/lawAdmin.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.LawAdmin h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.LawAdmin:hover {
background-size: 120%;
cursor: pointer;
}
.LawAdmin h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.Career {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/career.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.Career h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Career:hover {
background-size: 120%;
cursor: pointer;
}
.Career h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.Writing {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/writing.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.Writing h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Writing:hover {
background-size: 120%;
cursor: pointer;
}
.Writing h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.Listening {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/listening2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
text-decoration: none;
}
.Listening h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
@media (max-width:400px) {
.InformationTechnology {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 100px;
background-image: url(../img/informationTechnology.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.InformationTechnology h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.HumanResources {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/humanResources.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.HumanResources h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Finances {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/finances.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.Finances h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.SocialMedia {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/socialMedia.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.SocialMedia h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.LawAdmin {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/lawAdmin.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.LawAdmin h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Career {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/career.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.Career h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.Writing {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/writing.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.Writing h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.summaryBusiness {
display: flex;
justify-content: space-evenly;
width: 100vw;
/*height: 230vh;*/
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
.Listening {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/listening2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
text-decoration: none;
}
.Listening h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
}
/* Podstrona - Listening */
.internet {
position: absolute;
left: 50%;
bottom: -7%;
width: 35%;
height: 35%;
border-radius: 5%;
border: 2px;
}
button.answer1 {
text-align: center;
font-size: 1.5rem;
margin-left: 50px;
margin-top: 20px;
width: 400px;
height: 60px;
padding: 5px 5px;
box-shadow: 0 0 3px 3px black;
cursor: pointer;
}
.questionSocial {
font-size: 2rem;
text-align: center;
margin-bottom: 10px;
margin-top: 20px;
margin-left: 150px;
/* text-transform: uppercase; */
width: 1100px;
box-shadow: 0 0 3px 3px black;
font-weight: bolder;
background-color: #616161;
padding: 2px;
color: white;
}
.SocialMediaC1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/socialMedia.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
text-decoration: none;
}
.SocialMediaC1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
@media (max-width:400px) {
.SocialMediaC1 {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 100px;
background-image: url(../img/socialMedia.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
text-decoration: none;
}
.SocialMediaC1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 100vw;
height: 20vh;
line-height: 20vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.questionSocial {
font-size: 1.6rem;
text-align: center;
margin-bottom: 10px;
margin-top: 20px;
margin-left: 0;
/* text-transform: uppercase; */
width: 100vw;
box-shadow: 0 0 3px 3px black;
font-weight: bolder;
background-color: #616161;
padding: 2px;
color: white;
}
button.answer1 {
text-align: center;
font-size: 1.3rem;
margin-left: 40px;
margin-right: 20px;
margin-top: 20px;
width: 80vw;
height: 60px;
padding: 5px 5px;
box-shadow: 0 0 3px 3px black;
}
}
a {
text-decoration: none;
}
a:focus,
a:active {
outline: none;
}
.Listening:hover {
background-size: 120%;
cursor: pointer;
}
.SocialMediaC1:hover {
background-size: 120%;
cursor: pointer;
transition: 1s;
}
.SocialMediaC1 h2:hover {
color: #33ff99;
}
.Listening h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
/*Podstrona Listen1.php*/
.socialContainer {
display: flex;
justify-content: space-between;
/* lub flex-start / center */
align-items: flex-start;
/* lub center */
gap: 20px;
/* odstęp między divami */
}
.text {
width: 58vw;
height: 100vh;
border-radius: 5%;
background-color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
letter-spacing: 1.3px;
margin-top: 40px;
margin-left: 5px;
}
.text2ad {
width: 58vw;
height: 100vh;
border-radius: 5%;
background-color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
letter-spacing: 1.3px;
margin-top: 40px;
margin-left: 5px;
}
.voc1 {
width: 38vw;
min-height: 100vh;
border-radius: 5%;
background-color: #9999ff;
display: flex;
flex-direction: column;
gap: 2px;
padding: 15px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
margin-right: 5px;
}
.imageFB {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/fbLarge.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
@media (max-width:400px) {
.socialContainer {
display: block;
/*justify-content: space-between;*/
/* lub flex-start / center */
align-items: flex-start;
/* lub center */
gap: 10px;
height: 100vh;
width: 100vw;
/* odstęp między divami */
}
.text {
width: 98vw;
height: 250vh;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.5rem;
letter-spacing: 1.1px;
margin-top: 75px;
margin-left: 5px;
z-index: 1;
}
.text2ad {
width: 98vw;
height: 250vh;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.5rem;
letter-spacing: 1.1px;
margin-top: 75px;
margin-left: 5px;
z-index: 1;
}
.voc1 {
position: absolute;
top: 29%;
width: 100vw;
height: 230vh;
z-index: 2;
font-size: 1.2rem;
padding: 5px;
border-radius: 0;
margin-right: 2px;
gap: 5px;
}
.imageFB {
display: none;
}
}
.finances2 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/finances2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.career2 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/careerimg.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.hr2 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/hr.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.hr3 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/it.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.hr4 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/travel.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.administration2 {
width: 40vw;
min-height: 100vh;
border-radius: 5%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 2rem;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(../img/platz.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-right: 5px;
}
.word-pair {
background-color: #ffffff;
border-radius: 10px;
padding: 10px 15px;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
font-size: 2rem;
word-break: break-word;
text-align: center;
gap: 20px;
}
@media(max-width:400px) {
.word-pair {
background-color: #ffffff;
border-radius: 10px;
padding: 10px 10px;
width: 100%;
height: 4%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
font-size: 1.4rem;
word-break: break-word;
text-align: left;
gap: 10px;
}
}
.polishS {
font-weight: italic;
color: black;
margin-left: 10px;
}
.englishS {
font-weight: bold;
color: #0000cc;
}
.Listening_social {
width: 80vw;
height: 100vh;
border-radius: 5%;
background-color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
letter-spacing: 1.5px;
margin-left: 100px;
margin-right: 100px;
margin-top: 50px;
}
.text p {
padding: 25px 50px 25px;
text-align: justify;
}
.text2ad p {
padding: 25px 50px 25px;
text-align: justify;
}
.text h2 {
font-size: 3.5rem;
text-decoration: solid;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
}
.text2ad h2 {
font-size: 3.5rem;
text-decoration: solid;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
}
button.text2 {
position: absolute;
left: 8%;
bottom: -1%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2a {
position: absolute;
left: 8%;
bottom: -10%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2b {
position: absolute;
left: 8%;
bottom: -17%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text3 {
position: absolute;
left: 25%;
bottom: -1%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text3a {
position: absolute;
left: 25%;
bottom: -10%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text3b {
position: absolute;
left: 25%;
bottom: -17%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4a {
position: absolute;
left: 45%;
bottom: -10%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4b {
position: absolute;
left: 45%;
bottom: -17%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6a {
position: absolute;
left: 42%;
bottom: -10%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6b {
position: absolute;
left: 42%;
bottom: -17%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4 {
position: absolute;
left: 45%;
bottom: -1%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text5 {
position: absolute;
left: 65%;
bottom: -1%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text5a {
position: absolute;
left: 65%;
bottom: -10%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text5b {
position: absolute;
left: 65%;
bottom: -17%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6 {
position: absolute;
left: 42%;
bottom: -1%;
width: 180px;
height: 100px;
background-color: black;
color: white;
font-size: 2rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text2a:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text2b:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text3a:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text3b:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text4a:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text4b:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text5a:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text5b:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text6a:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text6b:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text3:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text4:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text5:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
button.text6:hover {
cursor: pointer;
font-size: 2rem;
font-weight: bold;
}
@media (max-width:400px) {
button.text2 {
position: absolute;
left: 5%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text2b {
position: absolute;
left: 5%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2b:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text2a {
position: absolute;
left: 5%;
top: 21%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text2a:hover {
font-size: 1.5rem;
font-weight: bold;
}
.text h2 {
font-size: 2rem;
text-decoration: solid;
text-align: center;
padding-top: 20px;
padding-bottom: 60px;
text-transform: uppercase;
}
.text2ad h2 {
font-size: 2rem;
text-decoration: solid;
text-align: center;
padding-top: 20px;
padding-bottom: 60px;
text-transform: uppercase;
}
.text p {
padding: 25px 25px 25px;
text-align: justify;
margin-top: 20px;
}
.text2ad p {
padding: 25px 25px 25px;
text-align: justify;
margin-top: 90px;
}
button.text3 {
position: absolute;
left: 37%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
padding-left: 2px;
padding-right: 2px;
}
button.text3:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text3b {
position: absolute;
left: 37%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
padding-left: 2px;
padding-right: 2px;
}
button.text3b:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text3a {
position: absolute;
left: 37%;
top: 21%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
padding-left: 2px;
padding-right: 2px;
}
button.text3a:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text4 {
position: absolute;
left: 70%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text4b {
position: absolute;
left: 70%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4b:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text4a {
position: absolute;
left: 70%;
top: 21%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text4a:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text5 {
position: absolute;
left: 37%;
top: 5%;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
}
button.text5b {
position: absolute;
left: 37%;
top: 5%;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
}
button.text5a {
position: absolute;
left: 37%;
top: 4%;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
}
button.text6 {
position: absolute;
left: 70%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text6b {
position: absolute;
left: 70%;
top: 23%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6b:hover {
font-size: 1.5rem;
font-weight: bold;
}
button.text6a {
position: absolute;
left: 70%;
top: 21%;
width: 110px;
height: 70px;
background-color: black;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 5%;
}
button.text6a:hover {
font-size: 1.5rem;
font-weight: bold;
}
.Listening_social {
position: absolute;
top: 29%;
width: 100vw;
height: 230vh;
z-index: 2;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.5rem;
letter-spacing: 1.2px;
margin-left: 0;
margin-right: 100px;
margin-top: 50px;
}
}
.nounDetail1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/nounDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.nounDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 2.9rem;
letter-spacing: 1.5px;
}
.nounDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.nounDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.nounDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.nounDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail2 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/nounDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.nounDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail3 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail4 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.nounDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.2);
transition: 1s;
}
.nounDetail5 {
width: 50vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.nounDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
transition: 1s;
}
/* PRZYMIOTNIKI */
.adjDetail1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/adjDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.adjDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.adjDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 2.9rem;
letter-spacing: 1.5px;
}
.adjDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.adjDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.adjDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.adjDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail2 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/adjDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.adjDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail3 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/adjDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.adjDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail4 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/adjDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.adjDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.2);
transition: 1s;
}
.adjDetail5 {
width: 50vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.adjDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
transition: 1s;
}
.newPosition {
animation: nounAnimation 3s linear both;
animation-delay: 0.5s;
}
.newPositionDelay {
animation: nounAnimation 3s linear both;
animation-delay: 2s;
}
@keyframes nounAnimation {
0% {
transform: translateX(-290%);
}
100% {
transform: translateX(0);
}
}
.newPosition1 {
animation: adjAnimation 5s linear both;
animation-delay: 2s;
}
@keyframes adjAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.newPosition2 {
animation: nounAnimation2 3s linear both;
animation-delay: 1s;
}
@keyframes nounAnimation2 {
0% {
transform: translateX(-170%);
}
100% {
transform: translateX(0);
}
}
.newPosition3 {
animation: nounAnimation3 5s linear both;
animation-delay: 0.5s;
}
.newPosition4 {
animation: nounAnimation3 5s linear both;
animation-delay: 1s;
}
.newPosition5 {
animation: nounAnimation3 5s linear both;
animation-delay: 1.5s;
}
.newPosition6 {
animation: nounAnimation3 5s linear both;
animation-delay: 2s;
}
.newPosition7 {
animation: nounAnimation3 5s linear both;
animation-delay: 2.5s;
}
.newPosition8 {
animation: nounAnimation3 5s linear both;
animation-delay: 3s;
}
.newPosition9 {
animation: nounAnimation3 5s linear both;
animation-delay: 3.5s;
}
.newPosition10 {
animation: nounAnimation3 5s linear both;
animation-delay: 4s;
}
@keyframes nounAnimation3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* PRZYSŁÓWKI */
.advDetail1 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/advDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 2.9rem;
letter-spacing: 1.5px;
}
.advDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.advDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail2 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/advDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail3 {
width: 30vw;
height: 25vh;
border: 2px solid white;
background-image: url(../img/advDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail4 {
width: 30vw;
height: 25vh;
border: 2px solid white;
background-image: url(../img/advDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.2);
transition: 1s;
}
.advDetail5 {
width: 30vw;
height: 25vh;
border: 2px solid white;
background-image: url(../img/advDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 25vh;
transition: 1s;
}
.advDetail6 {
width: 30vw;
height: 25vh;
border: 2px solid white;
background-image: url(../img/advDetail6.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail6 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 25vh;
transition: 1s;
}
.advDetail7 {
width: 40vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.advDetail7 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
transition: 1s;
}
/* PRZEDIMKI */
.artDetail1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/artDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.artDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.artDetail2 {
width: 35vw;
height: 30vh;
margin-top: 60px;
border: 2px solid white;
background-image: url(../img/artDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.artDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.artDetail3 {
width: 35vw;
height: 30vh;
margin-top: -200px;
border: 2px solid white;
background-image: url(../img/artDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.artDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.artDetail4 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin-top: -200px;
transition: .5s;
/* transform: translateX(-170%); */
}
.artDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.artDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* LICZEBNIKI */
.numDetail1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/numDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.numDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.numDetail2 {
width: 35vw;
height: 30vh;
margin-top: 60px;
border: 2px solid white;
background-image: url(../img/numDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.numDetail3 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 0px;
background-image: url(../img/numDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.numDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.numDetail4 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 0px;
background-image: url(../img/numDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.numDetail5 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.numDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.numDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* CZASOWNIKI */
.verbDetail1 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/adjDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail2 {
width: 35vw;
height: 30vh;
margin-top: 60px;
border: 2px solid white;
background-image: url(../img/verbDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail3 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 0px;
background-image: url(../img/verbDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail4 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 0px;
background-image: url(../img/verbDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail5 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/verbDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail6 {
width: 35vw;
height: 30vh;
border: 2px solid white;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.verbDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.verbDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail6 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* ZAIMKI */
.pronDetail1 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/pronDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail2 {
width: 30vw;
height: 25vh;
margin-top: 60px;
border: 2px solid white;
background-image: url(../img/pronDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail3 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/pronDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
display: none;
}
.pronDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail4 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/pronDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail5 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/pronDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail6 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/pronDetail6.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail7 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/pronDetail7.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail8 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.pronDetail8:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail8 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.pronDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail6 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail7 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail8 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* SPÓJNIK */
.conDetail1 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 60px;
background-image: url(../img/advDetail1.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail2 {
width: 30vw;
height: 25vh;
margin-top: 60px;
border: 2px solid white;
background-image: url(../img/conDetail2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail3 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/conDetail3.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail4 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/conDetail4.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail5 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/conDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail6 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/conDetail6.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail7 {
width: 30vw;
height: 25vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/conDetail7.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
display: none;
}
.conDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail8 {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/nounDetail5.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
}
.conDetail8:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail8 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.conDetail1 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail2 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail3 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail4 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail6 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail7 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 30vw;
height: 25vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail8 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* CZASOWNIKI - WIADOMOSCI OGÓLNE */
.verbGeneral {
width: 100%;
/* height: 100vh; */
display: block;
}
.verbDescription,
.verbDescription2,
.genitiveInfo,
.countable,
.NounPlural,
.compound,
.adjective1,
.adjectiveFull,
.adjectiveExclusions,
.adverbsGeneral,
.adverbsFrequency,
.adverbsTime,
.adverbsPlace,
.adverbsManner,
.adverbsDegree,
.indefiniteArticles,
.definiteArticles,
.zeroArticle,
.cardinalNumbers,
.ordinalNumbers,
.dates,
.fraction,
.pronounsPersonal,
.possessivePronouns,
.reflexivePronouns,
.Reciprocal,
.indefinite,
.prepositionGen,
.adjectiveInformation,
.PronounsComplement,
.conjunctionResult,
.conjunctionReason,
.conjunctionTime,
.conjunctionPurpose,
.conjunctionConcession,
.conjunctionGeneral {
color: white;
width: 90%;
padding-bottom: 30px;
padding-left: 25px;
padding-top: 30px;
padding-right: 25px;
text-align: justify;
text-shadow: 1px 0 1px black;
font-size: 2.5rem;
cursor: pointer;
}
.modalExamples {
color: #006666;
padding-left: 40px;
padding-top: 0;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 2.2rem;
}
.genitiveSingular,
.genitivePlural,
.countExamples,
.uncountExamples {
color: #006666;
padding-left: 40px;
padding-top: 20px;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 2.2rem;
}
.modalExamples2,
.AuxExample {
color: white;
padding-left: 40px;
padding-top: 0;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 2.5rem;
}
.modal1,
.modal2,
.modal3 {
width: 40%;
}
.modal1,
.modal2,
.modal3,
.modal4,
.modal5,
.modal6,
.AuxMain1,
.AuxHelp1,
.AuxFunction1,
.singular,
.plural,
.count,
.uncount,
.NounPlural1,
.NounPlural2,
.NounPlural3,
.NounPlural4,
.NounPlural5,
.NounPlural6,
.NounPlural7,
.NounPlural8,
.compoundEx1,
.compoundEx2,
.compoundEx3,
.compoundEx4,
.compoundEx5,
.compoundEx6,
.compoundEx7,
.compoundEx8,
.compoundEx9,
.compoundEx10,
.adjectiveDescribe1,
.adjectiveDescribe2,
.adjectiveDescribe3,
.adjectiveDescribe4,
.adjectiveFull1,
.adjectiveFull2,
.adjectiveFull3,
.ExclusionsIrregularAd,
.ExclusionsOneAd,
.ExclusionsCompoundAd,
.adverbsGroup1t,
.adverbsGroup2t,
.adverbsGroup3t,
.adverbsGroup4t,
.MostPopularAdverbsFrequency,
.AdverbsComplex,
.AdverbsFrequencySentences,
.AdverbsTimeSingle,
.AdverbsTimeExpression,
.adverbsPlaceList,
.adverbsPlaceSentences,
.adverbsMannerList,
.adverbsDegreeList,
.adverbsDegreeExclusions,
.indefiniteArticlesDescribe,
.definiteArticlesDescribe,
.zeroArticleDescribe,
.cardinalNumbersList1,
.cardinalNumbersList2,
.cardinalNumbersList3,
.cardinalNumbersList4,
.cardinalNumbersList5,
.ordinalNumbersList1,
.ordinalNumbersList2,
.ordinalNumbersList3,
.ordinalNumbersList4,
.year,
.date,
.fractionVulgar,
.fractionDecimal,
.pronounsDenominator,
.pronounsViewfinder,
.possessivePronounsSingular,
.possessivePronounsPlural,
.reflexiveSingular,
.reflexivePlural,
.ReciprocalEach,
.ReciprocalOne,
.indefiniteNegations,
.indefiniteQuestions,
.indefiniteAffirmative,
.prepositionON,
.prepositionAT,
.prepositionIN,
.prepositionBY,
.PronounsComplementInfo,
.PronounsComplementList,
.conjunctionResultInfo,
.conjunctionReasonInfo,
.conjunctionTimeInfo,
.conjunctionPurposeInfo,
.conjunctionConcessionInfo {
cursor: pointer;
font-weight: 900;
}
.AuxHelp1:hover,
.AuxMain1:hover,
.AuxFunction1:hover,
.modal1:hover,
.modal2:hover,
.modal3:hover,
.modal4:hover,
.modal5:hover,
.modal6:hover,
.compoundEx1:hover,
.compoundEx2:hover,
.compoundEx3:hover,
.compoundEx4:hover,
.compoundEx5:hover,
.compoundEx6:hover,
.compoundEx7:hover,
.compoundEx8:hover,
.compoundEx9:hover,
.compoundEx10:hover,
.adjectiveDescribe1:hover,
.adjectiveDescribe2:hover,
.adjectiveDescribe3:hover,
.adjectiveDescribe4:hover,
.adjectiveFull1:hover,
.adjectiveFull2:hover,
.adjectiveFull3:hover,
.ExclusionsIrregularAd:hover,
.ExclusionsOneAd:hover,
.ExclusionsCompoundAd:hover,
.adverbsGroup1t:hover,
.adverbsGroup2t:hover,
.adverbsGroup3t:hover,
.adverbsGroup4t:hover,
.MostPopularAdverbsFrequency:hover,
.AdverbsComplex:hover,
.AdverbsFrequencySentences:hover,
.AdverbsTimeSingle:hover,
.AdverbsTimeExpression:hover,
.adverbsPlaceList:hover,
.adverbsPlaceSentences:hover,
.adverbsMannerList:hover,
.adverbsDegreeList:hover,
.adverbsDegreeExclusions:hover,
.indefiniteArticlesDescribe:hover,
.definiteArticlesDescribe:hover,
.zeroArticleDescribe:hover,
.cardinalNumbersList1:hover,
.cardinalNumbersList2:hover,
.cardinalNumbersList3:hover,
.cardinalNumbersList4:hover,
.cardinalNumbersList5:hover,
.ordinalNumbersList1:hover,
.ordinalNumbersList2:hover,
.ordinalNumbersList3:hover,
.ordinalNumbersList4:hover,
.year:hover,
.date:hover,
.fractionDecimal:hover,
.fractionVulgar:hover,
.pronounsDenominator:hover,
.pronounsViewfinder:hover,
.possessivePronounsSingular:hover,
.possessivePronounsPlural:hover,
.reflexiveSingular:hover,
.reflexivePlural:hover,
.ReciprocalEach:hover,
.ReciprocalOne:hover,
.indefiniteNegations:hover,
.indefiniteQuestions:hover,
.indefiniteAffirmative:hover,
.prepositionAT:hover,
.prepositionON:hover,
.prepositionIN:hover,
.prepositionBY:hover,
.PronounsComplementInfo:hover,
.PronounsComplementList:hover,
.conjunctionResultInfo:hover,
.conjunctionReasonInfo:hover,
.conjunctionTimeInfo:hover,
.conjunctionPurposeInfo:hover,
.conjunctionConcessionInfo:hover {
text-decoration: #339999 underline;
text-decoration-style: solid;
}
.NounPlural1,
.NounPlural2,
.NounPlural3,
.NounPlural4,
.NounPlural5,
.NounPlural6,
.NounPlural7,
.NounPlural8,
.AuxMain1,
.AuxHelp1,
.AuxFunction1,
.compoundEx1,
.compoundEx2,
.compoundEx3,
.compoundEx4,
.compoundEx5,
.compoundEx6,
.compoundEx7,
.compoundEx8,
.compoundEx9,
.compoundEx10,
.adjectiveFull1,
.adjectiveFull2,
.adjectiveFull3,
.ExclusionsIrregularAd,
.ExclusionsOneAd,
.ExclusionsCompoundAd,
.adverbsGroup1t,
.adverbsGroup2t,
.adverbsGroup3t,
.adverbsGroup4t,
.MostPopularAdverbsFrequency,
.AdverbsComplex,
.AdverbsFrequencySentences,
.AdverbsTimeSingle,
.AdverbsTimeExpression,
.adverbsPlaceList,
.adverbsPlaceSentences,
.adverbsMannerList,
.adverbsDegreeList,
.adverbsDegreeExclusions,
.adverbsDegreeExclusionsExamples,
.indefiniteArticlesDescribe,
.definiteArticlesDescribe,
.zeroArticleDescribe,
.cardinalNumbersList1,
.ordinalNumbersList1,
.year,
.date,
.fractionVulgar,
.pronounsDenominator,
.possessivePronounsSingular,
.reflexiveSingular,
.ReciprocalEach,
.ReciprocalOne,
.indefiniteNegations,
.indefiniteQuestions,
.indefiniteAffirmative,
.prepositionON,
.prepositionAT,
.prepositionIN,
.prepositionBY,
.PronounsComplementInfo,
.PronounsComplementList,
.conjunctionResultInfo,
.conjunctionReasonInf,
.conjunctionTimeInfo,
.conjunctionPurposeInfo,
.conjunctionConcessionInfo {
padding-top: 10px;
margin-left: 0;
}
.NounPlural8D,
.NounPlural7D,
.NounPlural6D,
.NounPlural5D,
.NounPlural4D,
.NounPlural3D,
.NounPlural2D,
.NounPlural1D,
.AuxMain2,
.AuxHelp2,
.AuxFunction2,
.modal1Example,
.modal3Example,
.modal5Example,
.modal7Example,
.modal9Example,
.modal11Example,
.countInfo,
.uncountInfo,
.adjD1,
.adjD2,
.adjD3,
.adjD4,
.adverbsGroup1d,
.adverbsGroup2d,
.adverbsGroup3d,
.adverbsGroup4d,
.advExcl,
.yearRule,
.dateRule,
.ReciprocalEachInfo,
.ReciprocalOneInfo,
.indefiniteNegationsInfo,
.indefiniteQuestionsInfo,
.indefiniteAffirmativeInfo,
.prepositionONInfo,
.prepositionATInfo,
.prepositionINInfo,
.prepositionBYInfo {
padding-top: 10px;
margin-left: 10px;
color: black;
font-size: 2rem;
text-align: justify;
width: 90%;
}
.singular,
.plural,
.count,
.uncount,
.adjectiveDescribe1,
.adjectiveDescribe2,
.adjectiveDescribe3,
.adjectiveDescribe4,
.yearExamples,
.dateExample {
padding-top: 20px;
}
.adverbsGroup1d,
.adverbsGroup2d,
.adverbsGroup3d,
.adverbsGroup4d {
padding-top: -5px;
}
.irregularMain {
color: white;
width: 90%;
padding-left: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: justify;
text-shadow: 1px 0 1px black;
font-size: 2.2rem;
text-align: justify;
cursor: pointer;
}
.modal2Example,
.modal4Example,
.modal6Example,
.modal8Example,
.modal10Example,
.modal12Example,
.AuxFunction3,
.AuxHelp3,
.AuxMain3,
.PluralRule1,
.PluralRule2,
.PluralRule3,
.PluralRule4,
.PluralRule5,
.PluralRule6,
.PluralRule7,
.PluralRule8,
.compound1,
.compound2,
.compound3,
.compound4,
.compound5,
.compound6,
.compound7,
.compound8,
.compound9,
.compound10,
.adjectiveExample1,
.adjectiveExample2,
.adjectiveExample3,
.adjectiveExample4,
.adjectiveFullEx1,
.adjectiveFullEx2,
.adjectiveFullEx3,
.ExclusionsIrregular,
.ExclusionsOne,
.ExclusionsCompound,
.adverbsGroup1,
.adverbsGroup2,
.adverbsGroup3,
.adverbsGroup4,
.MostPopularAdverbsFrequencyExamples,
.AdverbsComplexExamples,
.AdverbsFrequencySentencesExamples,
.AdverbsTimeSingleExamples,
.AdverbsTimeExpressionExamples,
.adverbsPlaceListExamples,
.adverbsPlaceSentencesExamples,
.adverbsMannerExamples,
.adverbsDegreeExamples,
.adverbsDegreeExclusionsExamples,
.indefiniteArticlesExamples,
.definiteArticlesExamples,
.zeroArticleExamples,
.cardinalNumbersList1Show,
.cardinalNumbersList2Show,
.cardinalNumbersList3Show,
.cardinalNumbersList4Show,
.cardinalNumbersList5Show,
.ordinalNumbersList1Show,
.ordinalNumbersList2Show,
.ordinalNumbersList3Show,
.ordinalNumbersList4Show,
.dateExample,
.yearExamples,
.fractionVulgarExamples,
.fractionDecimalExamples,
.pronounsDenominatorEx,
.pronounsViewfinderEx,
.possessivePronounsSingularEx,
.possessivePronounsPluralEx,
.reflexiveSingularEx,
.reflexivePluralEx,
.ReciprocalEachExamples,
.ReciprocalOneExamples,
.NegationsEx,
.QuestionsEx,
.AffirmativeEx,
.prepositionONEx,
.prepositionATEx,
.prepositionINEx,
.prepositionBYEx,
.PronounsComplementEx,
.PronounsComplementTranslations,
.conjunctionResultEx,
.conjunctionReasonEx,
.conjunctionTimeEx,
.conjunctionPurposeEx,
.conjunctionConcessionEx {
color: #006666;
padding-left: 25px;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 2.2rem;
}
.irregularFirst {
font-size: 2.5rem;
text-align: justify;
border: 2px solid black;
width: 40%;
position: absolute;
left: 30%;
top: 30%;
list-style: none;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #3399CC;
}
.irregularSecond {
font-size: 2.5rem;
text-align: justify;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
width: 35%;
position: absolute;
left: 53%;
top: 30%;
list-style: none;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #3399CC;
}
.irregularThird {
font-size: 2.5rem;
text-align: left;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
border-left: 2px solid black;
width: 35%;
position: absolute;
left: 70%;
top: 30%;
list-style: none;
}
.irregularFormOne {
color: black;
font-weight: bold;
text-decoration: underline;
}
.irregularFormSecond {
color: black;
font-weight: bold;
text-decoration: underline;
}
.irregularFormThird {
color: black;
font-weight: bold;
text-decoration: underline;
}
/* Verb Numerals Noun Adjective Test*/
.arrow {
display: block;
width: 100%;
}
.arrowLeft {
position: relative;
left: 50px;
top: 18px;
color: white;
font-size: 4.2rem;
}
.arrowLeft2 {
position: relative;
left: 40px;
top: 8vh;
color: white;
font-size: 6rem;
}
.arrowLeft:hover {
cursor: pointer;
color: #CCFF66;
}
.arrowLeft2:hover {
cursor: pointer;
color: #CCFF66;
}
@media (max-width:400px) {
.arrowLeft {
position: relative;
left: 20px;
top: 3px;
color: white;
font-size: 3rem;
}
.arrowLeft2 {
position: relative;
left: 40px;
top: 12vh;
color: white;
font-size: 3rem;
}
}
/*Numerals Test */
.NumeralsBegin {
font-size: 3.5rem;
text-transform: uppercase;
width: 100vw;
margin-left: 0%;
margin-right: 0%;
margin-top: -25px;
text-shadow: 1px 0 1px black;
text-align: center;
color: white;
font-weight: 900;
background-color: #339966;
border: 1px solid black;
letter-spacing: 2px;
/* padding: 2px; */
}
@media (max-width:400px) {
.NumeralsBegin {
font-size: 2.5rem;
text-transform: uppercase;
width: 100vw;
margin-left: 0%;
margin-right: 0%;
margin-top: -35px;
text-shadow: 1px 0 1px black;
text-align: center;
color: white;
font-weight: 900;
background-color: #339966;
border: 1px solid black;
letter-spacing: 2px;
/* padding: 2px; */
}
}
.translateNumeral1 {
width: 350px;
height: 45px;
position: absolute;
top: 25%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral2 {
width: 350px;
height: 45px;
position: absolute;
top: 35%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral3 {
width: 350px;
height: 45px;
position: absolute;
top: 45%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral4 {
width: 350px;
height: 45px;
position: absolute;
top: 55%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral5 {
width: 350px;
height: 45px;
position: absolute;
top: 65%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral6 {
width: 350px;
height: 45px;
position: absolute;
top: 75%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral7 {
width: 350px;
height: 45px;
position: absolute;
top: 85%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral8 {
width: 350px;
height: 45px;
position: absolute;
top: 95%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral9 {
width: 350px;
height: 45px;
position: absolute;
top: 105%;
left: 25%;
font-size: 1.8rem;
}
.translateNumeral10 {
width: 350px;
height: 45px;
position: absolute;
top: 115%;
left: 25%;
font-size: 1.8rem;
}
.translateExample1 {
position: absolute;
top: 25%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.testInfo2 {
position: absolute;
left: 2%;
top: 22%;
padding: 5px;
width: 90%;
color: white;
font-size: 1.7rem;
text-shadow: 2px 0 2px black;
}
.testInfo3 {
position: absolute;
left: 2%;
top: 22%;
padding: 5px;
width: 90%;
color: white;
font-size: 1.7rem;
text-shadow: 2px 0 2px black;
}
@media (max-width:400px) {
.testInfo3 {
position: absolute;
left: 2%;
top: 12%;
padding: 5px;
width: 100vw;
color: white;
font-size: 1.5rem;
text-shadow: 2px 0 2px black;
}
.testInfo2 {
position: absolute;
left: 2%;
top: 12%;
padding: 5px;
width: 100vw;
color: white;
font-size: 1.5rem;
text-shadow: 2px 0 2px black;
}
}
.translateExample2 {
position: absolute;
top: 35%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample3 {
position: absolute;
top: 45%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample4 {
position: absolute;
top: 55%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample5 {
position: absolute;
top: 65%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample6 {
position: absolute;
top: 75%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample7 {
position: absolute;
top: 85%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample8 {
position: absolute;
top: 95%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample9 {
position: absolute;
top: 105%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.translateExample10 {
position: absolute;
top: 115%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 190px;
height: 45px;
color: white;
}
.YourScore {
position: absolute;
width: 798px;
height: 70%;
position: absolute;
top: 25%;
right: 10%;
}
.yourPoints {
position: absolute;
top: 15%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 2rem;
}
.checkYourAnswers {
position: absolute;
top: 0;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.correctAnswers {
position: absolute;
top: 30%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.failedAnswers {
position: absolute;
top: 45%;
left: 0;
width: 268px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.resetAnswers {
position: absolute;
top: 60%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.resolution {
position: absolute;
top: 75%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.checkYourAnswers:hover,
.resolution:hover,
.resetAnswers:hover {
background-color: #CC9933;
color: white;
}
/* Przymiotniki - TEST */
.gradationExample1 {
position: absolute;
top: 27%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample1 {
position: absolute;
top: 27%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample2 {
position: absolute;
top: 37%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample2 {
position: absolute;
top: 37%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample3 {
position: absolute;
top: 47%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample3 {
position: absolute;
top: 47%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample4 {
position: absolute;
top: 57%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample4 {
position: absolute;
top: 57%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample5 {
position: absolute;
top: 67%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample5 {
position: absolute;
top: 67%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample6 {
position: absolute;
top: 77%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample6 {
position: absolute;
top: 77%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample7 {
position: absolute;
top: 87%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample7 {
position: absolute;
top: 87%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample8 {
position: absolute;
top: 97%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample8 {
position: absolute;
top: 97%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample9 {
position: absolute;
top: 107%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample9 {
position: absolute;
top: 107%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationExample10 {
position: absolute;
top: 117%;
left: 10%;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 370px;
height: 45px;
color: white;
}
.adverbExample10 {
position: absolute;
top: 117%;
left: 8%;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 400px;
height: 45px;
color: white;
}
.gradationAdjective1,
.adverbResponse1 {
width: 350px;
height: 45px;
position: absolute;
top: 27%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective2,
.adverbResponse2 {
width: 350px;
height: 45px;
position: absolute;
top: 37%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective3,
.adverbResponse3 {
width: 350px;
height: 45px;
position: absolute;
top: 47%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective4,
.adverbResponse4 {
width: 350px;
height: 45px;
position: absolute;
top: 57%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective5,
.adverbResponse5 {
width: 350px;
height: 45px;
position: absolute;
top: 67%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective6,
.adverbResponse6 {
width: 350px;
height: 45px;
position: absolute;
top: 77%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective7,
.adverbResponse7 {
width: 350px;
height: 45px;
position: absolute;
top: 87%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective8,
.adverbResponse8 {
width: 350px;
height: 45px;
position: absolute;
top: 97%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective9,
.adverbResponse9 {
width: 350px;
height: 45px;
position: absolute;
top: 107%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.gradationAdjective10,
.adverbResponse10 {
width: 350px;
height: 45px;
position: absolute;
top: 117%;
left: 30%;
font-size: 1.8rem;
text-align: center;
}
.YourScore1 {
position: absolute;
width: 798px;
height: 70%;
position: absolute;
top: 25%;
right: 5%;
}
.yourPoints1 {
position: absolute;
top: 15%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.yourPoints1color {
color: green;
}
.checkYourAnswers1 {
position: absolute;
top: 0;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.correctAnswers1 {
position: absolute;
top: 30%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.failedAnswers1 {
position: absolute;
top: 45%;
left: 0;
width: 268px;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.failedAnswerscolor1 {
color: red;
}
.resetAnswers1 {
position: absolute;
top: 60%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.resolution1 {
position: absolute;
top: 75%;
left: 0;
width: 266px;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.checkYourAnswers1:hover,
.resolution1:hover,
.resetAnswers1:hover {
background-color: #CC9933;
color: white;
}
div.nounDetails a {
text-decoration: none;
}
@media (max-width:400px) {
.YourScore1,
.YourScore {
position: absolute;
width: 100vw;
height: 60vh;
position: absolute;
top: 225%;
left: 0;
z-index: 5;
}
.yourPoints1 {
position: absolute;
top: 15%;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.checkYourAnswers1,
.checkYourAnswers {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.correctAnswers1,
.correctAnswers {
position: absolute;
top: 30%;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.failedAnswers1,
.failedAnswers {
position: absolute;
top: 45%;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
}
.resetAnswers1,
.resetAnswers {
position: absolute;
top: 60%;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.resolution1,
.resolution {
position: absolute;
top: 75%;
left: 0;
width: 100vw;
height: 80px;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
.adverbExample1,
.translateExample1 {
position: absolute;
top: 25%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse1,
.gradationAdjective1,
.translateNumeral1 {
width: 100%;
height: 45px;
position: absolute;
top: 35%;
left: 0;
font-size: 1.8rem;
text-align: center;
}
.gradationExample1 {
position: absolute;
top: 25%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.gradationExample2 {
position: absolute;
top: 45%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample2,
.translateExample2 {
position: absolute;
top: 45%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse2,
.gradationAdjective2,
.translateNumeral2 {
width: 100%;
height: 45px;
position: absolute;
top: 55%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample3 {
position: absolute;
top: 65%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample3,
.translateExample3 {
position: absolute;
top: 65%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse3,
.gradationAdjective3,
.translateNumeral3 {
width: 100%;
height: 45px;
position: absolute;
top: 75%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample4 {
position: absolute;
top: 85%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample4,
.translateExample4 {
position: absolute;
top: 85%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse4,
.gradationAdjective4,
.translateNumeral4 {
width: 100vw;
height: 45px;
position: absolute;
top: 95%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample5 {
position: absolute;
top: 105%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample5,
.translateExample5 {
position: absolute;
top: 105%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse5,
.gradationAdjective5,
.translateNumeral5 {
width: 100%;
height: 45px;
position: absolute;
top: 115%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample6 {
position: absolute;
top: 125%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample6,
.translateExample6 {
position: absolute;
top: 125%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse6,
.gradationAdjective6,
.translateNumeral6 {
width: 100%;
height: 45px;
position: absolute;
top: 135%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample7,
.translateExample7 {
position: absolute;
top: 145%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample7 {
position: absolute;
top: 145%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse7,
.gradationAdjective7,
.translateNumeral7 {
width: 100%;
height: 45px;
position: absolute;
top: 155%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample8 {
position: absolute;
top: 165%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample8,
.translateExample8 {
position: absolute;
top: 165%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse8,
.gradationAdjective8,
.translateNumeral8 {
width: 100%;
height: 45px;
position: absolute;
top: 175%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample9 {
position: absolute;
top: 185%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample9,
.translateExample9 {
position: absolute;
top: 185%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse9,
.gradationAdjective9,
.translateNumeral9 {
width: 100%;
height: 45px;
position: absolute;
top: 195%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
.gradationExample10 {
position: absolute;
top: 205%;
left: 0;
font-size: 1.3rem;
text-align: center;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbExample10,
.translateExample10 {
position: absolute;
top: 205%;
left: 0;
font-size: 1.3rem;
text-align: left;
border: 1px solid black;
padding: 5px;
width: 100%;
height: 45px;
color: white;
}
.adverbResponse10,
.gradationAdjective10,
.translateNumeral10 {
width: 100%;
height: 45px;
position: absolute;
top: 215%;
left: 0;
font-size: 1.3rem;
text-align: center;
}
}
/* GRAMATYKA (CZASY) - STRONA MOBILNA */
@media (max-width:1362px) {
.testTenses {
width: 150px;
height: 150px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
right: 5%;
bottom: -10%;
cursor: pointer;
transition: .5s;
}
div.exercisePast {
width: 25%;
background-color: black;
color: white;
}
section.generalPastTense {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 200vh;
justify-content: center;
/* background-color: #A8A8A8; */
flex-wrap: nowrap;
justify-content: space-between;
}
.check {
width: 200px;
height: 200px;
background-color: white;
color: black;
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 25%;
top: 130%;
cursor: pointer;
transition: .5s;
}
.points {
width: 200px;
height: 200px;
background-color: white;
color: black;
font-size: 25px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 40%;
top: 130%;
}
.resetButton {
width: 200px;
height: 200px;
background-color: white;
color: black;
font-size: 25px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
cursor: pointer;
position: absolute;
left: 55%;
top: 130%;
transition: .5s;
}
.correctInput {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 160%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.correctInput2 {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 170%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.failedInput {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 180%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
}
@media (orientation: landscape) and (max-width:1080px) {
section.generalPastTense {
height: 600vh;
}
div.generalPastInfo {
width: 60%;
height: 600vh;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
padding: 8px;
font-size: 1.8rem;
}
div.exercisePast {
width: 25%;
height: 700vh;
background-color: black;
color: white;
}
div.TenseReference {
width: 20%;
height: 700vh;
background-color: white;
color: black;
text-transform: uppercase;
text-align: center;
padding-top: 15px;
font-size: 1.3rem;
border: 2px solid black;
}
/* div.generalPastInfo {
width: 60%;
height: 600vh;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
padding: 15px;
} */
.pastSimpleInfo {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.pastSimpleInfo2 {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleFirst {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleSecond {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleThird {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleFourth {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleFifth {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleSixth {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleSeven {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
;
}
.exampleEight {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleNine {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.exampleTen {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.pastSimpleInfo3 {
font-size: 1.8rem;
padding-left: 10px;
padding-top: 20px;
}
.generalWhite {
color: white;
font-size: 1.8rem;
}
.testTenses {
width: 120px;
height: 120px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
right: 5%;
bottom: -160%;
cursor: pointer;
transition: .5s;
}
/* .exercisePast {
margin-top: 50px;
} */
.pastConstruction {
padding-top: 80px;
}
.exercisePast ul {
margin-top: 50px;
}
.sentence1 {
position: absolute;
top: 10%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence2 {
position: absolute;
top: 18%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence3 {
position: absolute;
top: 26%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence4 {
position: absolute;
top: 34%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence5 {
position: absolute;
top: 42%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence6 {
position: absolute;
top: 50%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence7 {
position: absolute;
top: 58%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence8 {
position: absolute;
top: 66%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence9 {
position: absolute;
top: 74%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.sentence10 {
position: absolute;
top: 82%;
left: 2%;
font-size: 1.8rem;
border: 1px solid black;
padding: 5px;
width: 90%;
}
.pass,
.pass12,
.pass22,
.pass32,
.pass42,
.pass52,
.pass62,
.pass72,
.pass82 {
width: 90%;
height: 45px;
position: absolute;
top: 14%;
left: 2%;
}
.pass3,
.pass13,
.pass23,
.pass33,
.pass43,
.pass53,
.pass63,
.pass73,
.pass83 {
width: 90%;
height: 45px;
position: absolute;
top: 22%;
left: 2%;
}
.pass4,
.pass14,
.pass24,
.pass34,
.pass44,
.pass54,
.pass64,
.pass74,
.pass84 {
width: 90%;
height: 45px;
position: absolute;
top: 30%;
left: 2%;
}
.pass5,
.pass15,
.pass25,
.pass35,
.pass45,
.pass55,
.pass65,
.pass75,
.pass85 {
width: 90%;
height: 45px;
position: absolute;
top: 38%;
left: 2%;
}
.pass6,
.pass16,
.pass26,
.pass36,
.pass46,
.pass56,
.pass66,
.pass76,
.pass86 {
width: 90%;
height: 45px;
position: absolute;
top: 46%;
left: 2%;
}
.pass7,
.pass17,
.pass27,
.pass37,
.pass47,
.pass57,
.pass67,
.pass77,
.pass87 {
width: 90%;
height: 45px;
position: absolute;
top: 54%;
left: 2%;
}
.pass8,
.pass18,
.pass28,
.pass38,
.pass48,
.pass58,
.pass68,
.pass78,
.pass88 {
width: 90%;
height: 45px;
position: absolute;
top: 62%;
left: 2%;
}
.pass9,
.pass19,
.pass29,
.pass39,
.pass49,
.pass59,
.pass69,
.pass79,
.pass89 {
width: 90%;
height: 45px;
position: absolute;
top: 70%;
left: 2%;
}
.pass10,
.pass20,
.pass30,
.pass40,
.pass50,
.pass60,
.pass70,
.pass80,
.pass90 {
width: 90%;
height: 45px;
position: absolute;
top: 78%;
left: 2%;
}
.pass11,
.pass21,
.pass31,
.pass41,
.pass51,
.pass61,
.pass71,
.pass81,
.pass91 {
width: 90%;
height: 45px;
position: absolute;
top: 86%;
left: 2%;
}
.correctInput {
width: 55%;
height: 80px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 650%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.correctInput2 {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 680%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.failedInput {
width: 55%;
height: 50px;
border: 2px solid #CCCCFF;
position: absolute;
left: 20%;
top: 700%;
color: white;
font-size: 25px;
padding: 10px;
background-color: black;
}
.check {
width: 120px;
height: 120px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 80%;
top: 270%;
cursor: pointer;
transition: .5s;
}
.points {
width: 120px;
height: 120px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
position: absolute;
left: 80%;
top: 320%;
}
.resetButton {
width: 120px;
height: 120px;
background-color: white;
color: black;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-radius: 50%;
cursor: pointer;
position: absolute;
left: 80%;
top: 370%;
transition: .5s;
}
}
@media (max-width:400px) {
section.generalPastTense {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 200vh;
justify-content: center;
/* background-color: #A8A8A8; */
flex-wrap: nowrap;
justify-content: space-between;
}
div.TenseReference {
width: 25%;
background-color: white;
color: black;
text-transform: uppercase;
text-align: center;
padding-top: 15px;
font-size: 1rem;
border: 2px solid black;
height: 200vh;
}
div.generalPastInfo {
width: 60%;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
padding: 8px;
font-size: 1rem;
}
.pastSimpleInfo {
color: white;
font-size: 1.2rem;
padding-bottom: 20px;
padding-left: 4px;
padding-top: 10px;
text-shadow: 1px 0 1px black;
}
.pastSimpleInfo2 {
color: white;
font-size: 1.2rem;
padding-left: 4px;
padding-top: 10px;
text-shadow: 1px 0 1px black;
}
.exampleFirst {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSecond {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleThird {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleFourth {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleFifth {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSixth {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleSeven {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleEight {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleNine {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.exampleTen {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
cursor: pointer;
text-shadow: 1px 0 1px black;
}
.pastSimpleInfo3 {
color: white;
font-size: 1rem;
padding-left: 4px;
padding-top: 20px;
text-shadow: 1px 0 1px black;
}
.generalWhite {
color: white;
font-size: 1rem;
padding-bottom: 30px;
padding-left: 4px;
padding-top: 30px;
text-align: justify;
text-shadow: 1px 0 1px black;
}
div.exercisePast {
width: 25%;
font-size: 1rem;
background-color: black;
color: white;
height: 200vh;
}
.exercisePast ul li {
font-size: 1rem;
text-align: center;
padding: 10px;
text-transform: uppercase;
list-style: none;
}
.exercisePast2Visible {
display: block;
transform: translateY(35%);
color: white;
}
.blue {
color: #0033CC;
}
.activeTense {
background-color: #009999;
color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
transition: .5s;
letter-spacing: 0px;
}
.activeSideMenu {
color: white;
font-weight: 900;
background-color: #339966;
border-left: 1px solid black;
letter-spacing: 0;
}
.pastSimple {
padding-top: 10px;
padding-bottom: 10px;
}
.pastContinuous {
padding-top: 10px;
padding-bottom: 15px;
}
.presentSimple {
padding-top: 10px;
padding-bottom: 10px;
}
.presentContinuous {
padding-top: 10px;
padding-bottom: 10px;
}
.presentPerfect {
padding-top: 10px;
padding-bottom: 10px;
}
.pastPerfect {
padding-top: 10px;
padding-bottom: 10px;
}
.futureSimple {
padding-top: 10px;
padding-bottom: 10px;
}
.futureContinuous {
padding-top: 10px;
padding-bottom: 10px;
}
.futurePerfect {
padding-top: 10px;
padding-bottom: 10px;
}
.pastConstruction {
padding-top: 100px;
}
.timeClock {
width: 100%;
height: 25%;
background-size: contain;
background-repeat: no-repeat;
}
.futurePicture {
width: 100%;
height: 50%;
margin-top: 140px;
}
.futurePicture2 {
width: 100%;
height: 50%;
margin-top: 140px;
}
.futurePicture3 {
width: 100%;
height: 50%;
margin-top: 140px;
}
.contPicture {
width: 100%;
height: 50%;
margin-top: 140px;
}
.contPicture2 {
width: 100%;
height: 50%;
margin-top: 140px;
}
.pastPicture {
width: 100%;
height: 50%;
margin-top: 140px;
}
.simplePicture {
width: 100%;
height: 50%;
margin-top: 140px;
}
.perfectPicture {
width: 100%;
height: 50%;
margin-top: 140px;
}
.perfectPicture2 {
width: 100%;
height: 50%;
margin-top: 140px;
}
.toBeVariation2 {
width: 100%;
height: 200px;
position: absolute;
top: 15%;
left: 27%;
font-size: 1.5rem;
}
.toBeVariation3 {
width: 50vw;
height: 200px;
position: absolute;
top: 15%;
left: 27%;
}
.number1 {
position: absolute;
top: 25px;
left: 70px;
font-size: .6rem;
}
.number2 {
position: absolute;
top: 25px;
left: 140px;
font-size: .6rem;
}
.person1 {
position: absolute;
top: 60px;
left: 7px;
font-size: .8rem;
}
.person2 {
position: absolute;
top: 110px;
left: 7px;
font-size: .8rem;
}
.person3 {
position: absolute;
top: 160px;
left: 7px;
font-size: .8rem;
}
.variation1 {
position: absolute;
top: 60px;
left: 70px;
color: white;
font-size: 1rem;
}
.variation2 {
position: absolute;
top: 110px;
left: 70px;
color: white;
font-size: 1rem;
}
.variation3 {
position: absolute;
top: 160px;
left: 70px;
color: white;
font-size: 1rem;
}
.variation4 {
position: absolute;
top: 60px;
left: 520px;
color: white;
font-size: 1rem;
}
.variation5 {
position: absolute;
top: 110px;
left: 520px;
color: white;
font-size: 1rem;
}
.variation6 {
position: absolute;
top: 160px;
left: 520px;
color: white;
font-size: 1rem;
}
.testTenses {
width: 80px;
height: 80px;
background-color: white;
font-size: 13px;
font-weight: 800;
border-radius: 50%;
position: absolute;
right: 1%;
bottom: 3%;
cursor: pointer;
transition: .5s;
}
.testInfo {
font-size: 1.2rem;
}
.sentence1 {
position: absolute;
top: 9vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence2 {
position: absolute;
top: 27vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence3 {
position: absolute;
top: 45vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence4 {
position: absolute;
top: 63vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence5 {
position: absolute;
top: 79vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence6 {
position: absolute;
top: 97vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence7 {
position: absolute;
top: 115vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence8 {
position: absolute;
top: 133vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence9 {
position: absolute;
top: 151vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.sentence10 {
position: absolute;
top: 169vh;
left: 2%;
font-size: 1rem;
border: 1px solid black;
padding: 5px;
width: 190px;
}
.blue {
font-size: 1rem;
}
/* Pierwszy input */
.pass {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass12 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass22 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass32 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass42 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass52 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass62 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass72 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
.pass82 {
width: 190px;
height: 45px;
position: absolute;
top: 18vh;
left: 2%;
font-size: 1.2rem;
}
/* Drugi input */
.pass3 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass13 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass23 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass33 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass43 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass53 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass63 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass73 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
.pass83 {
width: 190px;
height: 45px;
position: absolute;
top: 36vh;
left: 2%;
font-size: 1.2rem;
}
/* Trzeci input */
.pass42 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass14 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass24 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass34 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass44 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass54 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass64 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass74 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
.pass84 {
width: 190px;
height: 45px;
position: absolute;
top: 54vh;
left: 2%;
font-size: 1.2rem;
}
/* Czwarty input */
.pass5 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass15 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass25 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass35 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass45 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass55 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass65 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass75 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
.pass85 {
width: 190px;
height: 45px;
position: absolute;
top: 72vh;
left: 2%;
font-size: 1.2rem;
}
/* Piąty input */
.pass6 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass16 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass26 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass36 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass46 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass56 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass66 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass76 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
.pass86 {
width: 190px;
height: 45px;
position: absolute;
top: 89vh;
left: 2%;
font-size: 1.2rem;
}
/* Szósty input */
.pass7 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass17 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass27 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass37 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass47 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass57 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass67 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass77 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
.pass87 {
width: 190px;
height: 45px;
position: absolute;
top: 107vh;
left: 2%;
font-size: 1.2rem;
}
/* Siódmy input */
.pass8 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass18 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass28 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass38 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass48 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass58 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass68 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass78 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
.pass88 {
width: 190px;
height: 45px;
position: absolute;
top: 125vh;
left: 2%;
font-size: 1.2rem;
}
/* Ósmy input */
.pass9 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass19 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass29 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass39 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass49 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass59 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass69 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass79 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
.pass89 {
width: 190px;
height: 45px;
position: absolute;
top: 143vh;
left: 2%;
font-size: 1.2rem;
}
/* Dziewiąty input */
.pass10 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass20 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass30 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass40 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass50 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass60 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass70 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass80 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
.pass90 {
width: 190px;
height: 45px;
position: absolute;
top: 161vh;
left: 2%;
font-size: 1.2rem;
}
/* Dziesiąty input */
.pass11 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass21 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass31 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass41 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass51 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass61 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass71 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass81 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.pass91 {
width: 190px;
height: 45px;
position: absolute;
top: 179vh;
left: 2%;
font-size: 1.2rem;
}
.blackboard {
font-size: 1.2rem;
}
.check {
width: 80px;
height: 80px;
font-size: 13px;
left: 79%;
top: 145vh;
}
.check:hover {
background-color: #CC9933;
color: white;
}
.points {
width: 80px;
height: 80px;
font-size: 13px;
left: 79%;
top: 160vh;
}
.resetButton {
width: 80px;
height: 80px;
font-size: 13px;
font-weight: 800;
left: 79%;
top: 175vh;
}
.blocker {
display: block;
}
.green {
font-size: 1rem;
}
.green1 {
font-size: 15px;
}
.green2 {
font-size: 15px;
}
.red1 {
font-size: 15px;
}
.correctInput {
width: 100%;
height: 50px;
left: 0;
top: 200%;
color: white;
font-size: 15px;
padding: 5px;
}
.correctInput2 {
width: 100%;
height: 50px;
left: 0;
top: 205%;
color: white;
font-size: 15px;
padding: 5px;
}
.failedInput {
width: 100%;
height: 50px;
left: 0;
top: 210%;
color: white;
font-size: 15px;
padding: 5px;
}
/* PODSTRONA CZĘŚCI MOWY */
.speechMenu {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 200vh;
background-color: white;
flex-wrap: nowrap;
justify-content: space-between;
border: 2px solid black;
font-size: 1rem;
}
.speechMenuVariant {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 350vh;
background-color: white;
flex-wrap: nowrap;
justify-content: space-between;
border: 2px solid black;
}
.speechList {
color: black;
text-transform: uppercase;
justify-content: center;
padding-top: 40px;
text-align: center;
width: 30vw;
height: 200vh;
font-size: 1rem;
}
.speechList li {
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.2rem;
list-style: none;
font-weight: bold;
}
.speechList li:hover {
cursor: pointer;
}
.nounDetails {
display: flex;
justify-content: space-evenly;
width: 80vw;
height: 200vh;
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
.nounDetailsAttribute {
height: 350vh;
display: flex;
justify-content: space-evenly;
width: 80vw;
flex-wrap: wrap;
background-image: linear-gradient(40deg, #90A4AE 35%, #CDCDCD 85%);
}
.nounDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
}
.nounDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
}
.nounDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.nounDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.nounDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.nounDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.nounDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.nounDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 15vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.nounDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.nounDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* PRZYMIOTNIKI */
.adjDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.adjDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.adjDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 1.5px;
}
.adjDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.adjDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.adjDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.adjDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.adjDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.adjDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.adjDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.adjDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.adjDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.adjDetail5 h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
transition: 1s;
}
.newPosition {
animation: nounAnimation 3s linear both;
animation-delay: 0.5s;
}
.newPositionDelay {
animation: nounAnimation 3s linear both;
animation-delay: 2s;
}
@keyframes nounAnimation {
0% {
transform: translateX(-290%);
}
100% {
transform: translateX(0);
}
}
.newPosition1 {
animation: adjAnimation 5s linear both;
animation-delay: 2s;
}
@keyframes adjAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.newPosition2 {
animation: nounAnimation2 3s linear both;
animation-delay: 1s;
}
@keyframes nounAnimation2 {
0% {
transform: translateX(-170%);
}
100% {
transform: translateX(0);
}
}
.newPosition3 {
animation: nounAnimation3 5s linear both;
animation-delay: 0.5s;
}
.newPosition4 {
animation: nounAnimation3 5s linear both;
animation-delay: 1s;
}
.newPosition5 {
animation: nounAnimation3 5s linear both;
animation-delay: 1.5s;
}
.newPosition6 {
animation: nounAnimation3 5s linear both;
animation-delay: 2s;
}
.newPosition7 {
animation: nounAnimation3 5s linear both;
animation-delay: 2.5s;
}
.newPosition8 {
animation: nounAnimation3 5s linear both;
animation-delay: 3s;
}
.newPosition9 {
animation: nounAnimation3 5s linear both;
animation-delay: 3.5s;
}
.newPosition10 {
animation: nounAnimation3 5s linear both;
animation-delay: 4s;
}
@keyframes nounAnimation3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* PRZYSŁÓWKI */
.advDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.advDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 1.5px;
}
.advDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.advDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.advDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail6 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail6 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.advDetail7 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.advDetail7 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* PRZEDIMKI */
.artDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.artDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.artDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.artDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.artDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.artDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.artDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.artDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.artDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.artDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.artDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* LICZEBNIKI */
.numDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.numDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.numDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.numDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.numDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.numDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.numDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.numDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.numDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.numDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* CZASOWNIKI */
.verbDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.verbDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.verbDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.verbDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.verbDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.verbDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail6 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.verbDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.verbDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.verbDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.verbDetail6 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* ZAIMKI */
.pronDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.pronDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail6 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail7 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail8 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.pronDetail8:hover {
background-size: 120%;
cursor: pointer;
}
.pronDetail8 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.pronDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail6 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail7 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.pronDetail8 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* SPÓJNIK */
.conDetail1 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 70px;
/*background-image: url('/englishtips/img/nounDetail1.jpg');*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.conDetail1:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail1 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail2 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail2:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail2 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail3 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail3:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail3 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail4 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail4:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail4 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail5 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail5:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail5 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail6 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail6:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail6 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail7 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail7:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail7 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail8 {
width: 70vw;
height: 30vh;
border: 2px solid white;
margin-top: 4px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-300%); */
}
.conDetail8:hover {
background-size: 120%;
cursor: pointer;
}
.conDetail8 h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 1.8rem;
letter-spacing: 2px;
}
.conDetail1 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail2 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail3 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail4 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail5 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail6 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail7 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.conDetail8 h2 {
font-size: 1.7rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 70vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
/* CZASOWNIKI - WIADOMOSCI OGÓLNE */
.verbGeneral {
width: 100%;
/* height: 100vh; */
display: block;
}
.verbDescription,
.verbDescription2,
.genitiveInfo,
.countable,
.NounPlural,
.compound,
.adjective1,
.adjectiveFull,
.adjectiveExclusions,
.adverbsGeneral,
.adverbsFrequency,
.adverbsTime,
.adverbsPlace,
.adverbsManner,
.adverbsDegree,
.indefiniteArticles,
.definiteArticles,
.zeroArticle,
.cardinalNumbers,
.ordinalNumbers,
.dates,
.fraction,
.pronounsPersonal,
.possessivePronouns,
.reflexivePronouns,
.Reciprocal,
.indefinite,
.prepositionGen,
.adjectiveInformation,
.PronounsComplement,
.conjunctionResult,
.conjunctionReason,
.conjunctionTime,
.conjunctionPurpose,
.conjunctionConcession,
.conjunctionGeneral {
color: white;
width: 90%;
padding-bottom: 30px;
padding-left: 25px;
padding-top: 30px;
padding-right: 10px;
text-align: justify;
hyphens: auto;
text-shadow: 1px 0 1px black;
margin-top: 60px;
font-size: 1.5rem;
cursor: pointer;
}
.modalExamples {
color: #006666;
padding-left: 30px;
padding-top: 0;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 1.5rem;
}
.genitiveSingular,
.genitivePlural,
.countExamples,
.uncountExamples {
color: #006666;
padding-left: 40px;
padding-top: 20px;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 1.5rem;
}
.modalExamples2,
.AuxExample {
color: white;
padding-left: 40px;
padding-top: 0;
padding-right: 20px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 1.9rem;
}
.modal1,
.modal2,
.modal3 {
width: 80%;
font-size: 1.9rem;
}
.modal1,
.modal2,
.modal3,
.modal4,
.modal5,
.modal6,
.AuxMain1,
.AuxHelp1,
.AuxFunction1,
.singular,
.plural,
.count,
.uncount,
.NounPlural1,
.NounPlural2,
.NounPlural3,
.NounPlural4,
.NounPlural5,
.NounPlural6,
.NounPlural7,
.NounPlural8,
.compoundEx1,
.compoundEx2,
.compoundEx3,
.compoundEx4,
.compoundEx5,
.compoundEx6,
.compoundEx7,
.compoundEx8,
.compoundEx9,
.compoundEx10,
.adjectiveDescribe1,
.adjectiveDescribe2,
.adjectiveDescribe3,
.adjectiveDescribe4,
.adjectiveFull1,
.adjectiveFull2,
.adjectiveFull3,
.ExclusionsIrregularAd,
.ExclusionsOneAd,
.ExclusionsCompoundAd,
.adverbsGroup1t,
.adverbsGroup2t,
.adverbsGroup3t,
.adverbsGroup4t,
.MostPopularAdverbsFrequency,
.AdverbsComplex,
.AdverbsFrequencySentences,
.AdverbsTimeSingle,
.AdverbsTimeExpression,
.adverbsPlaceList,
.adverbsPlaceSentences,
.adverbsMannerList,
.adverbsDegreeList,
.adverbsDegreeExclusions,
.indefiniteArticlesDescribe,
.definiteArticlesDescribe,
.zeroArticleDescribe,
.cardinalNumbersList1,
.cardinalNumbersList2,
.cardinalNumbersList3,
.cardinalNumbersList4,
.cardinalNumbersList5,
.ordinalNumbersList1,
.ordinalNumbersList2,
.ordinalNumbersList3,
.ordinalNumbersList4,
.year,
.date,
.fractionVulgar,
.fractionDecimal,
.pronounsDenominator,
.pronounsViewfinder,
.possessivePronounsSingular,
.possessivePronounsPlural,
.reflexiveSingular,
.reflexivePlural,
.ReciprocalEach,
.ReciprocalOne,
.indefiniteNegations,
.indefiniteQuestions,
.indefiniteAffirmative,
.prepositionON,
.prepositionAT,
.prepositionIN,
.prepositionBY,
.PronounsComplementInfo,
.PronounsComplementList,
.conjunctionResultInfo,
.conjunctionReasonInfo,
.conjunctionTimeInfo,
.conjunctionPurposeInfo,
.conjunctionConcessionInfo {
cursor: pointer;
font-weight: 900;
}
.AuxHelp1:hover,
.AuxMain1:hover,
.AuxFunction1:hover,
.modal1:hover,
.modal2:hover,
.modal3:hover,
.modal4:hover,
.modal5:hover,
.modal6:hover,
.compoundEx1:hover,
.compoundEx2:hover,
.compoundEx3:hover,
.compoundEx4:hover,
.compoundEx5:hover,
.compoundEx6:hover,
.compoundEx7:hover,
.compoundEx8:hover,
.compoundEx9:hover,
.compoundEx10:hover,
.adjectiveDescribe1:hover,
.adjectiveDescribe2:hover,
.adjectiveDescribe3:hover,
.adjectiveDescribe4:hover,
.adjectiveFull1:hover,
.adjectiveFull2:hover,
.adjectiveFull3:hover,
.ExclusionsIrregularAd:hover,
.ExclusionsOneAd:hover,
.ExclusionsCompoundAd:hover,
.adverbsGroup1t:hover,
.adverbsGroup2t:hover,
.adverbsGroup3t:hover,
.adverbsGroup4t:hover,
.MostPopularAdverbsFrequency:hover,
.AdverbsComplex:hover,
.AdverbsFrequencySentences:hover,
.AdverbsTimeSingle:hover,
.AdverbsTimeExpression:hover,
.adverbsPlaceList:hover,
.adverbsPlaceSentences:hover,
.adverbsMannerList:hover,
.adverbsDegreeList:hover,
.adverbsDegreeExclusions:hover,
.indefiniteArticlesDescribe:hover,
.definiteArticlesDescribe:hover,
.zeroArticleDescribe:hover,
.cardinalNumbersList1:hover,
.cardinalNumbersList2:hover,
.cardinalNumbersList3:hover,
.cardinalNumbersList4:hover,
.cardinalNumbersList5:hover,
.ordinalNumbersList1:hover,
.ordinalNumbersList2:hover,
.ordinalNumbersList3:hover,
.ordinalNumbersList4:hover,
.year:hover,
.date:hover,
.fractionDecimal:hover,
.fractionVulgar:hover,
.pronounsDenominator:hover,
.pronounsViewfinder:hover,
.possessivePronounsSingular:hover,
.possessivePronounsPlural:hover,
.reflexiveSingular:hover,
.reflexivePlural:hover,
.ReciprocalEach:hover,
.ReciprocalOne:hover,
.indefiniteNegations:hover,
.indefiniteQuestions:hover,
.indefiniteAffirmative:hover,
.prepositionAT:hover,
.prepositionON:hover,
.prepositionIN:hover,
.prepositionBY:hover,
.PronounsComplementInfo:hover,
.PronounsComplementList:hover,
.conjunctionResultInfo:hover,
.conjunctionReasonInfo:hover,
.conjunctionTimeInfo:hover,
.conjunctionPurposeInfo:hover,
.conjunctionConcessionInfo:hover {
text-decoration: #339999 underline;
text-decoration-style: solid;
}
.NounPlural1,
.NounPlural2,
.NounPlural3,
.NounPlural4,
.NounPlural5,
.NounPlural6,
.NounPlural7,
.NounPlural8,
.AuxMain1,
.AuxHelp1,
.AuxFunction1,
.compoundEx1,
.compoundEx2,
.compoundEx3,
.compoundEx4,
.compoundEx5,
.compoundEx6,
.compoundEx7,
.compoundEx8,
.compoundEx9,
.compoundEx10,
.adjectiveFull1,
.adjectiveFull2,
.adjectiveFull3,
.ExclusionsIrregularAd,
.ExclusionsOneAd,
.ExclusionsCompoundAd,
.adverbsGroup1t,
.adverbsGroup2t,
.adverbsGroup3t,
.adverbsGroup4t,
.MostPopularAdverbsFrequency,
.AdverbsComplex,
.AdverbsFrequencySentences,
.AdverbsTimeSingle,
.AdverbsTimeExpression,
.adverbsPlaceList,
.adverbsPlaceSentences,
.adverbsMannerList,
.adverbsDegreeList,
.adverbsDegreeExclusions,
.adverbsDegreeExclusionsExamples,
.indefiniteArticlesDescribe,
.definiteArticlesDescribe,
.zeroArticleDescribe,
.cardinalNumbersList1,
.ordinalNumbersList1,
.year,
.date,
.fractionVulgar,
.pronounsDenominator,
.possessivePronounsSingular,
.reflexiveSingular,
.ReciprocalEach,
.ReciprocalOne,
.indefiniteNegations,
.indefiniteQuestions,
.indefiniteAffirmative,
.prepositionON,
.prepositionAT,
.prepositionIN,
.prepositionBY,
.PronounsComplementInfo,
.PronounsComplementList,
.conjunctionResultInfo,
.conjunctionReasonInf,
.conjunctionTimeInfo,
.conjunctionPurposeInfo,
.conjunctionConcessionInfo {
padding-top: 10px;
margin-left: 0;
}
.NounPlural8D,
.NounPlural7D,
.NounPlural6D,
.NounPlural5D,
.NounPlural4D,
.NounPlural3D,
.NounPlural2D,
.NounPlural1D,
.AuxMain2,
.AuxHelp2,
.AuxFunction2,
.modal1Example,
.modal3Example,
.modal5Example,
.modal7Example,
.modal9Example,
.modal11Example,
.countInfo,
.uncountInfo,
.adjD1,
.adjD2,
.adjD3,
.adjD4,
.adverbsGroup1d,
.adverbsGroup2d,
.adverbsGroup3d,
.adverbsGroup4d,
.advExcl,
.yearRule,
.dateRule,
.ReciprocalEachInfo,
.ReciprocalOneInfo,
.indefiniteNegationsInfo,
.indefiniteQuestionsInfo,
.indefiniteAffirmativeInfo,
.prepositionONInfo,
.prepositionATInfo,
.prepositionINInfo,
.prepositionBYInfo {
padding-top: 10px;
margin-left: 0px;
color: black;
font-size: 1.5rem;
text-align: justify;
hyphens: auto;
width: 95%;
}
.singular,
.plural,
.count,
.uncount,
.adjectiveDescribe1,
.adjectiveDescribe2,
.adjectiveDescribe3,
.adjectiveDescribe4,
.yearExamples,
.dateExample {
padding-top: 20px;
}
.adverbsGroup1d,
.adverbsGroup2d,
.adverbsGroup3d,
.adverbsGroup4d {
padding-top: -5px;
}
.irregularMain {
color: white;
width: 90%;
padding-left: 25px;
margin-top: 80px;
padding-bottom: 20px;
text-align: justify;
text-shadow: 1px 0 1px black;
font-size: 1.5rem;
text-align: justify;
hyphens: auto;
}
.modal2Example,
.modal4Example,
.modal6Example,
.modal8Example,
.modal10Example,
.modal12Example,
.AuxFunction3,
.AuxHelp3,
.AuxMain3,
.PluralRule1,
.PluralRule2,
.PluralRule3,
.PluralRule4,
.PluralRule5,
.PluralRule6,
.PluralRule7,
.PluralRule8,
.compound1,
.compound2,
.compound3,
.compound4,
.compound5,
.compound6,
.compound7,
.compound8,
.compound9,
.compound10,
.adjectiveExample1,
.adjectiveExample2,
.adjectiveExample3,
.adjectiveExample4,
.adjectiveFullEx1,
.adjectiveFullEx2,
.adjectiveFullEx3,
.ExclusionsIrregular,
.ExclusionsOne,
.ExclusionsCompound,
.adverbsGroup1,
.adverbsGroup2,
.adverbsGroup3,
.adverbsGroup4,
.MostPopularAdverbsFrequencyExamples,
.AdverbsComplexExamples,
.AdverbsFrequencySentencesExamples,
.AdverbsTimeSingleExamples,
.AdverbsTimeExpressionExamples,
.adverbsPlaceListExamples,
.adverbsPlaceSentencesExamples,
.adverbsMannerExamples,
.adverbsDegreeExamples,
.adverbsDegreeExclusionsExamples,
.indefiniteArticlesExamples,
.definiteArticlesExamples,
.zeroArticleExamples,
.cardinalNumbersList1Show,
.cardinalNumbersList2Show,
.cardinalNumbersList3Show,
.cardinalNumbersList4Show,
.cardinalNumbersList5Show,
.ordinalNumbersList1Show,
.ordinalNumbersList2Show,
.ordinalNumbersList3Show,
.ordinalNumbersList4Show,
.dateExample,
.yearExamples,
.fractionVulgarExamples,
.fractionDecimalExamples,
.pronounsDenominatorEx,
.pronounsViewfinderEx,
.possessivePronounsSingularEx,
.possessivePronounsPluralEx,
.reflexiveSingularEx,
.reflexivePluralEx,
.ReciprocalEachExamples,
.ReciprocalOneExamples,
.NegationsEx,
.QuestionsEx,
.AffirmativeEx,
.prepositionONEx,
.prepositionATEx,
.prepositionINEx,
.prepositionBYEx,
.PronounsComplementEx,
.PronounsComplementTranslations,
.conjunctionResultEx,
.conjunctionReasonEx,
.conjunctionTimeEx,
.conjunctionPurposeEx,
.conjunctionConcessionEx {
color: #006666;
padding-left: 0px;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 0px;
text-align: left;
text-shadow: 1px 0 1px black;
font-size: 1.6rem;
}
.irregularFirst {
font-size: 1.5rem;
text-align: justify;
border: 2px solid black;
width: 23%;
height: 175vh;
position: absolute;
left: 28%;
top: 60%;
list-style: none;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #3399CC;
}
.irregularSecond {
font-size: 1.5rem;
text-align: left;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
width: 23%;
height: 175vh;
position: absolute;
left: 52%;
top: 60%;
list-style: none;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #3399CC;
}
.irregularThird {
font-size: 1.5rem;
text-align: left;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
border-left: 2px solid black;
width: 23%;
height: 175vh;
position: absolute;
left: 76%;
top: 60%;
list-style: none;
background-color: #3399CC;
}
.irregularFormOne {
color: black;
font-weight: bold;
text-decoration: underline;
font-size: 1.2rem;
}
.irregularFormSecond {
color: black;
font-weight: bold;
text-decoration: underline;
font-size: 1.2rem;
}
.irregularFormThird {
color: black;
font-weight: bold;
text-decoration: underline;
font-size: 1.2rem;
}
/* BRAIN GAME */
/* #brain {
display: flex;
flex-direction: row;
}
#scoreWrapper {
display: block;
flex-basis: auto;
background-color: green;
color: white;
}
#wordWrapper {
display: block;
flex-basis: auto;
background-color: blue;
color: black;
width: 80%;
height: 50%;
}
#letterWrapper {
display: block;
flex-basis: auto;
background-color: black;
width: 80%;
border: white;
font-size: 3rem;
}
#categoryWrapper {
width: 20%;
height: 50%;
font-size: 2rem;
display: block;
flex-basis: auto;
background-color: red;
color: white;
}
#resetWrapper {
display: block;
flex-basis: auto;
background-color: blue;
flex-wrap: wrap;
}
.startBrainGame {
text-transform: uppercase;
}
button {
width: 10%;
color: white;
height: 30%;
background-color: black;
font-size: 2rem;
padding: 5px;
cursor: pointer;
} */
}
/* Brain Game */
.hang {
font-family: Arial, sans-serif;
background-color: #C0C0C0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
font-size: 30px;
border: 2px black;
}
#gamecontainer {
text-align: center;
background-color: #DDDDDD;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 60px;
width: 100vw;
height: 90vh;
background-image: url(../img/brain.jpg);
background-repeat: no-repeat;
}
#gamecontainer h1 {
position: absolute;
top: 48%;
left: 45%;
text-transform: uppercase;
font-family: 'Courier New';
}
#word-container {
margin-bottom: 10px;
color: black;
font-size: 3rem;
font-weight: bold;
letter-spacing: 10px;
text-transform: uppercase;
}
#message {
font-size: 28px;
margin-bottom: 10px;
color: #b30000;
}
#keyboard {
display: flex;
flex-wrap: nowrap;
justify-content: center;
background-color: black;
}
.button {
background-color: #008B8B;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
width: 60px;
text-transform: uppercase;
}
.button:hover {
background-color: #45a049;
}
#rbutton {
position: absolute;
left: 20px;
top: 800px;
width: 150px;
height: 50px;
border-radius: 15%;
text-transform: uppercase;
padding: 5px;
font-size: 2rem;
background-color: black;
color: white;
}
#chances {
margin-top: 360px;
margin-left: 150px;
width: 200px;
height: 100px;
border-radius: 20%;
text-transform: uppercase;
padding: 3px;
font-size: 2rem;
color: #00CCCC;
background-color: black;
}
#rbutton:hover {
background-color: #CC3333;
color: white;
border-radius: 35%;
transition: 1s;
cursor: pointer;
}
#wins {
position: absolute;
left: 20px;
top: 880px;
width: 150px;
height: 50px;
border-radius: 15%;
text-transform: uppercase;
padding: 5px;
font-size: 2rem;
background-color: black;
color: white;
}
#tip {
position: absolute;
left: 180px;
top: 800px;
width: 150px;
height: 50px;
border-radius: 15%;
text-transform: uppercase;
padding: 5px;
font-size: 2rem;
background-color: black;
color: white;
cursor: pointer;
}
#tip:hover {
background-color: #006633;
color: white;
border-radius: 35%;
transition: 1s;
}
#stars-container {
position: absolute;
left: 40%;
top: 60%;
}
#trophy-container {
position: absolute;
left: 80%;
top: 60%;
font-size: 6rem;
}
.star {
font-size: 6rem;
}
.button.wrong {
color: white;
background-color: #cc0033;
}
#category-container {
position: absolute;
top: 39%;
left: 48%;
font-size: 3rem;
text-transform: uppercase;
color: black;
text-transform: uppercase;
font-family: 'Courier New';
}
#tip-container {
position: absolute;
left: 500px;
top: 95%;
width: 60%;
background-color: black;
color: white;
border-radius: 10%;
text-align: center;
}
/* my_words*/
.random-box {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
background: #f9f9f9;
font-size: 25px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 15px;
font-size: 2rem;
padding: 10px;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
a.lottery {
display: inline-block;
margin: 10px 5px;
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 12px;
font-size: 2rem;
padding: 30px;
font-weight: bold;
}
.delete-btn {
background-color: #007bff;
}
.delete-btn:hover {
background-color: black;
color: white;
}
@media (max-width:400px) {
th,
td {
padding: 5px;
font-size: 1.3rem;
}
a.lottery {
display: inline-block;
margin-left: 40px;
margin-bottom: 10px;
margin-top: -10px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 12px;
font-size: 2rem;
padding: 10px;
font-weight: bold;
align-items: center;
text-align: center;
width: 80%;
}
.delete-btn {
background-color: #007bff;
font-size: 1.2rem;
padding: 2px 2px 2px 2px;
text-align: center;
margin-left: 2px;
}
.random-box {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
background: #f9f9f9;
font-size: 2rem;
}
}
/* header.php */
.user-info {
/*background: #f0f0f0;*/
padding: 8px 15px;
text-align: right;
font-size: 12px;
/*border-bottom: 1px solid #ccc;*/
color: white;
width: 200px;
position: absolute;
right: 1%;
top: 2%;
z-index: 2;
}
.logged-user {
margin: 0;
color: white;
z-index: 2;
}
.logged-user2 {
color: white;
margin-top: 8px;
border-radius: 25%;
position: absolute;
top: 10%;
right: 6%;
z-index: 2;
}
.logged-user2:hover {
background-color: #000099;
transition: .5s;
}
.user-icon {
color: #007bff;
/* np. niebieski */
margin-right: 160px;
margin-top: 0px;
font-size: 15px;
z-index: 2;
}
/* header2.php */
.user-info2 {
/*background: #f0f0f0;*/
padding: 8px 15px;
text-align: right;
font-size: 12px;
/*border-bottom: 1px solid #ccc;*/
color: white;
position: absolute;
width: 20%;
top: 1%;
left: 2px;
z-index: 2;
}
@media (max-width:400px) {
.user-info {
/*background: #f0f0f0;*/
padding: 8px 15px;
font-size: 10px;
border: none;
width: 150px;
color: white;
position: absolute;
left: 1%;
}
.user-info2 {
/*background: #f0f0f0;*/
padding: 8px 15px;
text-align: right;
font-size: 12px;
/*border-bottom: 1px solid #ccc;*/
color: white;
position: absolute;
width: 30%;
top: 1%;
left: 1%;
z-index: 2;
}
.logged-user {
margin-top: 8px;
margin-left: 55px;
color: white;
background-color: #0066ff;
}
.logged-user2 {
color: white;
margin-top: 25px;
margin-left: 35px;
position: absolute;
top: 10%;
left: 2%;
border: 1px black;
font-size: 1.2rem;
z-index: 2;
}
.user-icon {
color: #007bff;
/* np. niebieski */
margin-left: 2px;
margin-top: 25px;
font-size: 1.5rem;
}
}
/* login2.php */
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 40px;
margin-top: 200px;
position: relative;
bottom: 70%;
}
.tile {
display: flex;
align-items: center;
justify-content: center;
background: #007bff;
color: white;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s, background 0.3s;
}
.tile:hover {
background: #0056b3;
transform: translateY(-5px);
}
@media (max-width:400px) {
.tile {
display: flex;
align-items: center;
justify-content: center;
background: #007bff;
color: white;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s, background 0.3s;
margin-bottom: 5px;
}
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 40px;
margin-top: 100px;
position: absolute;
top: 10%;
left: 0;
width: 80vw;
}
}
.footer2 {
background-color: black;
margin: 100px 0 0 0;
width: 100vw;
margin-bottom: 50px;
}
p.copyright2 {
color: white;
font-size: 1rem;
text-align: center;
/* padding-left: 20px; */
}
div.footer2 {
text-align: center;
margin-top: 600px;
}
div.footer2 a p:hover {
font-weight: bolder;
color: #CCFF66;
animation: book .5s linear infinite alternate;
}
.flexy {
flex: 1;
}
.dashboard2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 40px;
margin-top: 100px;
}
/* quiz3.php */
.quiz-box {
background: #f9f9f9;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: auto;
text-align: center;
height: 50%;
width: 80vw;
position: absolute;
top: 40%;
left: 10%;
font-size: 2rem;
border: 3px black;
}
.quiz-input {
display: block;
font-size: 2.5rem;
width: 50vw;
max-width: 1000px;
margin: 160px 30px 10px 30px;
text-align: center;
}
.quiz-btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin: 40px 30px 30px 20px;
font-size: 2rem;
width: 200px;
}
.quiz2-btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin: 40px 30px 30px 20px;
font-size: 2rem;
width: 200px;
}
.quiz-btn:hover {
background: #0056b3;
}
.feedback {
margin-top: 15px;
font-weight: bold;
font-size: 2rem;
}
.stats {
margin-top: 20px;
font-size: 14px;
margin-left: 10px;
position: absolute;
left: 2%;
top: 10%;
border: 1px black;
}
@media (max-width:400px) {
.quiz-box {
background: #f9f9f9;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 20px;
text-align: center;
height: 70vh;
width: 100vw;
position: absolute;
top: 50%;
left: 0;
font-size: 2rem;
border: 3px black;
}
.quiz-btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
position: absolute;
top: 45%;
left: 0;
font-size: 1.5rem;
width: 40vw;
}
.quiz2-btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
position: absolute;
top: 45%;
left: 45%;
font-size: 1.5rem;
width: 40vw;
}
.quiz-box h2 {
font-size: 2rem;
}
.quiz-input {
display: block;
font-size: 2rem;
width: 100vw;
position: absolute;
top: 3%;
left: -8%;
text-align: center;
}
.stats {
margin-top: 20px;
font-size: 2rem;
position: absolute;
left: 0%;
top: 60%;
border: 1px black;
}
}
/*Podstrona it_tests.php*/
.backup_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/backup_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.backup_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.backup_branch:hover {
background-size: 120%;
cursor: pointer;
}
.backup_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.storage_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/storage_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.storage_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.storage_branch:hover {
background-size: 120%;
cursor: pointer;
}
.storage_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.virtualization_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/virtualization_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.virtualization_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.virtualization_branch:hover {
background-size: 120%;
cursor: pointer;
}
.virtualization_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.web_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/web_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.web_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.web_branch:hover {
background-size: 120%;
cursor: pointer;
}
.web_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.networking_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/networking_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.networking_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.networking_branch:hover {
background-size: 120%;
cursor: pointer;
}
.networking_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.cybersecurity_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/cybersecurity_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.cybersecurity_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.cybersecurity_branch:hover {
background-size: 120%;
cursor: pointer;
}
.cybersecurity_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.databases_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/databases_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.databases_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.databases_branch:hover {
background-size: 120%;
cursor: pointer;
}
.databases_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
.general_branch {
width: 35vw;
height: 30vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/general_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.general_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 30vh;
width: 35vw;
height: 30vh;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.general_branch:hover {
background-size: 120%;
cursor: pointer;
}
.general_branch h2:hover {
background-size: 120%;
cursor: pointer;
font-size: 3.2rem;
letter-spacing: 2px;
}
/* STRONA MOBILNA - it_tests.php */
@media (max-width:400px) {
.backup_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 100px;
background-image: url(../img/backup_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: .5s;
/* transform: translateX(-170%); */
}
.backup_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.storage_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/storage_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.storage_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.virtualization_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/virtualization_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.virtualization_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.web_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/web_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.web_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.networking_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/networking_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.networking_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.cybersecurity_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/cybersecurity_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 0.5s;
}
.cybersecurity_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.databases_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/databases_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.databases_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
.general_branch {
width: 100vw;
height: 20vh;
border: 2px solid white;
margin-top: 20px;
background-image: url(../img/general_pic.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
}
.general_branch h2 {
font-size: 2.8rem;
text-align: center;
text-transform: uppercase;
color: white;
font-weight: bold;
line-height: 20vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
transition: 1s;
}
}