/* removes the margin and padding for all classes, as more important objects will not need them. Other margins will be set when they are needed. Makes the font for all of the text the same, so it does not have to be declared with every class.*/
* {
    margin: 0;
    padding: 0;
    font-family: andale mono, monospace;
}

/*Creates a gradient for the background that starts white and gradually becomes light blue as the page scrolls down.*/
body {
    background: linear-gradient(to bottom, white, lightblue);
}

/*makes the top navigation bar have a balck background, the border makes the background look bigger. The text is in bold and is aligned to the middle of the screen*/
.navbar {
    text-align: center;
    color: white;
    border: 10px solid black;
    background: black;
    font-weight: bold;
    vertical-align: middle;
}

/*Makes the banner image darker so that text on top of it is easier to read. Also makes the image fill the entire width of the user's screen.*/
.bannerimg {
    max-width: 100%;
    filter: brightness(50%);
}

/*makes the color of hyperlinks white instead of the deault blue. Removes text decoration for no underlining and changing colour upon clicking a hyperlink in the navbar*/
.navlink {
    color: white;
    text-decoration: none;
}

/*Colours the text inside the div / image and aligns both the image and text to the center of the screen.*/
.container {
    position: relative;
    text-align: center;
    color: white;
}

/*Moves the text inside the image to be in the center of the image. vw is used as a measurment for the size of many classes for the sake of responsive design.*/
.centered {
    font-size: 5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*Gives padding to the first heading so that it is not touching the above element, as well as aligning the text to the center of the page. 2vw margin for responsive design.*/
.heading {
    text-align: center;
    padding-top: 2vw;
}

/*Aligns the heading to the center. Surrounding elements already have a margin, so it is not needed for this. Clears the right so that it is in the actual middle of the page instead of conforming to the floating image.*/
.visit {
    text-align: center;
    clear: both;
}

/*Aligns the heading to the center. Surrounding elements already have a margin, so it is not needed for this. Clears the right so that it is in the actual middle of the page instead of conforming to the floating image.*/
.more {
    clear: both;
    text-align: center;
}
/*Gives the paragraph a font size of 20px so that it is readable on the vast majority of screens, as well as a margin of 7vw for responsive design.*/
.para {
    margin: 7vw;
    font-size: 20px;
}

/*sizes the image so that it is only 40% of the original width, as well as gives it a border around the image that gives it curved edges. Also makes the image float to the right and have a margin of 6vw.*/
.right {
    margin: 6vw;
    float: right;
    max-width: 40%;
    border-radius: 25px;
}

/* same as last but floats to the left*/
.left {
    margin: 6vw;
    float: left;
    max-width: 40%;
    border-radius: 25px;
}