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.
1382 lines
19 KiB
CSS
1382 lines
19 KiB
CSS
:root {
|
|
--main: black;
|
|
--second: white;
|
|
}
|
|
|
|
@keyframes spastico {
|
|
from {
|
|
background-color: var(--main);
|
|
}
|
|
|
|
to {
|
|
background-color: pink;
|
|
}
|
|
}
|
|
|
|
@keyframes spasticoName {
|
|
from {
|
|
color: var(--main);
|
|
}
|
|
|
|
to {
|
|
color: pink;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "ortica";
|
|
src: url("./fonts/OrticaLinear-Light.woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "vg";
|
|
src: url("./fonts/VG5000-Regular.otf");
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.transition svg {
|
|
width: 60px;
|
|
}
|
|
|
|
.transition {
|
|
transition: 1.2s;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
padding: 0;
|
|
height: 100vh;
|
|
margin: 0;
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-family: "ortica";
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1 {
|
|
font-family: "vg";
|
|
}
|
|
|
|
img{
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
.start {
|
|
width: 100%;
|
|
z-index: 100;
|
|
top: 5rem;
|
|
|
|
}
|
|
|
|
.start a {
|
|
font-size: 6rem;
|
|
}
|
|
|
|
.column {
|
|
width: 10%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 100%;
|
|
}
|
|
|
|
.two {
|
|
padding: 0 0.5rem;
|
|
padding-top: 200rem;
|
|
}
|
|
|
|
.categories {
|
|
right: 2rem;
|
|
|
|
width: min-content !important;
|
|
float: right;
|
|
-webkit-text-stroke: 1px black !important;
|
|
padding-top: 5px;
|
|
position: sticky;
|
|
display: flex;
|
|
z-index: 100;
|
|
justify-content: space-between;
|
|
text-decoration: none;
|
|
top: 10% !important;
|
|
}
|
|
|
|
.categories a:hover {
|
|
color: var(--main) !important;
|
|
}
|
|
|
|
#name {
|
|
align-items: center;
|
|
display: flex;
|
|
/* font-family: 'lineal'; */
|
|
left: 0;
|
|
position: absolute;
|
|
color: var(--main);
|
|
}
|
|
|
|
.menu a {
|
|
/* -webkit-text-stroke: var(--second) .2px; */
|
|
color: var(--main);
|
|
}
|
|
|
|
a:hover {
|
|
-webkit-text-stroke: var(--main) 1px;
|
|
color: var(--second);
|
|
}
|
|
|
|
#name:hover {
|
|
animation: spasticoName 0.1s ease infinite;
|
|
}
|
|
|
|
.categories a {
|
|
color: var(--second) !important;
|
|
-webkit-text-stroke: var(--main) 1px;
|
|
}
|
|
|
|
.categories a,
|
|
.menu a {
|
|
font-family: "vg";
|
|
font-size: 2.5rem;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
justify-content: end;
|
|
z-index: 111;
|
|
display: flex;
|
|
gap: 3rem;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#name {
|
|
left: 2rem;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.head .menu {
|
|
position: fixed;
|
|
background-color: var(--second);
|
|
height: 10%;
|
|
}
|
|
|
|
/* .head{
|
|
height: 25%;
|
|
|
|
} */
|
|
#head {
|
|
background: var(--second);
|
|
/* position: fixed; */
|
|
}
|
|
|
|
.presentazione {
|
|
font-size: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
max-height: 80%;
|
|
}
|
|
|
|
.presentazione img {
|
|
width: 20%;
|
|
}
|
|
|
|
.element {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.left .element {
|
|
margin: 2rem 1rem 2rem 2rem;
|
|
}
|
|
|
|
.right .element {
|
|
margin: 2rem 2rem 2rem 1rem;
|
|
}
|
|
|
|
.overed {
|
|
text-align: center;
|
|
overflow-wrap: break-word;
|
|
position: absolute;
|
|
font-size: 3rem !important;
|
|
background-size: cover;
|
|
/* -webkit-background-clip: text; */
|
|
-webkit-text-fill-color: pink;
|
|
-webkit-text-stroke: 1px var(--main);
|
|
/* color: pink !important; */
|
|
/* font-family: 'lineal'; */
|
|
font-family: "vg";
|
|
text-decoration: none;
|
|
}
|
|
|
|
.element img {
|
|
width: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
height: 48vh;
|
|
}
|
|
|
|
.element a{
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
z-index: 99;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.instruction {
|
|
user-select: none;
|
|
position: relative;
|
|
width: fit-content;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#friends {
|
|
position: absolute;
|
|
|
|
display: none;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40%;
|
|
height: 100%;
|
|
background-color: black;
|
|
color: var(--second);
|
|
z-index: 222;
|
|
padding: 0 2%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#friends a{
|
|
color: var(--second) !important;
|
|
}
|
|
|
|
#closeMenu {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
border: var(--second) 1px solid;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#closeMenu:hover {
|
|
animation: spastico 0.1s ease infinite;
|
|
}
|
|
|
|
ul{
|
|
list-style: none !important;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
#bio ul {
|
|
list-style: none;
|
|
padding: 30px;
|
|
}
|
|
|
|
#bio ul li {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/*
|
|
#friends {
|
|
border: solid 10px var(--main);
|
|
position: relative;
|
|
color: var(--main);
|
|
padding: 2%;
|
|
font-size: 2rem;
|
|
margin-top: 15rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
min-height: 50%;
|
|
}
|
|
|
|
#friends h1 {
|
|
color: var(--main) !important;
|
|
} */
|
|
|
|
.biotext {
|
|
width: 75%;
|
|
}
|
|
|
|
.biotext h1 {
|
|
text-align: left;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.biotext p {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#up {
|
|
color: var(--main) !important;
|
|
text-decoration: none !important;
|
|
text-align: right;
|
|
border: solid;
|
|
right: 2rem;
|
|
font-size: 10rem;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
right: 0;
|
|
}
|
|
|
|
#up:hover {
|
|
animation: spastico 0.1s ease infinite;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#up span {
|
|
height: 14rem;
|
|
}
|
|
|
|
/* #up span:hover{
|
|
height: 44rem;
|
|
} */
|
|
|
|
.sticky {
|
|
top: 0;
|
|
position: sticky;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--main);
|
|
text-align: center;
|
|
-webkit-text-stroke: var(--second) 0.2px;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
#head a:hover{
|
|
text-decoration-line: none;
|
|
|
|
} */
|
|
|
|
#bioN {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9000;
|
|
}
|
|
|
|
#bioN div {
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: start;
|
|
padding: 2rem;
|
|
width: 65%;
|
|
top: 10%;
|
|
height: 70%;
|
|
background-color: var(--main);
|
|
color: var(--second);
|
|
border: solid;
|
|
font-family: "murmure";
|
|
flex-direction: column;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
|
|
|
|
#egg {
|
|
border: solid var(--second) 1px;
|
|
}
|
|
|
|
#egg img {
|
|
filter: invert();
|
|
}
|
|
|
|
#egg:hover {
|
|
animation: spastico 0.1s ease infinite;
|
|
}
|
|
|
|
.closing {
|
|
background: var(--second) !important;
|
|
color: var(--main) !important;
|
|
border: solid;
|
|
position: absolute;
|
|
height: 50%;
|
|
top: 2rem;
|
|
left: 2rem;
|
|
font-size: 4rem;
|
|
cursor: pointer;
|
|
width: min-content !important;
|
|
}
|
|
|
|
svg {
|
|
fill: var(--main);
|
|
}
|
|
|
|
#closeMenu svg {
|
|
fill: var(--second);
|
|
width: 15%;
|
|
}
|
|
|
|
#closeSvg {
|
|
fill: var(--second);
|
|
border: solid var(--second);
|
|
background-color: var(--main);
|
|
width: 15%;
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
height: 80%;
|
|
margin-top: 10%;
|
|
}
|
|
|
|
#closeSvg:hover {
|
|
fill: var(--main);
|
|
border: solid var(--main);
|
|
background-color: var(--second);
|
|
animation: spastico 0.1s ease infinite;
|
|
/* height: 75%;
|
|
width: 35%; */
|
|
}
|
|
|
|
#bio h1 {
|
|
color: var(--main) !important;
|
|
font-size: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
}
|
|
|
|
#toggle {
|
|
display: none;
|
|
}
|
|
|
|
.burger {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: flex;
|
|
gap: 2rem;
|
|
position: relative;
|
|
right: 2rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.desktop a,
|
|
.burger a,
|
|
.categories a {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
/* works */
|
|
|
|
.corpus {
|
|
display: flex;
|
|
}
|
|
|
|
.index {
|
|
width: 25%;
|
|
/* border-right: solid; */
|
|
left: 2rem;
|
|
position: relative;
|
|
top: 2rem;
|
|
line-height: 1.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.index.desktop {
|
|
flex-direction: column !important;
|
|
gap: 0.7rem;
|
|
align-items: first baseline;
|
|
}
|
|
|
|
.index a {
|
|
color: var(--main);
|
|
text-decoration: none;
|
|
break-after: always;
|
|
}
|
|
|
|
.index a:hover {
|
|
-webkit-text-stroke: unset;
|
|
text-decoration: line-through 5px pink;
|
|
}
|
|
|
|
.content {
|
|
width: 70%;
|
|
padding: 1rem;
|
|
height: 90vh;
|
|
overflow-y: scroll;
|
|
border-left: solid;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* scroll-behavior: smooth;
|
|
scrollbar-color: red;
|
|
scrollbar-width: 20px; */
|
|
}
|
|
|
|
.content h1 {
|
|
font-size: 2rem;
|
|
-webkit-text-stroke: unset;
|
|
}
|
|
|
|
.singlework {
|
|
width: 65%;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: white !important;
|
|
}
|
|
|
|
.text_content p {
|
|
font-size: 1rem;
|
|
padding: 0.5rem 3rem;
|
|
}
|
|
.text_content ul p{
|
|
padding: unset;
|
|
}
|
|
|
|
p{
|
|
font-family: 'ortica';
|
|
}
|
|
|
|
|
|
|
|
.selected {
|
|
background-color: var(--main);
|
|
color: var(--second) !important;
|
|
}
|
|
|
|
.selected:hover {
|
|
-webkit-text-stroke: unset !important;
|
|
}
|
|
|
|
.video_content {
|
|
width: 75%;
|
|
min-height: 50%;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
gap: 4rem;
|
|
width: 90%;
|
|
}
|
|
|
|
footer,
|
|
.index {
|
|
font-family: "vg";
|
|
}
|
|
|
|
#lang {
|
|
font-style: italic;
|
|
}
|
|
|
|
#fakeBackground {
|
|
display: none;
|
|
}
|
|
|
|
#modal {
|
|
display: none;
|
|
position: fixed;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 99999;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
top: 0;
|
|
}
|
|
|
|
|
|
#modal .swiper {
|
|
/* width: 75%; */
|
|
height: auto;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.site-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 1rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.element h1,
|
|
.element hr {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
#closemodal {
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: 3rem;
|
|
background-color: var(--main);
|
|
fill: var(--second);
|
|
width: 5%;
|
|
z-index: 9999999999999;
|
|
}
|
|
|
|
#closemodal:hover {
|
|
animation: spastico 0.1s ease infinite;
|
|
fill: var(--main);
|
|
}
|
|
|
|
.spastico {
|
|
width: 4% !important;
|
|
display: block;
|
|
height: 60%;
|
|
background-color: var(--second);
|
|
color: var(--main) !important;
|
|
border: solid;
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 5rem;
|
|
font-size: 4rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.animated {
|
|
animation: spastico 0.1s ease infinite;
|
|
}
|
|
|
|
svg.spastico:hover {
|
|
/* background: var(--main) !important;
|
|
color: var(--second) !important; */
|
|
animation: spastico 0.1s ease infinite !important;
|
|
/* fill: red; */
|
|
/* height: 40% !important; */
|
|
}
|
|
|
|
.mobile-title {
|
|
display: none;
|
|
}
|
|
|
|
.presentazione {
|
|
height: 700px;
|
|
max-height: 700px;
|
|
top: unset !important;
|
|
width: 700px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.slide {
|
|
width: 100%;
|
|
}
|
|
|
|
.swiper.presentazione {
|
|
/* width: 85%;
|
|
height: 70%;
|
|
top: 20%; */
|
|
border: var(--second) 1rem solid;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 3rem;
|
|
background: none;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
display: block;
|
|
width: 600px;
|
|
height: 600px;
|
|
border-radius: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
#modal .swiper-wrapper{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
#modal .swiper-slide img{
|
|
width: 90% !important;
|
|
max-height: 100% !important;
|
|
object-fit: contain !important;
|
|
height: 800px !important;
|
|
border-radius: unset !important;
|
|
object-fit: contain;
|
|
}
|
|
/* .swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 100% !important;
|
|
gap: 10rem;
|
|
background-color: transparent;
|
|
} */
|
|
|
|
.swiper-slide span {
|
|
color: var(--second);
|
|
background-color: var(--main);
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
width: 50%;
|
|
height: 100%;
|
|
top: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.text_content ul {
|
|
padding: 3rem;
|
|
}
|
|
|
|
marquee span {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
marquee span,
|
|
marquee a {
|
|
color: white;
|
|
font-family: 'ortica';
|
|
}
|
|
|
|
.burger {
|
|
display: none
|
|
}
|
|
|
|
.prefooter {
|
|
z-index: 10000;
|
|
background: var(--second);
|
|
width: 100%;
|
|
position: sticky;
|
|
height: 8%;
|
|
border-top: solid;
|
|
}
|
|
|
|
|
|
|
|
.prefooter marquee span {
|
|
color: black;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.prefooter a {
|
|
color: var(--main);
|
|
}
|
|
|
|
.prefooter a:hover {
|
|
color: pink;
|
|
-webkit-text-stroke: unset !important;
|
|
}
|
|
|
|
#work {
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.mobile{
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 1050px) {
|
|
|
|
/* .mobile{
|
|
margin-bottom: 5rem;
|
|
} */
|
|
|
|
body,
|
|
html {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
#modal{
|
|
align-items: center
|
|
/* unset !important; */
|
|
}
|
|
|
|
.element img{
|
|
height: unset
|
|
}
|
|
|
|
.overed{
|
|
display: none !important;
|
|
}
|
|
|
|
#work {
|
|
margin-bottom: 10%;
|
|
}
|
|
|
|
#fakeBackground {
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: none;
|
|
z-index: 110;
|
|
position: fixed;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
|
|
#bio {
|
|
z-index: 9999;
|
|
display: none;
|
|
}
|
|
|
|
.head {
|
|
height: 100%;
|
|
margin-top: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.menu {
|
|
gap: 1rem;
|
|
padding-top: unset;
|
|
justify-content: center;
|
|
right: unset;
|
|
top: 0 !important;
|
|
flex-direction: column;
|
|
margin-top: 0 !important;
|
|
/* TODO */
|
|
}
|
|
|
|
#bioN div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.element h1,
|
|
.element hr {
|
|
display: block;
|
|
}
|
|
|
|
.burger div:nth-child(1) {
|
|
margin: 0;
|
|
gap: 2rem;
|
|
display: flex;
|
|
}
|
|
|
|
.scrollbar::-webkit-scrollbar-track {
|
|
border-left: solid 2px;
|
|
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
|
|
background-color: var(--second);
|
|
}
|
|
|
|
.scrollbar::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: var(--second);
|
|
}
|
|
|
|
.scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: var(--main);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
|
|
#name {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
|
|
.burger a {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.categories a {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
#news {
|
|
display: flex;
|
|
align-items: center;
|
|
width: auto;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#bio {
|
|
left: 0;
|
|
position: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.biotext {
|
|
width: 80%;
|
|
font-size: 1.4rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.start {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
z-index: 0;
|
|
}
|
|
|
|
.mobile{
|
|
display: block;
|
|
}
|
|
|
|
.left,.right{
|
|
display: none;
|
|
}
|
|
|
|
.sticky {
|
|
/* top: 40%; */
|
|
position: unset;
|
|
}
|
|
|
|
#name {
|
|
position: unset;
|
|
}
|
|
|
|
.burger {
|
|
margin-left: 1rem;
|
|
position: absolute;
|
|
top: 5rem;
|
|
gap: 0;
|
|
display: none;
|
|
height: unset;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.burger div:nth-child(2) {
|
|
/* margin-left: 1rem; */
|
|
border: solid;
|
|
width: fit-content;
|
|
padding: 1rem;
|
|
overflow-y: scroll;
|
|
height: 20rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
#toggle {
|
|
display: block;
|
|
height: fit-content;
|
|
left: 82vw;
|
|
/* position: absolute; */
|
|
}
|
|
|
|
#toggle svg {
|
|
width: 3rem;
|
|
height: fit-content;
|
|
stroke: var(--main);
|
|
}
|
|
|
|
#up span {
|
|
height: unset;
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.categories {
|
|
z-index: 99;
|
|
flex-direction: row;
|
|
top: 5rem !important;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
/* height: 10%; */
|
|
top: unset !important;
|
|
|
|
background: var(--second);
|
|
/* position: absolute; */
|
|
}
|
|
|
|
.head img {
|
|
width: 55%;
|
|
}
|
|
|
|
.instruction {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.content {
|
|
border: none;
|
|
width: 100%;
|
|
/* height: unset; */
|
|
}
|
|
|
|
.video_content {
|
|
width: 100%;
|
|
min-height: 30%;
|
|
}
|
|
|
|
.text_content p {
|
|
padding: 1rem;
|
|
}
|
|
.text_content ul {
|
|
padding: 1rem;
|
|
}
|
|
.grid {
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.left .element,
|
|
.right .element, .mobile .element {
|
|
margin: 1rem 1rem;
|
|
}
|
|
|
|
.element h1 {
|
|
-webkit-text-stroke: unset;
|
|
}
|
|
|
|
.element hr {
|
|
width: 100%;
|
|
border: solid var(--main) 0.1px;
|
|
}
|
|
|
|
.closing {
|
|
height: 5rem !important;
|
|
width: 70% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center !important;
|
|
bottom: 2rem !important;
|
|
position: fixed;
|
|
top: unset !important;
|
|
}
|
|
|
|
.closing svg {
|
|
width: 55%;
|
|
}
|
|
|
|
.closing svg:hover {
|
|
fill: var(--second);
|
|
}
|
|
|
|
/* .list-friends {
|
|
flex-direction: column;
|
|
align-items: baseline !important;
|
|
} */
|
|
|
|
#friends {
|
|
display: none;
|
|
z-index: 1000000;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#modal {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
#modal .swiper {
|
|
width: 80%;
|
|
height: unset;
|
|
}
|
|
|
|
|
|
#closemodal {
|
|
left: 0;
|
|
width: 10%;
|
|
margin-left: 5%;
|
|
top: 2rem;
|
|
}
|
|
|
|
.spastico {
|
|
top: 8%;
|
|
width: 40% !important;
|
|
height: 5%;
|
|
}
|
|
|
|
#bioN {
|
|
width: 100%;
|
|
height: 107%;
|
|
position: fixed;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: start;
|
|
z-index: 9999999999999;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
#egg{
|
|
top: 12% !important;
|
|
}
|
|
#egg img {
|
|
width: 100%;
|
|
}
|
|
|
|
html {
|
|
height: unset;
|
|
}
|
|
|
|
.mobile-title {
|
|
display: block;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
width: 450px;
|
|
height: 450px;
|
|
}
|
|
|
|
.presentazione {
|
|
height: 500px;
|
|
max-height: 500px;
|
|
/* top: 15%; */
|
|
width: 500px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
#modal .swiper-slide img{
|
|
width: 90% !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-height: 700px) {
|
|
|
|
#modal .swiper-slide img{
|
|
width: 70% !important;
|
|
}
|
|
|
|
.burger div:nth-child(2) {
|
|
height: 10rem;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
|
|
.contact{
|
|
float: unset;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media only screen and (max-height: 600px) {
|
|
|
|
.swiper-slide img {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-height: 800px) {
|
|
|
|
.swiper-slide img {
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.presentazione {
|
|
height: unset;
|
|
max-height: unset;
|
|
/* top: 15%; */
|
|
width: unset;
|
|
/* border-radius: 100%; */
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
|
|
#bioN {
|
|
width: 113%;
|
|
height: 109%;
|
|
}
|
|
|
|
.burger {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.grid {
|
|
display: unset;
|
|
width: 100%;
|
|
}
|
|
|
|
.grid .slide {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.burger {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.burger div:nth-child(1) {
|
|
margin: 0;
|
|
gap: 1rem;
|
|
display: flex;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.video_content {
|
|
width: 100%;
|
|
}
|
|
|
|
.burger div:nth-child(2) {
|
|
margin-left: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
#work {
|
|
margin-bottom: 35%;
|
|
}
|
|
|
|
.prefooter {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
bottom: 5%;
|
|
padding: 2% 0;
|
|
height: auto
|
|
}
|
|
|
|
/* marquee span{
|
|
font-size: .7rem;
|
|
} */
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
background-color: var(--main);
|
|
color: var(--second);
|
|
display: flex;
|
|
height: 5%;
|
|
align-items: center;
|
|
/* padding-left: 2rem; */
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 20000;
|
|
}
|
|
|
|
footer p{
|
|
display: flex;
|
|
}
|
|
|
|
footer:hover {
|
|
/* background-color: pink; */
|
|
animation: spastico 0.1s ease infinite;
|
|
|
|
}
|
|
|
|
.swiper-wrapper {
|
|
/* height: unset !important; */
|
|
}
|
|
|
|
|
|
/* scrollbar style for chromium based */
|
|
|
|
.content::-webkit-scrollbar-track {
|
|
border: solid 1px;
|
|
background-color: var(--second);
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: var(--second);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb {
|
|
background-color: var(--main);
|
|
}
|
|
|
|
.contact{
|
|
float: right;
|
|
}
|
|
|
|
|
|
@media only screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 400px) {
|
|
|
|
.swiper-slide img {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
|
|
.head .menu {
|
|
height: 15%;
|
|
}
|
|
|
|
iframe{
|
|
width: 100%;
|
|
min-height: 70%;
|
|
}
|
|
|
|
.prefooter{
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
iframe{
|
|
width: 80%;
|
|
min-height: 50%;
|
|
} |