@font-face {
    font-family: 'PixelFont'; /*a name to be used later*/
    src: url('../SiteAssets/NFPixels-Regular.ttf'); /*URL to font*/
}
body{
    background-image: url('../SiteAssets/GreenBG200px.png');
    background-repeat: repeat-x;
    image-rendering: pixelated;
    background-size: auto 100vh;
    padding: 0;
    margin: 0;
}
.CorkBoardIframe{
    width: 100%;
    height: 100%;
    border: none;
}
.HotbarWrapper{
    background: #fff089;
    display: flex;
    position: fixed;
    width: 100vw;
    height: 6.5vh;
}
.HotbarElement:hover{
    cursor: pointer;
    .ButtonText{
        color: #586335;
        transform: translateY(-0.5vh);
        text-shadow: #adb834 0.5vh 0.5vh ;
    }
}
.MyBoards{
    box-shadow:rgba(51, 60, 31, 0.75) 0.5vh 0.5vh 0 -0vh ;
    background: white;
    position: fixed;
    width: 23.4375vw;
    top: 10vh;
    height: 80vh;
    left: 75vw;
    padding-bottom: 3vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.CorkBoardTitleBar{
    display: flex;
    width: 100%;
    height:5.5vh;
}
.CorkBoard{
    background: #b47538;
    background-image: url('../SiteAssets/TallPinBoard.png');
    background-repeat: repeat-x;
    box-shadow:rgba(51, 60, 31, 0.75) 0.5vh 0.5vh 0 -0vh ;
    image-rendering: pixelated;
    background-size: 12.5vh;
    position: fixed;
    width: 70vw;
    height: 92.1875vh;
    left: 2vw;
    top: 10vh;
    border:  0.5vh solid #d6a851;
}
.CorkBoardChoice:hover{
    text-shadow: #d6a851 0.5vh 0.5vh;
    color: #a55f31;
    cursor: pointer;
    transform: translateY(-0.5vh);
}
.CorkBoardChoice{
    margin-top: -2vh;
    color:#a55f31;
    text-shadow: none;
    margin-left: 2vh;
    padding-right: 5vh;
    user-select: none;
    font-family: "PixelFont", system-ui;
    font-size: 5vh;
    text-align: center;
}
.CorkBoardChoiceActive:hover{
    cursor: grab;
    transform: translateY(-0.5vh);
    text-shadow: #586335 0.5vh 0.5vh  ;
}
.CorkBoardChoiceActive{
    margin-top: -2vh;
    user-select: none;
    margin-left: 2vh;
    padding-right: 4vh;
    font-family: "PixelFont", system-ui;
    text-shadow: #586335 0.5vh 0 ;
    font-size: 5vh;
    text-align: center;
    color: #7f8e44;
}
.ButtonText{
    user-select: none;
    font-family: "PixelFont", system-ui;
    text-shadow: #586335 0.5vh 0 ;
    font-size: 5vh;
    text-align: center;
    color: #7f8e44;
}
.BGShadow{
    z-index: -1;
    width: 100vw;
    position: fixed;
    left: 0;
}
.Title:hover{
    transform: translateY(-0.5vh);
    cursor: grab;
}
.WhateverBoardTitle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: center;
    height: 5vh;
}
.Title{
    font-family: "PixelFont", system-ui;
    color: #f8c53a;
    text-shadow: #fff089 0.390625vh 0.390625vh ;
    font-size: 5vh;
}
.HotbarElement.Square{
    width: 4.5vh;
}
.AccountIcon:hover{
    margin-top: -0.5vh;
    background-image: url('../SiteAssets/AccountIconhover.png');
}
.SearchIcon:hover{
    margin-top: 0.5vh;
    background-image: url('../SiteAssets/searchhover.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: contain;
    width:4.5vh;
    height:4.5vh;
}
.SettingsIcon:hover{
    margin-top: 0.390625vh;
    background-image: url('../SiteAssets/settingshover.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: contain;
    width:5vh;
    height:5vh;
}
.SearchIcon{
    margin-top: 0.5vh;
    background-image: url('../SiteAssets/search.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: contain;
    width:4.5vh;
    height:4.5vh;
}
.SettingsIcon{
    margin-top: 0.5vh;
    background-image: url('../SiteAssets/settings.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: contain;
    width:4.5vh;
    height:4.5vh;
}
.AccountIcon{
    margin-top: 0.5vh;
    background-image: url('../SiteAssets/AccountIcon.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: contain;
    width:4.5vh;
    height:4.5vh;
}
.BoardsTitleContainer{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 4.5vh;
    padding-bottom: 2vh;
}
.MyBoardsContainer{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    background: #fff089;
    border-left: #f8c53a solid 0.5vh;
    border-top: #f8c53a solid 0.5vh;
}
.HotbarElement.Wide{
    width: 20vh;
}
.HotbarElement{
    box-shadow:#fff089 0.1953125vh 1vh 0 -0.1953125vh ;
    background: #fff089;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top:  0.5vh;
    margin-right: 0.5vh;
    height:4.5vh;
    border-left: 0.5vh #f8c53a;
    border-top: 0.5vh #f8c53a;
    border-right:  0.5vh #ffffff;
    border-style: solid;
    border-bottom: 0 hidden;
}
.HotbarForeGround{
    background-image: url("../SiteAssets/TileHotbar.png");
    image-rendering: pixelated;
    background-repeat: repeat;
    background-size: contain;
    background: white;
    box-shadow: #f8c53a 0.5vh 0 0 0.5vh;
    display: flex;
    position: fixed;
    width: 100vw;
    height: 5.5vh;
    padding-left: 0.5vh;
    padding-right: 0.5vh;
    justify-content: space-between;
}
.Copyright{
    border-radius: 5vh;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    user-select: none;
    transition: ease-in-out .3s;
    font-family: "PixelFont", system-ui;
    font-size: 1vh;
    text-align: center;
    color: #333c24;
}