body{ /* Sets background of the website to dark grey color */
    background-color: rgb(36, 36, 36);
    font-family: 'Courier New', Courier, monospace;
}


.header_image {
    max-width: 100%;
    max-height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

.layout {
    display: flex;
    max-width: 1900px;
    margin: 0 auto;
    gap: 40px;
}

.about {
    display: block;
    max-width: 15%;
    border: 1px double #444;
    padding: 1em;
}

.about-img {
    max-width: 100%;
    max-height: auto;
    border: rgb(255, 255, 255) double 3px;
}

.envelope-img {
    width: 120%;
}

.radar-gif {
    width: 120%;
    border: #444 double 3px;
}

.content {
    flex: 1;
    max-width: 100%;
    max-height: auto;
}

.menu {
    max-width: 10%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu a {
    display: block;
    border: 1px solid #444;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}

.menu img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}


.menu a:hover {
    background: #773939;
}

.box_image { /* Outline for the image */
    max-width: 100%;
    max-height: auto;
    border: 3px solid rgb(36, 36, 36);
}

h1 {
    color: rgb(226, 36, 36);
}

h2 {
    color: rgb(226, 36, 36);
}

h3 {
    color: rgb(226, 36, 36);
}

h4 {
    color: azure;
}

/* This controls color of text on whole website. Pragraphs */
/* ########################################### */

p {
    color: rgb(236, 236, 236);
}

/* This controls style of bullet lists */
/* ########################################### */

ul {
  list-style-type: square;
}

/* And this color of text iin bulet lists! */
/* ########################################### */

li {
    color: azure;
}

.green_text {
    color: #54ff54;
}

.warning_text {
    font-size:25px; 
    border: 2px solid; 
    text-align: center;

}