*{
    margin:0px;
}
body{
    background-color: #ecdcb7;
}
header{
    background-color: #edb458;
    border:2px, solid, #e8871e;
    padding: 5px;
    box-shadow: 1px 2px #91a37b;
}
titlebox{
    margin: 2vw;
    display: block;
    background-color: #edb458;
    border:1px, solid, #e8871e;
    border-radius: 10px;
    text-align: center;
    box-shadow: 1px 2px #91a37b;
}
GridBox{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1vm;
    margin-inline: 2vw;    
}
GridItem{
    margin-bottom: 1vh;
    padding: 4px;
    display: block;
    background-color: #eeeeee;
    border:1px, solid, #e8871e;
    border-radius: 4px;
    box-shadow: 0 0 0 transparent;
}
GridItem a{
    color: black;
}
P{
    margin-block: 1em;
    margin-inline: 1vw;
}
article{
    display: block;
    margin-inline: 2vw;
    padding: 4px;
    background-color: #eeeeee;
    border:1px, solid, #e8871e;
    border-radius: 4px;
}
GridItem:hover {
    border:2px, dashed, #e8871e;
    box-shadow: 1px 2px #91a37b;
}
.centertext{
    text-align: center;
}
.hoverRightTop{
    position: absolute;
    top: 5px;
    right:5px
}

@media (min-width: 800px) {
  GridBox {
    grid-template-columns: repeat(2, 1fr);
  }
}