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.

231 lines
3.6 KiB
CSS

* {
box-sizing: border-box;
}
@font-face {
font-family: "CothamSans";
src: url("./assets/fonts/CothamSans.otf");
}
@font-face {
font-family: "Mazius";
src: url("./assets/fonts/MAZIUSREVIEW20.09-Extraitalic.woff");
}
@font-face {
font-family: "Porpora";
src: url("./assets/fonts/Porpora-Regular.woff");
}
@font-face {
font-family: "Sinistre";
src: url("./assets/fonts/Sinistre-StCaroline.woff");
}
@font-face {
font-family: "HKGrotesk";
src: url("./assets/fonts/HKGrotesk-Regular.woff");
}
@font-face {
font-family: "HKGrotesk-Light";
src: url("./assets/fonts/HKGrotesk-Light.otf");
}
@font-face {
font-family: "wftfs-Regular";
src: url("./assets/fonts/wftfs-Regular.otf");
}
:root{
font-family: "HKGrotesk";
--regular: 16px;
--focus: 24px;
--focus2: 48px;
--title: 150px;
--footnote: 14px;
--subtitle: 32px;
--inl-reg: 20px;
--inl-foot: 14px;
--pink: #ff1493;
--green: #0DF46F;
--green-tit: #0DF46F80;
}
html, body {
margin: 0;
padding: 0;
max-width: 100%;
min-height: 100vh;
}
button{
z-index: 20000;
}
img{
width: 30%;
}
div{
align-self: center;
justify-self: center;
}
.container{
display: grid;
z-index: -100;
justify-items: center;
grid-template-columns: auto auto auto;
justify-content: center;
margin-left: 50%;
}
#img1{
animation: infinite cycle1 3s;
margin-left: 50%;
}
#img2{
animation: infinite cycle2 3s;
}
#img3{
animation: infinite cycle3 3s ;
}
#descriptio{
width: 30%;
margin-left: 60%;
z-index: 20;
border: var(--green) solid 3px;
background-color: rgba(0,255,0,.05);
}
#descriptio p {
padding: 0 1vw;
color: var(--green)
}
#tradu{
width: 30%;
margin-left: 60%;
z-index: 20;
border: var(--green) solid 3px;
background-color: rgba(0,255,0,.05);
text-align: right;
margin-right:50px;
}
#tradu span{
line-height: 27px
}
#tradu .pico{
font-size:var(--regular);
font-family: "Sinistre";
}
#tradu .primo{
color: var(--green);
font-family: "Mazius";
font-size:var(--focus2);
}
#tradu .secondo{
color: var(--purple);
font-size:var(--focus2);
font-family: "Porpora";
}
#telegram{
text-align: right;
border: var(--pink) solid 3px;
background-color: rgba(250,20,150,.05);
width: 30%;
margin-left: 60%;
margin-top: 30%;
z-index: 20;
}
#telegram p a{
font-size: var(--focus);
line-height: 80px;
text-align: right;
margin-right: 200px;
padding: 1vw;
}
#telegram p{
color: var(--pink);
font-size:var(--regular);
line-height: 20px;
margin:0;
padding-left: 20px
}
#telegram:nth-child(0){
color: var(--pink);
font-size: 100px;
line-height: 48px;
}
#telegram .link{
font-size: var(--focus);
color: var(--green);
margin: 24px 0
}
#telegram span{
font-size:var(--focus);
color: var(--purple);
font-family: "Sinistre"
}
#telegram i {
font-family: "HKGrotesk-Light";
font-size:var(--focus);
color: var(--purple);
}
#telegram .v{
color: var(--green)
}
@keyframes cycle1 {
0% { transform: rotate(88deg); margin-left: 50%;}
50% {transform: rotate(121deg); margin-left: 50%;}
99% {transform: rotate(88deg); margin-left: 50%;}
}
@keyframes cycle2 {
0% { transform: rotate(1deg)}
50% {transform: rotate(33deg)}
99% {transform: rotate(1deg);}
}
@keyframes cycle3 {
0% { transform: rotate(185deg)}
50% {transform: rotate(151deg)}
99% {transform: rotate(185deg);}
}