html{

    font-family: "IBM Plex Mono", monospace;

    background-color: black;

    color: #0F0;

}

body{

    display: grid;
    grid-template-columns: 25rem auto 25rem;

}

main{

    border: #0F0 1px solid;

    padding: 20px;

    background-image: url('cow.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 93%;
    background-position: 50%;
    margin: auto;

    p{

        height: 70vh;
    
        background-color: rgba(0,0,0,0.5);
    
    }

}

.pannel{

    border: #0F0 1px solid;
    padding: 10px;

}

img{

    width: 100%;

}

input{

    background-color: #000;

    color: #0F0;

    font-family: inherit;

    border-color: #0F0;


}

#text_convo{

    display: grid;
    grid-template-rows: auto 40px;
    line-height: 40px;

}

a{

    font-family:  inherit;

    color: #0F0;

    text-decoration: none;

    text-align: center;

}

h1,h2,h3,h4{

    text-align: center;

}

#navigation{

    display: none;

}

.close{

    display: none;

}

@media screen and (max-width: 80rem) {

    body{

        margin: 0;

        display: block;

    }

    main{

        padding: 0%;

        margin: auto;

        p{

            height: 50vh

        }

    }

    .pannel{

        position: fixed;
        top: 0;

        background-color: #000;

    }

    #menu{

        display: none;

    }

    footer{

        height: fit-content;

    }

    #navigation{

        display: flex;
        justify-content: space-between;
        padding: 2rem;
        visibility: hidden;

    }

    .close{

        display: block;

    }
    
}