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.

166 lines
2.9 KiB
CSS

@font-face {
font-family: WonderType Regular;
src: url("fonts/WonderType-Regular.otf") format("opentype"),
}
@font-face {
font-family: ApfelGrotezk Regular;
src:
url("fonts/ApfelGrotezk-Regular.otf") format("opentype"),
url("fonts/ApfelGrotezk-Regular.woff") format("woff");
}
body{
background-color: #c5ff26;
}
h1{
font-family: WonderType Regular;
font-size: 4rem;
left: 0rem;
top: 0rem;
z-index: 2;
padding-top: 0.5rem;
padding-left: 2rem;
line-height: 3.8rem;
}
h2{
font-family: ApfelGrotezk Regular;
font-size: 1.5rem;
top: 0rem;
left: 0rem;
position: fixed;
padding-top: 1rem;
padding-left: 2rem;
rotate: 90deg;
width: 99vw;
height: 95vw;
}
h3{
font-family: ApfelGrotezk Regular;
font-size: 1.5rem;
position: fixed;
top: 90vh;
left: 0rem;
padding-left: 2rem;
}
h4{
font-family: ApfelGrotezk Regular;
font-size: 1.5rem;
position: fixed;
top: 90vh;
right: 0rem;
padding-right: 2rem;
}
.intro{
font-family: ApfelGrotezk Regular;
font-size: 1.5rem;
left: 0rem;
top: 0rem;
position: absolute;
padding-top: 15rem;
padding-left: 2rem;
width: 50%;
}
.down{
font-size: 2rem;
position: absolute;
top: 92vh;
left: 0rem;
padding-left: 50vw;
}
.down:hover{
color: whitesmoke;
transition-duration: 3s;
}
#map {
position: absolute;
top: 150vh;
left: 0;
width: 100vw;
height: 100vh;
}
#map1{
position: absolute;
left: 0;
top: -100px;
/* top: 110vh; */
/* left: 0rem; */
width: 100%;
height: 70%;
}
button{
text-decoration: none;
background-color: transparent;
border: none;
}
.container{
position: absolute;
z-index: 1;
/* top: 190vh; */
left: 5rem;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a a b b c c d d"
"a a b b c c d d"
"e e f f g g h h"
"e e f f g g h h";
/* display: flex;
justify-content: space-evenly; */
width: 89vw;
/* height: 90vh; */
/* align-items: stretch; */
/* background-color: blanchedalmond; */
/* opacity: 50%; */
font-family: WonderType Regular;
font-size: 2rem;
color: whitesmoke;
}
.item1 {
grid-area: a;
align-self: end;
}
.item2 {
grid-area: b;
align-self: start;
}
.item3 {
grid-area: f;
align-self: start;
justify-self: end;
}
.item4 {
grid-area: h;
align-self: start;
}
.item5 {
grid-area: g;
align-self: end;
justify-self: end;
}
.item6 {
grid-area: c;
align-self: end;
justify-self: end;
}
.item7 {
grid-area: h;
align-self: end;
justify-self: end;
}
a{
text-decoration: none;
color: white;
}
.container a:hover{
color: #c5ff26;
transition-duration: 2s;
}
.extra{
color: #c5ff26;
font-family: ApfelGrotezk Regular;
font-size: 1rem;
line-height: 1rem;
top: 0rem;
}