@font-face {
    font-family: Splatoon1;
    src: url(https://frozenpandaman.github.io/Splatoon1.otf);
}

@font-face {
    font-family: Splatoon2;
    src: url(https://frozenpandaman.github.io/Splatoon2.otf);
}

body {
    background-color: #28303d;
    color: #9ee1f5;
    font-family: 'Splatoon1';
}

p {
    margin: 0;
    margin-left: 1rem;
    font-family: 'Splatoon2';
    display: inline-block;
    font-size: 24px;
    vertical-align: middle;
    height:50px;
}

.build{
    display: inline-block;
    margin-left: 4rem;
    vertical-align: top;
}

.guess{
    display: inline-block;
    vertical-align: top;
}

.ggs{
    width: 25rem;
    height: auto;
}

h1, h2 {
    font-family: 'Splatoon2';
    font-weight: normal;
}

a {
    color: #9ee1f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    transition: 400ms;
}

select {
    background-color: #404355;
    color: #9ee1f5;
    border: .2rem solid #9ee1f5;
    border-radius: .5rem;
    padding: .5rem .5rem;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline;
}

.submit {
    background-color: #404355;
    color: #9ee1f5;
    border: .2rem solid #9ee1f5;
    border-radius: .5rem;
    padding: .5rem 1.2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.wepImg{
    display: inline;
    height: 50px;
    width: auto;
    vertical-align: middle;
}

a:hover {
    color: #7cf5c7;
}

.mainbody {
    text-align: center;
}

.btext {
    margin-left: 5rem;
    margin-right: 5rem;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #28303d; 
}

::-webkit-scrollbar-thumb {
  background: #404355; 
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ee1f5; 
}

@media all and (max-width: 700px) {
    .guess{
        margin: 0;
        display: block;
    }
    .abil{
        width: 100px;
        height: auto;
    }
}

/* this class does nothing, it exists so I can grab colors */
.getColor {
    color:#0067a4
}