style.css

body
{
    background-color: #090d13;
  margin-top: 30px;
  font-family: "Open Sans", Roboto, Arial, sans-serif;
  color: antiquewhite;
}
text{
    text-align: center;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.grid-container
{ 
    margin: auto;
   text-align: left;
    padding: 5px 10px 5px 10px;
    background: #0d1117;
    border-color: #22262c;
    border: 1px solid;
    box-shadow: 5px 10px rgba(11, 11, 20, 0.692);
    border-radius: 20px 20px 20px 20px;
    width: 900px;
    height: 500px;
    
}

.grid-item {
    width:350px;
    height: 250px;
    padding: 30px;
    display: inline-grid;
  }


 h2
 { 
    
    height:30px;
    text-align: left;
    font-family: "Open Sans", Roboto, Arial, sans-serif;

    color: var(--text);
    --border: #2a2e34;
    --stroke: #737373;
    box-sizing: inherit;
    border-bottom: 1px solid var(--stroke);
    margin-block-start: 0.5em; 
    margin-block-end: 0.5em;
 }

p{
    margin-block-end: 0.5em;
    margin-block-start: 0.1em;
}

button{
    
    max-width: 100%;
    background-color: #1976d2;
    color: rgb(255, 255, 255);
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    transition: 0.2s ease-in-out;
    font-size: 15px;
    
}
button:hover {
    filter: brightness(88%);
  }

@media only screen and (max-width:800px){
    .logs{
        display:none;
    }

    video{
        display:none;
    }

    .grid-container{
        width: 450px;
        height: 500px;
        margin: auto;
    }

}