:root {
    --primary-color: #f3f3f3;
    --secondary-color: #024a0e;
    --accent1-color: rgb(21, 171, 171);
    --heading-font: "Times New Roman", "Georgia", serif;
    --body-font: Arial, Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    color: #000;
}

header,
main,
footer {
    width: 900px;
    margin: 0 auto;
}

header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}

h1,
h2 {
    font-family: var(--heading-font);
    color: var(--primary-color);
    margin: 0 auto;
}

nav,
p,
section,
article {
    margin: 1rem 0 1rem 0;
    padding: 0.5rem 0 0.5rem 0;
}

article p {
    color: #000000;
}

.navigation {
    display: flex;
    list-style: none;
}

.navigation li {
    flex: 1 1 auto;
}

.navigation a {
    text-decoration: none;
    color: rgb(0, 0, 207);
    font-size: 1.3rem;
}

.socialmedia a {
    text-decoration: none;
}

.hero {
    position: relative;
}

.hero img {
    display: block;
    width: 100%;
    height: auto;
}

.hero h1 {
    position: absolute;
    top: 0.2rem;
    width: 100%;
    padding: 0.5rem;
    text-align: center;
    opacity: 0.7;
    background-color: var(--secondary-color);
}

.history {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    /* This takes the html information in order and puts them into a grid.
    for example, If it was text, text, then image, it would have the first two slots be text and the last
    would be the image. however, in the html it is formatted with the image in the middle, so it shows
    up how it was wanted. */
}

.history-text,
.history-image {
    justify-content: space-around;
}

.history-image {
    width: 100%;
    height: auto;
    margin: 0.5rem 2rem;
}

.cta {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
}

.cta-text,
.cta-image {
    justify-content: space-around;
}

.cta-image {
    width: 100%;
    height: auto;
    margin: 0.5rem 2rem;
}

.call-to-action {
    font-size: 2rem;
    grid-column: span 3;
    justify-self: center;
}

.cta-button {
    background-color: darkblue;
    color: #f3f3f3;
    text-decoration: none;
    border-radius: 6px;
}

h2 {
    background-color: var(--secondary-color);
    width: 100%;
    text-align: center;
}

.map-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 2rem;
}

.form {
    display: grid;
    align-items: center;
    width: 400px;
    padding: 1rem;
}

.column1 {
    display: grid;
    padding: .5rem 0;
    grid-template-columns: 0.75fr 2fr;
}

.column2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

textarea {
    width: 100%;
}

.form-row {
    display: flex;
    align-items: flex-start;
    width: 100%;

}

.radio-title {
    width: 100px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

button {
    font-size: 1.25rem;
    width: 100%;
    background-color: darkblue;
    color: #f3f3f3;
    border-radius: 5px;
}

.contact {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    background-color: #024a0e;
    color: #f3f3f3;
}

.contact p {
    padding: .25rem;
    margin: 0;
}

.contact a {
    text-decoration: none;
    color: rgb(57, 239, 230);
}

.trip {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    background-color: #024a0e;
    color: #f3f3f3;
    margin-bottom: 1rem;
}

.trip-desc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.trip-desc-img {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.trip-desc-img img {
    width: auto;
    max-height: 200px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

th,
td {
    text-align: center;
    padding: 0.25rem;
    border: 2px solid #010101;
}

.map {
    display: flex;
    justify-content: left;
}

.adventure {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adventure img {
    max-width: 150px;
    max-height: 200px;
    margin: 1rem;
}

.adventure2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.adventure2 img {
    max-width: 200px;
    height: auto;
}

.adventure3 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-items: center;
    align-items: center;
    margin-top: 1rem;
}

/* The way to get items in the grid format to have space between each other is to choose their 
    container (the thing they are in) and give them some padding. for example, below is what works, but if
    I were to make it the img instead of figure, the figcaption words would be also space out, which
    just looks nasty */
.adventure3 figure {
    padding: 0.5rem;
}

/* Below is how you get something to cover multiple grid segments vertically. I know, I think it doesn't make sense at all
but just work with it. */
.adv3text {
    grid-row: span 2;
    font-size: 1.25rem;
}

.hero-article {
    position: absolute;
    top: 3rem;
    width: 100%;
    padding: 0.2rem;
    opacity: .7;
    background-color: var(--accent1-color);
    color: black;
    text-align: center;
    justify-content: center;
}

.hero-article img {
    width: auto;
    height: auto;
    float: right;
    opacity: 1;
}

footer nav img {
    width: 30px;
}

footer {
    border-top: 3px dotted gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer p {
    margin: 0 auto;
}