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.
170 lines
2.9 KiB
CSS
170 lines
2.9 KiB
CSS
:root{
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
--background-color: white;
|
|
--regular: 1.5vw
|
|
}
|
|
|
|
body{
|
|
margin: 0 ;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-color: var(--background-color);
|
|
background-image: url('grid.png');
|
|
background-size: 8vw;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
header{
|
|
z-index: 80;
|
|
position: absolute;
|
|
text-align: center;
|
|
transform: rotate(-13deg);
|
|
font-size: 7vw;
|
|
color: rgb(227, 224, 240);
|
|
margin: 0 10%;
|
|
animation: cycle 1s linear ;
|
|
color: rgba(0,0,0,0);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
button{
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
display: inline-block;
|
|
padding: 0.5vw 1.3em;
|
|
color: blue;
|
|
font-size: var(--regular);
|
|
text-decoration: none;
|
|
margin-bottom: 1.5vw;
|
|
background-color: rgba(104, 96, 226, 0.164);
|
|
border-radius: 40px;
|
|
box-shadow: 3px 8px 20px rgba(78, 78, 219, 0.76);
|
|
}
|
|
|
|
nav{
|
|
z-index: 100;
|
|
padding: 1vw;
|
|
margin: 0;
|
|
position: fixed;
|
|
display: flex;
|
|
-webkit-box-align: start;
|
|
align-items: flex-start;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
color: blue;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#print{
|
|
color: red;
|
|
background-color: rgba(226, 96, 96, 0.164);
|
|
border-radius: 50px 4px;
|
|
box-shadow: 3px 8px 20px rgba(214, 29, 53, 0.76);
|
|
position: absolute;
|
|
bottom:1vw;
|
|
left:1vw;
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
.contents{
|
|
color: red;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
z-index: 110;
|
|
background-color: white;
|
|
box-shadow: 1px 3px 90px 20px rgba(4, 14, 70, 0.76) ;
|
|
border: blue 0.5vw;
|
|
width: 70vw;
|
|
height: 70vh;
|
|
margin-left: 10vw;
|
|
padding: 2vw;
|
|
|
|
}
|
|
|
|
.contents p{
|
|
text-align: justify;
|
|
text-justify: auto;
|
|
}
|
|
|
|
.contents h1, h2{
|
|
color: blue;
|
|
}
|
|
|
|
|
|
.legenda{
|
|
columns: 2;
|
|
padding: 0.3vw;
|
|
z-index: 170;
|
|
border: black dashed 0.3vw;
|
|
width: 15%;
|
|
height: 15%;
|
|
|
|
position:absolute;
|
|
bottom:1vw;
|
|
right:1vw;
|
|
}
|
|
|
|
|
|
ul{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-around;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
li{
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
font-size: 1vw;
|
|
/* align-content: stretch; */
|
|
|
|
}
|
|
|
|
p{
|
|
text-align: justify;
|
|
text-justify: auto;
|
|
color: #0000cd;
|
|
}
|
|
|
|
#column{
|
|
columns: 2;
|
|
column-gap: 35%;
|
|
}
|
|
|
|
#title{
|
|
height: 20vh;
|
|
}
|
|
|
|
|
|
|
|
@keyframes cycle {
|
|
0% { text-shadow: rgb(43, 98, 201) 10px 10px 20px;}
|
|
20% {color: darkblue;}
|
|
40% {text-shadow:darkblue 10px 10px 20px;}
|
|
60% {text-shadow: rgb(43, 98, 201) 10px 10px 200px;}
|
|
80% { color: rgba(227, 224, 240,0);}
|
|
90% {display: none; visibility: hidden;}
|
|
}
|
|
|