waifuism.life
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.
 
 
 
waifuism/home/grimoire/styles.css

171 lines
2.9 KiB

html {
height: 100%;
width: 100%;
font-family:rotunda;
background-color: #0d1030;
--accentcolor:#0e0eac;
--accentcolordark: #050768;
--accentcolor2: #121d92;
--bordercolor:black;
--header-border:white;
--bgcolor:rgb(0, 0, 0);
--gapsize: 10px;
color: whitesmoke;
}
@font-face {
font-family: rotunda;
src: url(./static/Designer-Notes-Bold.ttf);
}
@font-face {
font-family: friendolin;
src: url(./static/Friedolin.ttf);
}
.maindiv {
width:70vw;
height: 90vb;
margin:auto;
}
.header {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
height:10vb;
background-color:var(--bgcolor);
background-image:url(./static/bg.png);
background-size:cover;
background-position:center;
margin-bottom:var(--gapsize);
}
.bar {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
background-color:var(--bgcolor);
margin-bottom: var(--gapsize);
text-align:center;
padding-top:7px;
padding-bottom:7px;
}
h3 {
margin:0px;
color: #050768;
}
p {
margin:0px;
color: #6464e8;
}
h1 {
font-family:rotunda;
font-size:50px;
margin:5px;
margin-left:10px;
position:relative;
top:20px;
filter: drop-shadow(0px 0px 5px var(--accentcolor));
}
.row {
display:flex;
gap:var(--gapsize);
height:auto;
}
.navigation {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
background-color:var(--bgcolor);
text-align:center;
box-sizing: border-box;
width:25%;
height:auto;
}
.titlebar {
background-color: var(--accentcolor);
border-bottom:2px solid var(--accentcolordark);
padding:4px;
}
.buttonholder {
padding-left:10px;
padding-right:10px;
overflow-y:auto;
height:70vb;
}
.navigationbutton {
margin:5px;
padding:5px;
border:2px solid var(--bordercolor);
background-color: var(--accentcolor2);
}
h4 {
margin:0px;
color: #0e0eac;
}
a {
color: var(--accentcolor);
}
.box1 {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
background-color:var(--bgcolor);
box-sizing: border-box;
padding:10px;
width:100%;
height:60vb;
overflow-y:auto;
}
.bigtext {
font-size:large;
font-weight:bold;
}
strong {
color:var(--accentcolordark);
}
.box2 {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
background-color:var(--bgcolor);
box-sizing: border-box;
padding:10px;
width:100%;
height:80px;
}
.column {
display:flex;
flex-wrap:wrap;
gap:10px;
}
.footer {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
background-color:var(--bgcolor);
margin-top:var(--gapsize);
box-sizing: border-box;
padding:10px;
width:100%;
text-align: center;
}