You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

359 lines
4.8 KiB
CSS

@font-face {
font-family: "CothamSans";
src: url("./assets/fonts/CothamSans.otf");
}
@font-face{
font-family: "Sinistre";
src: url("./assets/fonts/Sinistre-StCaroline.woff");
}
@font-face {
font-family: "HKGrotesk";
src: url("./assets/fonts/HKGrotesk-Regular.woff");
}
:root{
font-family:"CothamSans";
--reg:4vw;
--tit:6vw;
--green:#00ff00;
--pink: #ff14d0;
}
* {
box-sizing: border-box;
}
html {
margin: 0;
scroll-behavior: smooth;
}
body {
margin: 0;
width: 300%;
z-index: 1000;
}
img{
width: 10%;
}
.container{
z-index: -100;
/* margin-bottom: 100vw; */
margin-left: -30% ;
/* margin-bottom: 1%; */
/* position: absolute; */
}
#img1{
animation: infinite cycle1 3s ;
/* margin-left: -40%; */
}
#img2{
animation: infinite cycle2 3s ;
margin-left: -30%;
margin-top: 5% */
}
#img3{
animation: infinite cycle3 3s ;
/* /* margin-top: -15%; */
margin-left: 10%; */
}
p, a{
font-size: var(--reg);
}
.texts{
margin: 1.5%;
}
.texts .left,.center,.right{
float: left;
width: 33%;
}
#eccezione{
width: 70%;
margin-left: 35% ;
}
.left{
text-align: left;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
#practical{
font-size: var(--tit);
color: var(--pink);
}
.left{
margin-top: -4%;
}
.left p{
padding: 20% 5%;
}
.center p{
padding: 20% 5%;
}
.right p{
padding: 20% 0 ;
}
.center{
/* margin-top: 28%; */
}
.right{
/* margin-top: 20% ; */
}
.left div{
display: flex;
justify-content: center;
align-items: center;
}
a{
color:var(--green);
/* text-decoration: underline; */
/* text-decoration-color: var(--pink); */
/* -webkit-text-decoration-color:var(--pink); */
text-shadow: 10px 10px 4px rgba(51, 255, 0, 0.1)
}
p{
text-shadow: 10px 10px 5px rgba(0,0,0, 0.1)
}
span2{
color:var(--pink);
text-shadow: 10px 10px 4px rgba(51, 255, 0, 0.1)
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
margin: 0 .5vw;
min-width: 10vw;
/* min-height: 2.5vw; */
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50px;
text-decoration: none;
margin-bottom: 1vw;
padding: .5vw 1vw;
box-shadow: 5px 5px 10px rgba(130, 130, 130, 0.7);
/* box-shadow: 5px 8px 30px var(--pink); */
}
.testa{
z-index: 100;
top: 1.5vw;
left: 1vw;
height: 0;
/* padding: 1vw; */
/* margin: 0; */
position: fixed;
/* display: flex;
-webkit-box-align: start;
align-items: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row; */
/*
height: 0;
box-sizing: border-box; */
}
#lefty{
color: var(--green);
}
button a{
font-family: "HKGrotesk";
text-decoration: none;
font-size: 1.5vw;
color: var(--pink);
}
#descriptio{
width: 13%;
margin: 5% 0 0 10%;
z-index: 20;
border: var(--pink) solid 3px;
background-color: rgba(255, 0, 242, 0.8);
box-shadow: 10px 10px 20px rgba(130, 130, 130, 0.7)
}
#descriptio p{
padding: 0 1vw;
font-size: 2vw;
color: white;
text-shadow: none;
}
#descriptio a{
padding: 0 1vw;
font-size: 2vw;
color: var(--green);
text-shadow: none;
}
#telegram{
width: 9%;
margin: 3% 0 0 20%;
z-index: 20;
border: var(--pink) solid 3px;
background-color: rgba(255,255,255, 0.9);
box-shadow: 10px 10px 20px rgba(255, 0, 242, 0.8);
}
#telegram p{
padding: 0 1vw;
font-size: 2vw;
color: var(--pink);
text-shadow: none;
}
#telegram a{
padding: 0 1vw;
font-size: 2vw;
color: var(--green);
text-shadow: none;
}
#descriptio button{
font-size: 1vw;
margin-top: 1vw;
/* text-align: center; */
color: var(--pink);
margin: 0 1vw 2vw 1vw;
}
#telegram button{
font-size: 1vw;
margin: 2vw 0 0 0;
/* text-align: center; */
color: var(--pink);
bottom: 1vw;
}
@keyframes cycle1 {
0% { transform: rotate(88deg); }
50% {transform: rotate(121deg); }
100% {transform: rotate(88deg);}
}
@keyframes cycle2 {
0% { transform: rotate(1deg)}
50% {transform: rotate(33deg)}
100% {transform: rotate(1deg);}
}
@keyframes cycle3 {
0% { transform: rotate(250deg)}
50% {transform: rotate(220deg)}
100% {transform: rotate(250deg);}
}
#links{
text-decoration: underline;
}
.pink{
color: var(--pink);
}
.lang, a3{
font-family: "Sinistre";
}
#randomTitle{
font-size: 7vw;
line-height: 1.5vw;
}
@media only screen and (max-width: 600px) {
.row{
width: 22%;
}
.right p{
padding: 80% 5%;
}
.center p{
padding: 80% 5%;
}
.left p{
padding: 80% 5%;
}
img{
width: 20%;
margin-left: 30%
}
#img3{
margin-left: 40%
}
.container{
margin-left: 0 ;
}
#eccezione{
width: 70%;
margin-left: 20% ;
}
}