@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&display=swap');
p {color:#222;}
body {background-color: #30014F;}
.gba, .submenu, .options, .news, .aboot {
    background-color: #aaa;
}
button {
    border: none;
    font-family: "jersey 10";
    font-size: 30px;
    background-color: transparent;
    cursor: pointer;
}
#select4, #select5, #select6, #select7, #select8, #select9 {
    margin-bottom: 10px;
}

#select4 a, #select5 a, #select6 a, #select7 a, #select8 a, #select9 a {
    text-decoration: none;
    color: black;
}

.gba {
    display: flex;
    flex-direction: column-reverse;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  border: 5px inset gray;
  background: url("") left 350px bottom 40%/320px no-repeat, url("sprite.png") top 50px right 50px / 320px no-repeat, #aaa url("sprite_hp.png") left 150px top 50px / 382px no-repeat;
}
.bar {
position: sticky;
bottom:0;
width:100%;
}
.options, .news, .submenu, .aboot {
    border:40px solid transparent;
    border-image:url('border_tiel.png') 35 round;
    font-family: 'Jersey 10';
}
#mobdiv {
    border:40px solid transparent;
    border-image:url('border_tiel.png') 32 round;
    font-family: 'Jersey 10';
    margin-bottom: 0;
    background-color: #aaa;
    border-bottom: none;
    display:none;
    }
.optionscontainer{
    display:flex;
    width:100%;
}
.options{
    display:grid;
    align-content: center;
    gap:30px;
    width: 100%;
    grid-template-columns: auto auto;
    grid-template-areas: 
    "menu1 menu2"
    "menu3 menu4";
}
.options p, .line { /* a "line" in the submenu. I don't think future me will remember what this means lol */
    display: inline;
}
.news {
    width:100%;
    border-left:none;
}
.menu1, .menu2, .menu3, .menu4 {
  padding:0 5px;
  text-align: left;
  font-size: 30px;
  text-align: center;
  color:#222;
}
.menu1:hover, .menu2:hover, .menu3:hover, .menu4:hover {
  cursor: pointer;
}
.menu1 span, .menu2 span, .menu3 span, .menu4 span, .arrow span {
  visibility: hidden;
  display: inline;
}
.menu1:hover span, .menu2:hover span, .menu3:hover span, .menu4:hover span, .arrow:hover span {
  visibility: visible;
}
.menu1 { /* "Monster Bin" */
  grid-area:menu1;
}
.menu2 { /* "Reviews" */
  grid-area: menu2;
}
.menu3 { /* "Collections" */
  grid-area: menu3;
}
.menu4 { /* "About" */
  grid-area: menu4;
}
.icogoose, .iconew {
    float:right;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
}
.icogoose:hover, .iconew:hover {cursor: pointer;}
.iconew {
    width: 100px;
    font-size: 30px;
    text-align: right;
    visibility: hidden;
}
.icogoose {
    width: 30px;
    background-image: url("icons/kiribbean_goose.png");
    display:inline;
    margin-left: 7px;
}
.feed {
    height:100px;
    overflow:scroll;
    overflow-x: hidden;
    margin-top:0;
}
.submenu, .aboot {
    display: none;
    bottom: 15px;
    position:relative;   
    z-index: 3;
}
.submenu {
    margin-left:25px;
    max-width:250px;
    text-align: left;
    min-height:50px;
    padding-right:15px;
}
.aboot {
    min-height: 350px;
    width:600px;
    margin: 0 auto;
    font-family: 'jersey 25';
    font-size: 20px;
    overflow-x: hidden;
    padding-right:5px;
}
.socials {
    display: grid;
    grid-template-columns: 30% 70%;
    row-gap: 15px;
    width: 100%;
    padding: 0 10px;
    font-size: 30px;
    color:#222;
}
.title {
    text-align: right;
    padding-right: 20px;
}
.socials i {
    margin-right: 15px;
}

.socials img {
    max-width: 50px;
    filter:invert(0%);
}
.socials img:hover {
    filter:invert(100%);
}
#kofi img:hover {
    filter:invert(0%) !important;
}
#feed {
    width:100%;
    height: 88%;
}
@media screen and (max-width: 900px){
    .optionscontainer {
        flex-direction: column;
        left:0;
        max-width: 100%;
    }
    .options, .news, .aboot, .submenu {
        border:none;
    }
    .options {
    grid-template-columns: auto;
    grid-template-areas: 
    "menu1"
    "menu2"
    "menu3"
    "menu4";
    }
    .submenu, .aboot {
        padding: 0 50px;
        bottom:0;
        left: 0;
        margin: 0;
        max-width: 100%;
        overflow-y:hidden;
    }
    .aboot {
        width: auto;
        height: auto;
    }
    #mobdiv {
        display: block;
        margin-top: 0;
    }
    .arrow {
        margin-left: auto;
        margin-right: auto;
    }
    .bar {
        position: relative;
    }
    .gba {
        background: #aaa url("sprite.png") top 15px center / 150px no-repeat;
    }
}

@media screen and (max-width:500px){
        html {
        zoom:110%;
    }
}