*{
    margin: 0;
    padding: 0;
}
body::selection{
    background-color: black;
    color: aquamarine;
}
body{
    background-image: url(Images/abstract.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: Happiness, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    box-sizing: border-box;
}
@font-face{
    src: url(Fonts/Iceland-Regular.ttf);
    font-family: Happiness;
}
header{
    /*backdrop-filter: blur(1px);
    background-color: rgba(255, 249, 127, 0.019);
    border: 1px solid rgba(255, 255, 255, 0.104);
    border-radius: 20px;*/
    border-bottom: 1px solid white;

    justify-items: center;
    justify-self: center;

    padding: 1px;
    margin-top:50px ;
    width: 600px;
}
.container p{
    border-radius: 3px;
}
.upd{
    background-color: rgba(0, 0, 0, 0.285);
    backdrop-filter: blur(3px);
}
header h1{
    background: repeating-linear-gradient(to right, rgb(233, 215, 122) 20%, rgb(215, 157, 56) 30%, rgb(250, 196, 114) 40%);
    background-clip: text;
    color: transparent;
    font-size: 70px;
    -webkit-text-stroke: 0.4px;
    text-align: center;
    opacity: 0.9;

    padding: 1px;
}
h6{
    color: rgb(223, 152, 60);
    text-align: center;
}
@media screen and (max-width:600px){
    header{
        width: 50%;
    }
    .title, .container, h6{
        transform: scale(0.8);
    }
}
.container{
    background: repeating-linear-gradient(to bottom, transparent, rgba(255, 185, 81, 0.197), transparent);
    border: 1px solid rgb(215, 157, 56);
    border-radius: 10px;
    border-top: 0.1px solid transparent;
    border-bottom: 0.1px solid transparent;

    /*padding: 200px 200px 200px 200px; top right bottom left*/
    width: 400px;
    height: 400px;
    margin-top: 80px;
    justify-self: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
}
.item{
    padding: 25px 100px 25px 100px;
    margin: 10px;
    display: block;
    font-size: 30px;
    color: burlywood;
    -webkit-text-stroke: 0.4px rgb(25, 25, 146);
    border-radius: 5px;
}
.item:hover, .playItem:hover{
    background-color: rgba(222, 184, 135, 0.093);
    border: 1px solid rgba(90, 90, 227, 0.503);
    color: rgb(255, 255, 255);
    -webkit-text-stroke: 0.5px rgb(160, 160, 160);
}
.playItem{
    padding: 25px 100px 25px 100px;
    margin: 10px;
    display: none;
    font-size: 30px;
    color: burlywood;
    -webkit-text-stroke: 0.4px rgb(25, 25, 146);
    border-radius: 5px;
}
.creditsItem{
    padding: 25px 30px 25px 30px;
    margin: 10px;
    display: none;
    font-size: 30px;
    color: burlywood;
    -webkit-text-stroke: 0.4px rgb(25, 25, 146);
    border-radius: 5px;
}
.creditsItem:hover #dev{
    background-color: rgba(222, 184, 135, 0.093);
    border: 1px solid rgba(90, 90, 227, 0.503);
    color: rgb(255, 255, 255);
    -webkit-text-stroke: 0.5px rgb(160, 160, 160);
}
.changeItemHeader{
    color: rgb(255, 145, 0);
    border: 1px solid rgba(222, 184, 135, 0.366);
    border-radius: 25px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-end-end-radius: 300px;
    border-end-start-radius: 300px;
    backdrop-filter: blur(50px);
    width: 250px;
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
}
.playItemHeader{
    color: rgb(255, 145, 0);
    border: 1px solid rgba(222, 184, 135, 0.366);
    border-radius: 25px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-end-end-radius: 300px;
    border-end-start-radius: 300px;
    backdrop-filter: blur(50px);
    width: 250px;
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
}
.itemHeader{
    color: rgb(255, 145, 0);
    border: 1px solid rgba(222, 184, 135, 0.366);
    border-radius: 25px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-end-end-radius: 300px;
    border-end-start-radius: 300px;
    backdrop-filter: blur(50px);
    width: 250px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
}
.creditsItemHeader{
    color: rgb(255, 145, 0);
    border: 1px solid rgba(222, 184, 135, 0.366);
    border-radius: 25px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-end-end-radius: 300px;
    border-end-start-radius: 300px;
    backdrop-filter: blur(50px);
    width: 250px;
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
}
.changeItem{
    margin: 0px 20px 0px 25px;
    padding: 0;
    display: none;
    top: 20%;
    position: absolute;
    font-size: 20px;
    color: rgba(107, 255, 101, 0.934);
    align-self: flex-start;
    overflow-y: scroll;
    height: 280px;
    border-radius: 5px;
    scrollbar-width: none;
}
.changeItem:hover{
    background-color: rgba(157, 100, 25, 0.158);
    color: rgb(70, 255, 70);
}
.back{
    background-color: transparent;
    border: none;
    position: absolute;
    display: none;
    top: 3%;
    left: 3%;
}
.material-symbols-outlined{
    background-color: none;
    color: burlywood;
    padding: 5px;
    position: absolute;
}
.back:hover .material-symbols-outlined{
    color: rgb(226, 201, 169);
    background-color: rgba(105, 104, 69, 0.195);
    border-radius: 5px;
    transform: scale(1.1);
}