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.

375 lines
6.1 KiB
CSS

@font-face {
font-family: points;
src: url(../fonts/AC1-SemiLightDots.ttf);
}
@media screen and (max-width: 700px) {
.onlyMobile {
background-color: red;
display: inline;
}
}
body {
max-width: 100vw;
height: 100vh;
background-color: #2f6bdd;
color: white;
font-family: "Courier New", Courier, monospace;
padding: 0;
margin: 0;
cursor: url(https://www.dropbox.com/s/u76wca3a4weldmu/cursor%20black.png?raw=1),
auto;
overflow: auto !important;
background-image: radial-gradient(currentColor 1px, transparent 1px),
radial-gradient(currentColor 1px, transparent 1px);
background-size: calc(20 * 1px) calc(20 * 1px);
background-position: 0 0, calc(10 * 1px) calc(10 * 1px);
}
h1 {
font-family: points;
font-size: 40px;
color: white;
margin-top: 8px;
}
.innerLink {
text-decoration: none;
}
.draggable {
display: none;
position: absolute;
background: black;
-webkit-box-shadow: 0px 10px 13px -7px #000000,
5px 5px 15px 5px rgba(0, 0, 0, 0.49);
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0.49);
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
}
.draggable p,
.draggable li,
.draggable ul {
color: white;
list-style: none;
}
.draggable li::before {
content: "💾 ";
}
.resizable {
width: 350px;
height: 650px;
padding: 0.5em 1.5em;
}
.resizable p {
font-size: 18px;
}
.resizable h1 {
font-size: 35px;
}
.closable {
position: absolute;
top: 6px;
right: -2px;
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
width: 38px;
color: #00fd00;
border: none;
font-size: 18px;
}
.hover {
font-weight: bolder;
}
.icon:hover {
font-size: 35px;
}
#bar {
z-index: 110;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 5%;
border: solid 2px white;
background-color: rgba(19, 19, 156, 0.9);
}
#colophon {
margin: auto;
width: 50%;
/* position: fixed; */
z-index: 101;
background-color: white;
color: black;
border: solid 2px blue;
display: none;
position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
}
#colophon h1 {
color: blue;
}
.bottoneCose {
width: 10%;
height: 100%;
}
.bottoneCose:active {
background-color: rgb(113, 113, 226);
}
.clicked {
background-color: white;
color: blue;
}
.visible {
display: inline;
}
.corpi {
padding: 15px;
min-width: 200px;
border-radius: 6px;
border: 2px yellow solid;
}
#program {
min-width: 180px;
max-width: 250px;
height: 1400px;
}
#collectiveioning {
min-width: 320px;
}
/* ICONS NAVIGATION */
#icons {
width: 45%;
}
.iconContainer {
display: inline-block;
margin: 10px;
padding: 5px;
position: relative;
text-align: center;
border-radius: 6px;
}
.iconContainer:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.iconContainer a {
color: white;
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
}
.iconContainer a:hover {
color: white;
}
.iconContainer a:visited {
color: white;
}
.iconContainer a p {
margin: 0;
padding: 0;
}
.icon {
width: 70px;
height: 70px;
border: none;
z-index: 1;
font-size: 30px;
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
}
.icon:hover {
font-size: 30px;
}
button {
padding: 0;
margin: 0;
display: inline-block;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
}
.textIcon {
margin-top: -20px;
font-weight: medium;
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
}
/* FOOTER & COLOPHON*/
.bottoneCose {
user-select: none;
display: inline-block;
padding: 3px 1em;
color: currentColor;
font-weight: var(--bold);
text-decoration: none;
margin-bottom: 4px;
background-color: rgba(0, 0, 0, 0);
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
auto !important;
}
.colophonWrapper {
margin-left: 20px;
}
#colophon {
padding: 40px;
}
#colophonGreetings {
background-color: yellow;
padding: 5px;
}
#lastColophonWrapper {
margin-bottom: 0px;
}
/* GENERAL MODIFIERS */
.onlyMobile {
display: none;
}
/* MEDIA QUERIES */
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 700px) {
.onlyMobile {
background-color: red;
display: inline;
}
body {
font-size: 16px;
}
h1 {
font-size: 30px;
}
ul {
padding-left: 0;
}
#icons {
width: 100%;
}
.iconContainer {
display: inline-block;
margin: -1px;
padding: 5px;
position: relative;
text-align: center;
border-radius: 6px;
transform: scale(0.8);
}
.corpi {
min-width: unset !important;
max-width: unset !important;
width: 70% !important;
height: auto !important;
top: unset !important;
right: unset !important;
left: unset !important;
/* border: unset !important; */
/* display: inline-block !important; */
display: block !important;
position: initial;
cursor: unset !important;
/* border-radius: unset !important; */
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
z-index: 0 !important;
}
.closable {
display: none;
}
#program {
text-align: center;
}
/* #program {
min-width: unset !important;
max-width: unset !important;
width: 95% !important;
height: auto !important;
top: unset !important;
right: unset !important;
left: unset !important;
border: unset !important;
} */
/* FOOTER */
#bar {
text-align: center;
}
.bottoneCose {
width: unset;
}
#colophon {
background-color: white;
width: -moz-available;
position: fixed;
top: 0;
text-align: center;
height: 100vh;
overflow-y: auto;
padding: 10px;
transform: unset;
display: unset;
left: unset;
}
#colophon h1 {
font-size: 28px;
}
.colophonWrapper {
margin-left: 0px;
}
#lastColophonWrapper {
margin-bottom: 100px;
}
}