.almendra-regular {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: normal;
}
.almendra-bold {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: normal;
}
.almendra-regular-italic {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: italic;
}
.almendra-bold-italic {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: italic;
}
p{
    font-family: "Almendra";
    color: aliceblue;
    margin-right: 30px;
}
h3{
    font-family: "Almendra";
    color: aliceblue;
    font-size: 35px;
    border-bottom: 2px ridge;
    width: 75%;
    font-weight: normal;
    margin: 0%;
}
h4{
    font-family: "Almendra";
    color: aliceblue;
    border-bottom: 2px ridge;
    width: 250px;
    font-weight: normal;
    margin: 0%;
    font-size: 24px;
}
h5{
    font-family: "Almendra";
    color: aliceblue;
    font-weight: normal;
    margin: 0%;
    margin-bottom: 5px;
    font-size: 24px;
}
body{
    background-image: url(../img/red112.jpg);
    padding: 0px;
    margin: 0px;
}
#simicbg{
    background-image: url(../img/865d7a502259449559bf0cc8eb8dee9e.jpg);
}
#orzhovbg{
    background-image: url(../img/misc038.gif);
}
#borosbg{
    background-image: url(../img/oran.jpg);
}
#dimirbg{
    background-image: url(../img/ss020.jpg);
}
#rakdosbg{
    background-image: url(../img/multi086.jpg);
}
#azoriusbg{
    background-image: url(../img/clouds\ 2.gif);
}
#izzetbg{
    background-image: url(../img/4ecab961bf5fa18443fd350bc3069748.jpg);
}
#selesnyabg{
    background-image: url(../img/pattern\ 16.jpg);
}
#golgaribg{
    background-image: url(../img/dgren003.jpg);
}
#gruulbg{
    background-image: url(../img/redgreen.jpg);
}

.container {  
    display: grid;
    grid-template-columns: 0.5fr 1fr 3fr 1fr 0.5fr;
    grid-template-rows: 0.7fr 1.5fr 1fr 1fr 0.5fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas:
        "Header Header Header Header Header"
        ". main main side ."
        ". main main side ."
        ". main main side ."
        "Footer Footer Footer Footer Footer";
    height: 100vh;
    margin: auto;
}
.Header { 
    grid-area: Header; 
    margin-left: 50px;
    margin-right: 50px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(145, 58, 92) black;
}
.Footer { 
    grid-area: Footer; 
    border:10px ridge rgb(105, 41, 67);
    background-image: url(../img/cobblestone_1.gif);
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 3px;
}
.main { 
    grid-area: main;
    border:10px ridge rgb(105, 41, 67);
    overflow: auto;
    padding: 10px;
    background-image: url(../img/cobblestone_1.gif);
    border-radius: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgb(145, 58, 92) black;
}
.side { 
    grid-area: side; 
    justify-content: center;
    border-radius: 3px;
    display: grid;
    grid-template-rows: 50% 50%;
    grid-auto-flow: row;
    grid-template-areas:
    "nav"
    "misc";
    scrollbar-width: thin;
    scrollbar-color: rgb(145, 58, 92) black;
}
.sidenav {
    grid-area: nav;
    border:10px ridge rgb(105, 41, 67);
    background-image: url(../img/cobblestone_1.gif);
    overflow: auto;
    border-radius: 3px;
}
.misc{
    grid-area: misc;
    border:10px ridge rgb(105, 41, 67);
    background-image: url(../img/cobblestone_1.gif);
    overflow: auto;
    border-radius: 3px;
}
.nav_outer{
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  padding-top: 20px;
  justify-content: space-evenly;
  text-decoration: none;
}
.nav {
  background-image: url(../img/cobblestone_1.gif);
  border:10px ridge rgb(105, 41, 67);
  padding: 10px;
  margin-right: 15px;
  font-size: large;
  text-decoration: none;
  color: aliceblue;
  font-family: "Almendra";
  border-radius: 3px;
}
li{
    color: aliceblue;
    font-family: "Almendra";
}
.bttngroup{
    display: flex;
    flex-direction: column;
    padding: 5px;
}
.bttn{
    padding: 10px 32px;
    width: 95px;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    background-image: url(../img/cobblestone_1.gif);
    border:10px ridge rgb(105, 41, 67);
    color: aliceblue;
    font-family: "Almendra";
}
.bttn:hover {
  color: aliceblue;
  border:10px ridge rgb(145, 58, 92);
}
.nav:hover{
   color: aliceblue;
  border:10px ridge rgb(145, 58, 92); 
}
.rightimages{
    float: right;
    width: 200px;
    margin: 10px;
}
.stamps{
    float: left;
    margin: 10px;
}
.mana{
    width: 15px;
    margin-right: 3px;
    margin-left: 3px;
}
.tablecustom{
    color: aliceblue;
    font-family: "Almendra";
    background: none;
    margin-bottom: 10px;
}
th, td {
  padding-right: 15px;
  text-align: left;
}
.golgari{
    border: 10px ridge rgb(75, 171, 48);
    border-radius: 3px;
    scrollbar-color: rgb(105, 243, 67) black;
}
nav .golgari:hover{
    border: 10px ridge rgb(105, 243, 67);
}
.scrollgolg{
    scrollbar-color: rgb(105, 243, 67) black;
}
.azorius{
    border: 10px ridge rgb(30, 121, 190);
    border-radius: 3px;
    scrollbar-color:  rgb(95, 184, 252) black;
}
nav .azorius:hover{
    border: 10px ridge rgb(95, 184, 252);
}
.scrollazo{
    scrollbar-color:  rgb(95, 184, 252) black;
}
.orzhov{
    border: 10px ridge rgb(217, 217, 217);
    border-radius: 3px;
    scrollbar-color:  rgb(153,153,153) black;
}
nav .orzhov:hover{
    border:10px ridge rgb(153, 153, 153);
}
.scrollorz{
    scrollbar-color:  rgb(153,153,153) black;
}
.izzet{
    border: 10px ridge rgb(147,0,0);
    border-radius: 3px;
    scrollbar-color:  rgb(197, 0, 0) black;
}
nav .izzet:hover{
    border: 10px ridge rgb(197, 0, 0);
}
.scrollizz{
    scrollbar-color:  rgb(197, 0, 0) black;
}
.simic{
    border: 10px ridge rgb(40, 172, 142);
    border-radius: 3px;
    scrollbar-color:  rgb(60, 253, 208) black;
}
nav .simic:hover{
    border: 10px ridge rgb(60, 253, 208);
}
.scrollsim{
    scrollbar-color:  rgb(60, 253, 208) black;
}
.boros{
    border: 10px ridge rgb(182, 52, 0);
    border-radius: 3px;
    scrollbar-color:  rgb(255, 74, 3) black;
}
nav .boros:hover{
    border: 10px ridge rgb(255, 74, 3);
}
.scrollbor{
    scrollbar-color:  rgb(255, 74, 3) black;
}
.dimir{
    border: 10px ridge rgb(23, 54, 178);
    border-radius: 3px;
    scrollbar-color:  rgb(58, 101, 244) black;
}
nav .dimir:hover{
    border: 10px ridge rgb(58, 101, 244);
}
.scrolldim{
    scrollbar-color:  rgb(58, 101, 244) black;
}
.rakdos{
    border: 10px ridge rgb(95, 3, 5);
    border-radius: 3px;
    scrollbar-color:  rgb(170, 9, 11) black;
}
nav .rakdos:hover{
    border: 10px ridge rgb(170, 9, 11);
}
.scrollrak{
    scrollbar-color:  rgb(170, 9, 11) black;
}
.gruul{
    border: 10px ridge rgb(20, 63, 18);
    border-radius: 3px;
    scrollbar-color:  rgb(40, 125, 36) black;
}
nav .gruul:hover{
    border: 10px ridge rgb(40, 125, 36);
}
.scrollgru{
    scrollbar-color:  rgb(40, 125, 36) black;
}
.selesnya{
    border: 10px ridge rgb(135, 225, 110);
    border-radius: 3px;
    scrollbar-color:  rgb(195, 246, 144) black;
}
nav .selesnya:hover{
    border: 10px ridge rgb(195, 246, 144);
}
.scrollsel{
    scrollbar-color:  rgb(195, 246, 144) black;
}
.miscpics{
    width: 180px;
}
@media screen and (max-width: 800px) {
    .container {  
    display: grid;
    grid-template-columns: 0.5fr 1fr 3fr 1fr 0.5fr;
    grid-template-rows: 0.5fr 1.5fr 1fr 1fr 0.4fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas:
        "Header Header Header Header Header"
        ". main main main ."
        ". main main main ."
        ". main main main ."
        "Footer Footer Footer Footer Footer";
    height: 100vh;
    }
    .side {
        display: none;
    }
    .Footer{
        margin: 0%;
    }
    .Header{
        margin-left: 10px;
        margin-right: 10px;
    }
    .rightimages{
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
    }
}