The website of the KaosCube
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

194 lines
2.9 KiB

* {
font-family: Montserrat, Ubuntu, Lucida Grande, Helvetica Neue, DejaVu Sans, FreeSans, Liberation Sans, Droid Sans, sans;
}
header {
align-items: center;
display: flex;
background-color: deeppink;
margin-bottom: 1vh;
}
/*
#h1 {
# font-size: 150%;
#}
#h2 {
# font-size: 120%;
#}
#p {
# font-size: 75%;
#}
*/
footer{
color: darkgray;
font-size: 3vw;
}
.banner {
background-image: url("static/tresorImAll.webp");
width: 100%;
height: 90vh;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.withinBanner {
display:inline-block;
}
.linkContainer {
display: grid;
grid-template-columns: auto auto auto auto;
width: 100%;
}
.pLink {
font-size: 4vh;
color: white;
}
.bannerHeader {
font-size: 9vh;
color: black;
}
.bannerSubtext {
font-size: 6vh;
color: black;
}
.glow {
color: #fff;
text-align: center;
text-shadow: 0 0 20px #e60073;
}
/*
.glow {
color: #fff;
text-align: center;
text-shadow: 0 0 20px #e60073;
#animation: glow 1s ease-in-out infinite alternate;
}
*/
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
}
}
@media screen and (max-width: 400px) {
[class*="bannerHeader"] {
font-size: 7vh;
color: #fff;
}
.bannerSubtext {
font-size: 4vh;
color: #fff;
}
[class*="infoImgDiv"] {
grid-row-start: 1;
grid-row-end: 1;
justify-content: center;
justify-self: center;
display: flex;
}
[class*="infoDiv"] {
grid-row-start: 2;
grid-row-end: 2;
}
.infoContainer {
margin-left: 10vw;
margin-right: 10vw;
display: grid;
}
[class*="infoImg"] {
width: 60vw;
grid-row-start: 1;
}
.linkContainer {
grid-template-columns: auto auto;
}
[class*="info"] {
font-size: 8vw;
}
.infoDiv {
display: grid;
width: 80vw;
text-align: left;
justify-content: center
justify-self: none;
}
.infoHeader {
font-size: 10vw;
margin-top: 5vw;
margin-bottom: 0vw;
color: deeppink;
}
.grid-container {
display: grid;
grid-template-columns: auto;
}
[class*="model"] {
height: 40vh;
width: 90vw;
}
[class*="model1"] {
height: 40vh;
width: 90vw;
}
}
@media screen and (min-width: 400px) {
.info {
font-size: 2vw;
}
.infoDiv {
display: grid;
width: 50vw;
text-align: justify;
justify-content: center
justify-self: none;
}
.infoImg {
width: 30vw;
}
.infoContainer {
margin-left: 10vw;
margin-right: 10vw;
display: grid;
grid-template-columns: auto auto;
}
.infoImgDiv {
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
justify-self: none;
}
.infoHeader {
font-size: 3vw;
margin-top: 5vw;
margin-bottom: 0vw;
color: deeppink;
}
}