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.

236 lines
3.0 KiB
CSS

@font-face {
font-family: "CothamSans";
src: url("../assets/fonts/CothamSans.otf");
}
:root{
font-family:"CothamSans";
--reg:4vw;
--tit:6vw;
--green:#00ff00;
--pink:#ff00d9;
}
* {
box-sizing: border-box;
}
html {
margin: 0;
scroll-behavior: smooth;
}
body {
margin: 0;
width: 300%;
z-index: 1000;
}
img{
width: 15%;
position: absolute;
}
#container{
}
#img1{
/* animation: infinite cycle1 3s ; */
margin-left: 50%;
}
#img2{
/* animation: infinite cycle2 3s ; */
margin-left: 30%;
margin-top: 30%
}
#img3{
/* animation: infinite cycle3 3s ; */
margin-top: 30%;
margin-left: 70%
}
p, a{
font-size: var(--reg);
}
.texts{
margin: 1.5%;
}
.texts .left,.center,.right{
float: left;
width: 33%;
}
.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: 50% ;
}
.left div{
display: flex;
justify-content: center;
align-items: center;
/* border: red solid 3px; */
/* margin-top: 50%; */
/* position: absolute÷; */
/* margin-top:-50% */
}
#descriptio{
width: 10%;
/* margin-left: 60%; */
z-index: 20;
border: var(--pink) solid 3px;
background-color: rgba(255, 0, 242, 0.5);
}
#descriptio p{
padding: 0 1vw;
font-size: 40px;
color: white
}
#descriptio > a{
padding: 0 1vw;
font-size: 40px;
color: var(--pink)
}
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(--green);
text-shadow: 10px 10px 4px rgba(51, 255, 0, 0.1)
}
.testa{
position: fixed;
display: flex;
flex-direction: column;
/* font-size: 3px; */
width: 10%;
/* margin-left: 5%; */
margin: 10px 0
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
margin: .3vw 1vw;
padding: .5vw;
min-width: 8vw;
min-height: 2.5vw;
background-color: rgb(255);
border-radius: 40px;
box-shadow: 5px 8px 30px var(--pink);
}
.testa button:nth-child(2){margin-bottom: 30vh;}
button a{
font-family: "CothamSans";
text-decoration: none;
font-size: .8vw;
color: var(--pink)
}
@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);}
}