SI13/PRACTICAL_VISION/printing/style.css

* { 
    box-sizing: border-box; 
    scroll-behavior: smooth;
} 
 

.row{
    margin: 10% 15%
  }

  
body { 
    width: 100%;
    /* margin: 0;  */
    height: 100%;
    padding: 0;
} 

.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{
    font-family: "HKGrotesk";


    --regular: 1.5vw;
    --focus: 2vw;
    --focus2: 4.5vw;
    --title: 10vw;
    --footnote: 1vw;
    --subtitle: 5vw;
    
    --inl-reg: 1.5vw;
    /* --inl-foot: 14px; */

    --purple: #ff14d0; 
    --green:  #0F0;
    --green-tit:  rgb(0,0,0,0.8)
}

.barsa{
    color: var(--green);
    font-size: var(--focus); 
    line-height: 2vw; 
    position: absolute; 
    margin-top: 10vw;
}

#title{
    margin: 5vw 0 4vw 0;
    line-height: 1.5vw;    
}

.jola, .jola2{
    line-height: 1vw;
    font-family: "Sinistre";
    color: var(--purple);
    font-size: var(--title);
    margin-left: 12vw;
}

.jola2{
    margin-left: 20vw;
    color: var(--purple);
}

.eng, .eng2{
    line-height: 2vw;
    font-family: "CothamSans";
    font-size: var(--title);
    color: var(--green-tit)
}
.eng2{
    margin-left: 7.5vw;
}

img{
    width: 60%;
    display: absolute;
}

.column {
    float: left;
}

.right{
    width: 30%;
    margin-right: 2vw
}

.right p{
    font-size: var(--focus);
    color: var(--green);
    text-align: right;
}

.right p,a{  
    margin: 55% 0;
    line-height: 2vw; 
}


.right a{
    font-size: 1.5vw;
    color: var(--green);
    margin-left: 4vw ;
}

.left{
    width: 65%;
}


.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:2vw;
    margin-left: 2vw
}

li{
    color: var(--green);
}


#body{
    position: absolute;
}

#supra{
    /* width:297mm; */
}

#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{
    text-align: left;
    font-size: var(--regular);
    color: var(--purple);
}


p2{
    color: var(--green);
    font-size: var(--subtitle);
    font-family: "CothamSans";
    margin: 0;
    line-height: 4.5vw;
    text-align: justify;
    text-justify: inter-word;
    text-transform: uppercase;
}

#tweetQuote{
    color: var(--green);
    font-style: italic;
    line-height: 5vw;
    font-size: 2vw;
}

a{
    /* text-decoration: none; */
    color: var(--green);
    text-align: left
}

a:visited{
    text-decoration: none;
    }

.language{    
    font-family: "Sinistre";
}

#tradu{
    text-align: right;
    margin-right:1vw;
    transform: rotate(3deg);    
}

#tradu span{
    line-height: 2vw
}

#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: .5vw;
    width:130%;
    margin-left: 2vw

}

.telegram .tito{
    color: var(--purple);
    font-size:var(--focus2);
        line-height: 4.2vw;
}

.telegram p a{
    font-size: var(--focus);
    line-height: 20vw;
    text-align: right;
    /* margin-right: 10vw */
}
.telegram p{
  color: var(--purple);
font-size:var(--regular);
line-height: 1.5vw;
    margin:0;
    padding-left: 1vwx
}

.telegram .link{
    font-size: var(--focus);
        color: var(--green);
    margin: 3vw 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: 1.5vw
}

.glyph{
    text-decoration: none;
}

.glyph:hover{
    color: #0F0;
    -webkit-filter: blur(1px);
    filter: blur(1px);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
      -o-transition: all .2s ease;
     -ms-transition: all .2s ease;
         transition: all .2s ease;

}






#ss1{
    animation: giragira1 1s infinite;
}

#ss2{
    animation: giragira2 1s infinite;
}




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);  */
  }

  #lefty{
    color: var(--green);
  }
  
  
  .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; */
  }

  a button{
    /* font-family: "CothamSans"; */
    text-decoration: none;
    font-size: 1.5vw;
    color: var(--purple);
  }

.credit span,a{
    color: var(--green);
}


@media only screen and (max-width: 600px) {
    .row{
        margin: 15% 0
      }
    
    .column{
        margin-top: 1%
    }
    

      :root{
        --regular: 2vw;
        --focus: 2vw;
        --focus2: 4.5vw;
        --title: 15vw;
        --footnote: 1vw;
        --subtitle: 5vw;
        
        --inl-reg: 2vw;
      }

      #focus-infograph-r{
          width: 80%;
      }
    
    #title{
        line-height: 6.5vw
    }
    
    .jola{
       margin-left: 24vw
    }
    
    .jola2{
        margin-left: 30vw
    }

      .telegram{
        text-align: right;
        border: var(--green) solid 3px;
        padding: .5vw;
        width:100%;
        margin-left: 2vw
    }

    .telegram p{
        line-height: 2vw;
    }

    button{
        min-width: 22vw;
    }
}





@keyframes giragira1{
    0% {transform: rotate(185deg);}
    50%{transform: rotate(195deg);}
    100% {transform: rotate(185deg);}
}

@keyframes giragira2{
    0% {transform: rotate(350deg);}
    50%{transform: rotate(360deg);}
    100% {transform: rotate(350deg);}
}