/* Put the root block at the very top of your CSS! */
:root{
	--imageintendedwidth:150px;
	--imageborderwidth:4px;
	--imagewidth:calc(var(--imageintendedwidth) - 2 * var(--imageborderwidth));
	--descpadding:3px;
	--descborderwidth:1px;
	--descwidth:calc(var(--imageintendedwidth) - 2 * (var(--descpadding) + var(--descborderwidth)));
}

/*Fonts*/
@font-face{
    font-family:alagard;
    src:url("fonts/alagard.ttf")
}
@font-face{
    font-family:kirb;
    src:url("fonts/kirb.ttf");
}
@font-face{
    font-family:dizpix;
    src:url("fonts/dizpix.ttf");
    
}
.alagard{
    font-family: alagard;
}
.kirb{
    font-family:kirb;
}
.dizpix{
    font-family:dizpix;
    font-size:16px;
}

/*Main*/
html{
    cursor: url('images/img_graphics/cursor.png'), auto;
}
a{
    cursor: url('images/img_graphics/hoverlink.png'), auto;
}
a:hover{
    text-decoration: none;
}
body{
    margin:0 auto;
    max-width:50em;
    min-height: 10em;
    background-image: url(images/img_graphics/background.gif);
}

table,th,td{
    border-style:double;
    border-color:#fad3fe;
    margin:0 auto;
    text-align:center;
    padding:3px;
}
table{
    border-collapse: collapse;
}
.left{
    list-style-type: none;
    padding:2px;
    margin: 0 auto;
}

li.left + li.left{
    margin-top:2px;
}

.flex{
    display:flex
}

aside,footer,header,nav{
    font-family:alagard
}

header,footer,section,main{
    background-color:#370859;
}
section,main,a,li,p,div,h1,h2,h3,hr{
    color:#fad3fe;
}
header{
    border-style: groove;
    border-radius: 5px
}
footer{
    border-style: groove;
    border-radius: 5px;
    margin:auto;
    max-width: 50%;
}
aside,nav{
    max-width:100px;
    margin-top:30px;
    overflow-wrap:break-word;
}
section{
    border:2px solid #fad3fe;
    border-radius:5px;
    padding:2px;
    text-align: left;
    word-wrap: break-word;
}
main{
    border:2px solid #fad3fe;
    border-radius:5px;
    padding:10px;
    margin:5px;
    margin-top:20px;
    width:100%
}
h1,h2,h3{
    font-family:alagard;
}
ol,ul{
    display:table;
    text-align:left;
}
ul{
    list-style-type:symbols(cyclic "❥");
}
ul ul{
    margin-left:0%;
    padding-left:5%;
}
/*Images*/
.gallery{
	display:inline-block
}
.img-container{
	float:center;
	margin:5px
}

/* Edit these blocks as you see fit! */
.img-container img,.img-container p{
	border-style:solid;
	border-color:#fad3fe;
}
.img-container img{
	margin:0;
	border-width:var(--imageborderwidth);
	width:var(--imagewidth);
	height:auto
}
.img-container p{
	margin:0 auto;
	border-width:var(--descborderwidth);
	padding:var(--descpadding);
	width:var(--descwidth);
	overflow:auto;
	height:50px;
	text-align:center
}

/*Misc*/
.rss-title{
    display:none
}
li.rss-item{
    list-style-type:none;
    margin-bottom:20px
}
li.rss-item a{
    font-weight:bold;
    font-size:20px;
    text-decoration:none
}
.rss-date{
    display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
    font-style:italic
}
a.rss-item:last-child{
    display:none
}
#statuscafe{
    padding:0.5em;
    background-color:#370859;
    border:2px solid #fad3fe;
    border-radius:5px
}
#statuscafe-username{
    margin-bottom:0.5em;
    color:#fad3fe
}
#statuscafe-content{
    margin:0 1em 0.5em;
    color:#fad3fe
}

/*Landing*/
.grid-container {
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 20px;
  grid-row-gap: 5px;
  grid-auto-flow: column;
  border-style: solid;
  border-radius: 10px;
  background-color:#370859;
}
#grid{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.item1 {
    grid-row: span 3;
    align-self: center;
    justify-content: center;
    padding-right: 20px;
}
.item2, .item3, .item4{
    border-style: groove;
    border-radius: 10px;
    align-self: center;
    justify-content: center;
    padding: 5px;
}
#webring{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    position:relative;
}
.small{
    font-size:smaller;
}

/*Christmas
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
  cursor: url('images/img_graphics/cursor.png'), auto;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}*/