html{
    scroll-behavior:smooth;
}

body{

    margin:0;
    padding:0;

    background-image:url("homepage/media/murkaroyale.jpg");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% auto;
    background-attachment:scroll;
    background-color:#000;

    font-family:"Comic Sans MS",cursive;

    color:white;

    overflow-x:hidden;

}

/* ========================= */
/* LOGO */
/* ========================= */

#title{

    display:block;

    width:560px;
    max-width:90%;

    margin:0 auto -120px auto;

    transform:rotate(-5deg);

    filter:drop-shadow(4px 4px 0 #ff00ff);

}

/* ========================= */
/* SECRET DOOR */
/* ========================= */

#door{

    position:fixed;

    top:15px;
    right:20px;

    width:120px;

    z-index:999;

    transition:.2s;

}

#door:hover{

    transform:rotate(8deg) scale(1.08);

}

/* ========================= */
/* VISITOR COUNTER */
/* ========================= */

#counterbox{

    position:fixed;

    left:20px;
    top:20px;

    background:rgba(0,0,0,.6);

    border:5px ridge yellow;

    padding:10px;

    transform:rotate(-2deg);

    font-size:20px;

    box-shadow:6px 6px black;

    z-index:999;

}

#counter{

    display:inline-block;

    color:lime;

    font-size:34px;

    font-weight:bold;

    animation:counter .18s infinite alternate;

}

@keyframes counter{

    from{

        transform:rotate(-3deg);

    }

    to{

        transform:rotate(3deg);

    }

}

/* ========================= */
/* SECTIONS */
/* ========================= */

section{

    margin-left:40px;

    margin-top:70px;

}

/* ========================= */
/* WORDART */
/* ========================= */

.wordart{

    display:block;

    width:700px;

    max-width:95%;

    margin-left:10px;

    margin-bottom:-25px;

    position:relative;

    z-index:10;

    transform:rotate(-2deg);

}

#known .wordart{

    transform:rotate(1deg);

}

#links .wordart{

    transform:rotate(-1deg);

}

/* ========================= */
/* TEXT BOXES */
/* ========================= */

.textbox{

    width:720px;

    max-width:90%;

    padding:22px;

    background:rgba(0,0,0,.55);

    border-top:5px solid hotpink;
    border-right:5px solid yellow;
    border-bottom:5px solid lime;
    border-left:5px solid cyan;

    box-shadow:
    8px 8px black;

    transform:rotate(.3deg);

}

#known .textbox{

    margin-left:15px;

    transform:rotate(-.4deg);

}

#links .textbox{

    margin-left:30px;

    transform:rotate(.7deg);

}

/* ========================= */
/* TEXT */
/* ========================= */

p{

    margin:0;

    font-size:24px;

    line-height:1.6;

}

ul{

    margin:0;

    padding-left:30px;

    font-size:23px;

}

li{

    margin-bottom:10px;

}

/* ========================= */
/* LINKS */
/* ========================= */

a{

    color:#00ffff;

    font-size:28px;

    font-weight:bold;

    text-decoration:none;

}

a:hover{

    color:yellow;

    text-shadow:2px 2px red;

}

/* ========================= */
/* SELECTION */
/* ========================= */

::selection{

    background:hotpink;

    color:black;

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:1000px){

body{

background-size:auto 100vh;

}

#title{

width:90%;

margin-bottom:-70px;

}

.wordart{

width:95%;

margin-left:0;

}

.textbox{

width:auto;

font-size:20px;

}

section{

margin-left:10px;

margin-right:10px;

}

#door{

width:85px;

}

#counterbox{

font-size:16px;

left:8px;
top:8px;

}

}