body {
    background: url(Images/gramadoblur.png);
    margin: 0;
}
body#jogo {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url(Images/gramadoblur.png);
}
@font-face {
    font-family: broken;
    src: url("Fonts/Broken-Console.otf");
}
.header {
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    );
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row nowrap;
    border-bottom: 2px solid white;
    margin-bottom: 3px;
}
.headerjogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row nowrap;
    border-bottom: 2px solid white;
    margin-bottom: 3px;
}
.header a, .headerjogo a {
    padding: 0 30px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-family: Calibri, sans-serif;
    font-size: 16pt;
}
.header a:hover, .headerjogo a:hover{
    color: lightgray;
}
#botaojogo:hover, #botaosobre:hover, #botaoinicio:hover {
    background: lightgray;
    color: green;
}
#botaojogo, #botaosobre, #botaoinicio {
    margin-left: 15px;
    padding: 0 20px;
    color: #0a1a0c;
    background: white;
    border-radius: 20px;
}
.links {
    padding-right: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}
.logo {
    display: inline-block;
    padding-top: 2px;
    padding-left: 15px;
}
.logo b {
    font-family: Broken, sans-serif;
    font-size: 18pt;
    color: white;
}
.selected {
    padding: 5px 0;
    text-decoration: underline;
}
canvas {
    border: 5px solid black;
    display: none;
}
@font-face {
    font-family: myFont;
    src: url("Fonts/Comfortaa-Bold.ttf");
}
.container {
    position: absolute;
    display: inline-block;
}
#buttons {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 10px;
    color: white;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 20pt;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    text-align: center;
    flex-flow: column wrap;
    height: 500px;
    width: 230px;
}
#comojogartexto {
    display: none;
}
#comojogarimg {
    position: absolute;
    top: 40px;
    left: 470px;
    width: 348px;
    height: 517px;
}
#button3 {
    position: absolute;
    top: 510px;
    right: 435px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 16pt;
    padding: 3px 6px;
    border: 4px solid black;
    border-radius: 30px;
    background: white;
    color: #0a1a0c;
}
#button2 {
    position: absolute;
    top: 270px;
    right: 300px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 24pt;
    padding: 10px 20px;
    border: 4px solid black;
    border-radius: 30px;
    background: white;
    color: #0a1a0c;
}
#buttons input {
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 24pt;
    padding: 10px 20px;
    border: 4px solid black;
    border-radius: 30px;
    background: white;
    color: #0a1a0c;
}
#buttons select {
    margin-top: 10px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 16pt;
    padding: 3px 5px;
    border: 3px solid black;
    background: white;
    color: #0a1a0c;
    text-align: center;
    width: 150px;
}
#results {
    position: absolute;
    top: 190px;
    right: 50px;
    padding: 10px;
    color: white;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 24pt;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    text-align: center;
    flex-flow: column nowrap;
    height: 200px;
    width: 230px;
}
#results input {
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 24pt;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 4px solid black;
    border-radius: 30px;
    background: white;
    color: #0a1a0c;
}
#canvas {
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
}
#menu {
    position: relative;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
}
#menu img, #fim img {
    border: 5px solid black;
}
#fim {
    position: relative;
    display: none;
    justify-content: center;
    flex-flow: row nowrap;
}
.logo img {
    height: 30px;
}
#homediv {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    align-content: center;
    text-align: center;
    line-height: 3vw;
    justify-content: center;
    color: white;
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    );
    margin: 7px auto;
    width: 60%;
    border: 3px solid black;
    font-family: myFont, sans-serif;
    font-size: 1.4vw;
    padding: 0.6vw;
}
#homediv p {
    margin: 0.8vw;
}
#welcome {
    font-size: 2vw;
    font-family: myFont, sans-serif;
}
#bolas {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
    left: 0;
    margin: 2vw;
}
#bolas2 {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
    right: 0;
    margin: 2vw;
}
#bolas img, #bolas2 img {
    padding: 1.5vw;
    width: 11vw;
    height: 11vw;
}
.devinfo {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    text-align: left;
    line-height: 2vw;
    justify-content: space-between;
    color: white;
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    );
    margin: 0.6vw auto;
    width: 50%;
    border: 3px solid black;
    font-family: myFont, sans-serif;
    font-size: 1.4vw;
    padding: 0.8vw;
}
.devtitle {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    color: white;
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    );
    margin: 0.5vw auto;
    width: 14%;
    border: 3px solid black;
    font-family: myFont, sans-serif;
    font-size: 1.4vw;
}
.devtitle p {
    margin: 0.5vw;
    padding: 0;
}
.devbody {
    margin: 0.8vw;
    flex-grow: 6;
}
.devname {
    font-size: 1.8vw;
}
.desc {
    font-size: 1vw;
}
.devinfo img {
    flex-grow: 1;
    width: 13vw;
}
.devinfo p {
    margin: 0.8vw;
}