@import url('https://fonts.googleapis.com/css2?family=GFS+Neohellenic:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "GFS Neohellenic", sans-serif;
    
}

a:link{
    color: black;
    font-style: italic;
    text-decoration: none;
}

a:hover{
    font-size: 110%;
}

a:visited{
    color: black;
    font-style: italic;
    text-decoration: none;
}

.content{
    height: 100%;
    width: 100%;
    align-content: center;
    background-image: url(img/purplestarswebp.webp);

}
.main{
    display: grid;
    height: 70%;
    width: 70%;
    grid-template-columns: 10% 70% 15%;
    border: 15px inset darkcyan;
}

.navbar{
height: 35%;
display: grid;
border: 50px solid black;
border-image: url(img/Border.png) 21 round;
border-image-outset: 14px;
image-rendering: pixelated;
background-image:none;
background-color: linen;
margin-left: 25%;
margin-top: 25%;
justify-content: center;
grid-template-rows: repeat(10,7%);
}

.navbar-content{
    background-image:none;
    background-color: linen;
    margin: 0%;
}

.Title{
    text-align: center;
    background-image:none;
    font-size: 40pt;
    color: aliceblue;
}

.column-title{
    text-align: center;
    background-image:none;
    background-image:none;
}

.ContentHolder{
    background-image:none;
    grid-template-rows: 15% 70%;
}

.columns{
    background-image:none;
    width: 90%;
    height: 50%;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 10px;
}
.Column{
    background-image:none;
    background-color: linen;
    border: 4px solid green;
    border-radius: 10px;
    box-shadow: 5px 5px limegreen;
}
.MainSection > h2{
    text-align: center;
}

.side-board{
    height: 90%;
    margin-top: 10%;
    background-image:none;
    background-color: linen;
    border: 4px solid black;
    border-radius: 10px;
    box-shadow: 5px 5px grey;
}

.dwellers{
    display: grid;
    grid-template-columns: 50% 50%;
    row-gap: 20px;
    column-gap: 3px;
}

.games-holder{
   background-image:none;
    width: 50%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 5%;
}

.game-card{
    display: flex;
    column-gap: 10px;
    flex-direction: column;
}

.game-card .column-title{
    font-size: 9pt;
    color: aliceblue;
}

.game-screen img{
    width: 100px;
    height: 100px;
    border: 1px solid white;
    display: block;
}

.game-screen img:hover{
    transform: scale(1.1);
}