
body, h1, h2, p, nav, footer {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Sets a Font */
    background-color: #121212; /* Sets a background color for the body */
    color: #8b8a8a; /* Color of the Text is Grey */
    line-height: 1.6;
}

img {
    display: block; /* How the image is displayed and what it's displayed as, block in this case */
    margin: 20px auto; /* Sets the margin for the images of 20px, auto */
    max-width: 100%;   /* Sets the width of the image */
    height: auto; /* Sets Height to auto */
}


#container {
    max-width: 900px; /* Max width of the container is 900px */
    margin: 0 auto; /* Sets the margin width to 0, auto */
    padding: 20px; /* Adds padding to the container of 20 pixels */
    text-align: center; /* Moves the text to the middle of the container */
}


#container img {
    width: 100%; /* Sets the width of the images within the container */
    max-width: 600px; /* Max width of the image*/
    border-radius: 10px; /* Makes the image look rounded on the edges */
    margin-bottom: 0px; /* Margin size on the bottom(making a smaller or bigger gap from the bottom of the image) */
}


.nav-container {
    background: #1f1f1f; /* Background color of the Navigation Box */
    padding: 10px; /* Adds padding to the Navigation Box of 10px*/
    border-radius: 12px; /* Causes the box to have a rounded look of 12px */
    margin-bottom: 20px; /* Space from the bottom of the Navigation container of 20px */
    text-align: center; /* Moves the text to the center of the box */
}


.nav-container a {
    display: inline-block; /* Display of Inline-Block */
    color: #ff4b4b; /*Color of the Text of the Nav Buttons */
    text-decoration: none; /* No text-decoration(underlines, etc...) */
    margin: 0 10px;
    font-weight: bold; /* Sets the text to have a bold look */
    padding: 8px 16px; /* Adds padding to the nav buttons */
    border: 2px solid #ff4b4b; /* Border of the Nav Buttons */
    border-radius: 12px; /* Makes the buttons have a rounded look */
    transition: all 0.3s ease; /* How long the hover takes for it to dissapear and reappear */
}

.nav-container a:hover {
    background: #ff4b4b; /* Background color of the hover */
    color: #ffffff; /* Color of the Text when hover is active */
}

#content {
    background: #1c1c1c; /* Background color of the main background(behind the paragragh) */
    padding: 20px; /* Adds padding to the main background */
    border-radius: 8px; /* Round look to the edges */
    box-shadow: 0px 0px 10px rgba(255, 75, 75, 0.3); /* Box shadow of the background, gives it a better look */
}

#info h2 {
    color: #ff4b4b; /* Color of the text above the main paragragh, second title */
    margin-bottom: 10px; /* Space between the paragragh and the second title */
    text-align: center; /* Sets the second title into the middle of the screen */
}

#info p {
    font-size: 16px; /* Changes the size of the text */
    text-align: center; /* Puts the text in the middle of the box */
    margin-bottom: 30px; 
    border-radius: 8px; /* Adds rounded edges to the paragragh box */
    box-shadow: 0px 0px 10px rgba(255, 75, 75, 0.3); /* Adds a shadow to the paragragh box to have a better look */
}


video {
    display: block; /* Dispay type of the video */
    max-width: 100%; /* Max width of the video box */ 
    height: auto; /* Sets the height to auto of the video */
    margin: 20px auto; /* Sets the margin of the video */
    border-radius: 10px; /* Sets the rounded edge */
    box-shadow: 0px 0px 15px rgba(255, 75, 75, 0.4); /* Box shadow for better look */
}


.video-container {
    text-align: center; /* Makes the text centered in the video container */
    margin: 20px 0; /* Sets the margin size of the video container */
}


footer {
    margin-top: 20px; /* Gap between the main paragragh box and the footer box */
    padding: 10px; /* Padding of the footer */
    font-size: 14px; /* Sets the size of the font */
    background: #1f1f1f; /* Background color of the footer */
    border-radius: 8px; /* ROunded look to the footer box */
    color: #ffffff; /* Color of the text in the footer */
}
