html {
    cursor:url("./localresources/regularcursor.png"), auto;
}
body {
    background-image: url("localresources/frutigeraero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    font-family: Silkscreen, serif;

}
svg {
    display: none;
}
@font-face {
    font-family: Silkscreen; /* set name */
    src: url(localresources/Silkscreen-Regular.ttf); /* url of the font */
}
@font-face {
    font-family: Daydream;
    src: url(localresources/Daydream.otf);
}
@font-face {
    font-family: Gothik;
    src: url(localresources/Gothik.ttf);
}
@font-face {
    font-family: Punk;
    src: url(localresources/punk.ttf);
}
#poem {
    background-color: aquamarine;
    text-align: center;

    border-radius: 10px;
    border: solid 3px black;
    margin: 0 auto ;
    height: 250px;
    width: 300px;


}
#countDownDiv {
    background-image: url("./localresources/drdoom2.jpg");
    width: 171px;
    height: 97px;
    background-size: contain;
    background-repeat: no-repeat;
    border: 5px solid darkgreen;
}
#demo {
    color: darkgreen;
    text-shadow: 1px 1px black;
    text-align: left;
}
/* Style the topnav */
ul.topnav {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0 0 10px 0;
    padding: 0;
}
ul.topnav a {
    display: block;
    color: wheat;
    background-color: darkblue;
    padding: 14px 16px;
    text-decoration: underline;
    text-decoration-style: wavy ;
    font-family: Daydream, serif;
}
ul.topnav a:hover {
    color:yellow;
}
ul.topnav a img {
    display: block;
    color: wheat;
    background-color: darkblue;
    padding: 14px 16px;
    text-decoration: underline;
    text-decoration-style: wavy ;
}


#GuestUserTextAndBtn {
    display: flex;
    flex-direction: row;
    font-family: Silkscreen, serif;
    background-color: darkblue;
    justify-content: center;
    align-items: center;
}

#GuestUserBtn {
    background-color: greenyellow;
    color: black;
    font-family: Silkscreen, serif;
    border: 2px solid black;
    margin-right: 5px;
}

#shufflebutton {
    background-color: darkblue;
}
.djswaxyrockdiv {
    display: flex;
    flex-direction: column;
    justify-self: center;
    width: 33%;
    margin-bottom: 20px;
    background-color: darkblue;
    box-shadow: 10px 10px black;
}
#djswaxyrockheader {
    display: flex;
    flex-direction: row;
    color: wheat;
    background-color: darkblue;
    height: 25px;


}
#counterbtn {
    background-color: mediumvioletred;
    font-family: daydream, serif;
    margin: 5px 5px 0 auto;
    height: 25px;
    box-shadow: 2px 2px black;
    border: none;

}
#djswaxyrockheader p {
    padding-left: 10px;
    text-shadow: 1px 1px #aa076b;
}

#djswaxyrockstext {
    text-align: center;
    filter: url(#displacementFilter);
    width: 90%;
    height: 80px;
    text-shadow: 1px 1px black;
    font-size: 40px;

}
#djswaxyrockcontent {
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
    border: solid 20px darkblue;
}
.CenterBottomDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#tarotbutton {
    height: 40px;
    width: 300px;
    background-color: black;
    text-shadow: 1px 1px aquamarine;
    font-family: Daydream, serif;
    color: white;
    text-decoration: underline;
    text-decoration-style: dashed ;
    margin-bottom: 10px;
}


#goToDagensDigt {

    color: white;
}


#bromance {
    background-image: url("./localresources/daleharry.png");
    width: 400px;
    height: 150px;
    background-size: cover;
}
#bromance:hover {
    background-image: url("./localresources/daleharrylove.png");
    background-size: cover;
}

#radioDiv {

    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    align-items: center;


}
#TrykkKasettTxt {
    font-family: Daydream, serif;

    margin-right: auto;
    margin-left: 30px;
    font-size: 20px;
    text-shadow: 3px 3px black;
    color: yellow;
    z-index: 5;
}
#Casette1 {
    margin-top: 100px;
    height: 480px;
    width: 480px;

    background-image: url("./localresources/KAS1.png");
    z-index: 2;

}
#Casette2 {

    height: 480px;
    width: 480px;
    margin-top: -80px;
    background-image: url("./localresources/KAS2.png");
    z-index: 3;
}
#Casette3 {

    height: 480px;
    width: 480px;
    margin-top: -80px;
    background-image: url("./localresources/KAS3.png");
    z-index: 4;
}
#Casette4 {

    height: 480px;
    width: 480px;
    margin-top: -80px;
    background-image: url("./localresources/KAS4.png");
    z-index: 5;
}
.cassette {
    background-color: rgba(0,0,0,0);
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transform: rotate3d(1,-2,-2,-30deg);


}
.cassette:hover {
    transform: scale(110%);
    z-index: 20 !important;
}

#radioDiv audio {
    margin-top: 170px;
}
#foxpoemtop {
    display: flex;
    flex-direction: row;
    margin-top: auto;
    align-self: flex-end;


}
#tarotmeaninglink {
    display: none;
    margin-bottom: 10px;
}
#TarotRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#TarotCard1 {

}
#TarotCard2 {

}
#TarotCard3 {

}
.maincontainer{
    display: flex;
    flex-direction: row;

    gap: 25px;

    margin: 0 auto ;
    width: 100%;
    height: 1200px;

}
.headleft{
    display: flex;
    justify-content: left;
    list-style-type: none;
    color: wheat;
    background-color: darkblue;
    padding: 0;


}
.leftbelow {

}
.headright{
    display: flex;
    justify-content: left;
    list-style-type: none;
    color: wheat;
    background-color: brown;
    padding: 0;
    width: 100%;
    box-shadow: 10px 0px black;

}
.headright p {
    padding-left: 10px;
    padding-top: 10px;
}
.headcenter{
    display: flex;
    justify-content: left;
    list-style-type: none;
    color: wheat;
    background-color: darkblue;
    padding: 0;

}
.centerdiv{

    border: solid 10px darkblue;
    background-color: black;
    width: 33%;
    box-shadow: 10px 10px black;
}

.leftdiv{
    display: flex;
    flex-direction: column;
    background-image: url("./localresources/woodentexture.jpg");
    border: solid 10px darkblue;
    width: 33%;
    box-shadow: 10px 10px black;



}
.topleft {

}
.rightdiv {
    justify-self: right;
    display: flex;
    flex-direction: column;
    width: 33%;

}
.righttopdiv{
    background-color: grey;
    border: solid 10px brown;
    flex-direction: column;
    margin-bottom: 20px;
    width: 472px;
    height: 500px;
    box-shadow: 10px 10px black;

}
.ChatDiv {
    background-color: darkblue;
    display: none;
    flex-direction: column;
}
.rightbottomdiv {
    border: solid 10px darkblue;
    display: none;
    flex-direction: column;
    background-color: blueviolet;
    box-shadow: 10px 10px black;
}
#chattext{
    display: flex;
    color: wheat;
    justify-self: left;

}
.centerdiv {
    display: flex;
    flex-direction: column;
}
.CenterBottomDiv {
    display: flex;
    flex-direction: column;
}
#TopTrioHeaderDiv {
    display: flex;
    flex-direction: row;
    width: 100%;
}
#leftHeaderDiv {
    display: flex;
    flex-direction: column;
    width: 33%;

}
#rightHeaderDiv {

    display: flex;
    flex-direction: column;
    width: 33%;

}
.CenterTopDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-color: black;

}
.theDoors {
    color: #1976D2;
}
#githubButton {
    background-image: url("./localresources/githubpixelart.png") ;
    background-color: black;
    width: 100px; height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}
#instaButton {
    background-image: url("./localresources/instagrampixelart.png") ;
    background-color: black;
    width: 100px; height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}
#meowButton {
    background-image: url("./localresources/catpixelart.png") ;
    background-color: black;
    width: 100px; height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}
.secret {
    background-color: black;
}

#secretbutton {
    width: 50px; height: 30px;
    background-color: deeppink;
    font-family: Silkscreen, serif;
}
#secretinput{
    border: 5px solid darkblue;
    color: deeppink;
    font-family: Silkscreen, serif;
}
#chatplaceholder {
    margin-top: 10px;
}



.GIFS {


    height: 50px;
    width: 50px;
    align-self: flex-end;
    margin-top: auto;


}
a {
    background-color: white;
}

#chatinput{
    width: 256px; height: 58px;
}
#chatbutton {
    width: 64px; height: 64px;
    margin-left: 22px;
}
.ChatDivContent {
    display: none;
    flex-direction: row;
}
#topchattext{
    background-color: grey;
    text-shadow: 0.5px 0.5px black;
    justify-self: center;
}

#chatlog {
    display: none;
    height: 250px;
    overflow-y: auto;
    width: 100%
}
#chatlog p {
    justify-self: left;
}