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.

371 lines
5.4 KiB
CSS

* {
box-sizing: border-box;
}
html {
/* width: 100%; */
/* min-height: 100%; */
}
body {
/* margin-top:10%; */
margin: 0;
padding: 0;
margin-left: 2cm;
}
.row:after {
content: "";
display: table;
clear: both;
}
@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{
/* --porpora: font-family: "Porpora";
--sinistre: font-family: "Sinistre";
--cotham: font-family: "CothamSans"; */
font-family: "HKGrotesk";
--regular: 16px;
--focus: 24px;
--focus2: 48px;
--title: 150px;
--footnote: 14px;
--subtitle: 32px;
--inl-reg: 20px;
--inl-foot: 14px;
--purple: #ff1493;
--green: #0DF46F;
--green-tit: #0DF46F80;
}
.barsa{
color: var(--green);
font-size: var(--focus);
line-height: 26px;
position: absolute;
margin-top: 160px;
}
#title{
margin: 60px 0 70px 0;
line-height: 10px;
}
.jola, .jola2{
line-height: 0.2px;
font-family: "Sinistre";
color: var(--purple);
font-size: var(--title);
margin-left: 350px;
}
.jola2{
margin-left: 500px;
color: var(--purple);
}
.eng, .eng2{
line-height: 70px;
font-family: "CothamSans";
font-size: var(--title);
color: var(--green-tit)
}
.eng2{
margin-left: 105px;
}
img{
width:200px;
display: absolute;
/* margin: 5% 20% ; */
}
.column {
float: left;
/* height: 10000px; */
}
.right{
/* display: flex;
flex-direction: column;
align-content: space-between;
align-content: space-evenly;
list-style: none; */
width: 390px;
margin-right: 0
/* height: 100%; */
}
.right p{
font-size: var(--focus);
color: var(--green);
text-align: right;
}
.right p,a{
margin: 75px 10px;
line-height: 24px;
}
.right a{
font-size: 16px;
color: var(--green);
margin-left: 150px;
}
.left{
width: 730px;
/* height: 100%; */
}
.left p{
color: var(--purple);
font-size: var(--regular);
line-height: var(--inl-reg)
}
.left a{
text-decoration: none;
color: var(--purple);
line-height: var(--inl-reg)
}
ol{
font-size:30px;
margin-left: 40px
}
li{
color: var(--green);
}
#body{
/* max-width: 100%; */
position: absolute;
}
#supra{
width:297mm;
/* height: 417mm; */
/* margin:auto; */
}
#footnoteone, #footnotetwo{
color: var(--green);
font-size: var(--regular);
line-height: var(--inl-reg);
}
#footnoteone-r, #footnotetwo-r{
color: var(--purple);
font-size: var(--footnote);
line-height: var(--inl-foot);
}
.footnote p{
color: var(--green);
font-size: var(--footnote);
line-height: var(--inl-foot);
}
.credit{
/* margin-left: 0.8cm; */
text-align: left;
font-size: var(--regular);
color: var(--purple);
}
.credit span{
color: var(--green);
}
p2{
color: var(--green);
font-size: var(--subtitle);
font-family: "CothamSans";
/* font-family: "Mazius"; */
/* font-family: "Porpora"; */
/* font-family: "HKGrotesk"; */
margin: 0;
line-height: 40px;
text-align: justify;
text-justify: inter-word;
text-transform: uppercase;
}
#tweetQuote{
color: var(--green);
/* margin-left: 10%; */
font-style: italic;
line-height: 60px;
font-size: 24px;
}
a{
text-decoration: none;
color: var(--green);
text-align: left
}
.language{
font-family: "Sinistre";
}
#tradu{
text-align: right;
margin-right:50px;
transform: rotate(3deg);
}
#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(--green) solid 3px;
padding:8px;
width:350px;
margin-left: 30px
}
.telegram .tito{
color: var(--purple);
font-size:var(--focus2);
line-height: 48px;
}
.telegram p a{
font-size: var(--focus);
line-height: 80px;
text-align: right;
margin-right: 200px
}
.telegram p{
color: var(--purple);
font-size:var(--regular);
line-height: 20px;
margin:0;
padding-left: 20px
}
.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)
}
.glyph{
font-family: "wftfs-Regular";
}
.glyph span{
font-size: 20px
}