/* EXCESSIVE COMMENTS INCLUDED BECAUSE IM NEW HERE */

/* Don't know exactly what this does (what is *?) but was included in the header tutorial */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* adds fonts */
@font-face {
    font-family: "Old London";
    src: url("fonts/old-london.regular.ttf") format("truetype");
}

@font-face {
    font-family: "Bembo-Regular";
    src: url(fonts/bembo-regular.ttf) format("truetype");
}

/* makes all links on the website either dark green by default or light green when clicked */
a:link {
    color: #2BA84A;
}

a:visited {
    color: #248232;
}

/* sets the ENTIRE site's base (aka the black background). min-height and max-width provided by header tutorial, as was overflow-x */
body {
    font-family:"Bembo-Regular";
    background-image: url("images/hotel-wallpaper-black.png");
    background-repeat: repeat;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden; 
    /* ^ overflow-x tells the site what to do "when content overflows a block-level element's left and right edges" (MDN). 
    "Hidden" makes it so the items disappear outside the element instead of exceeding it */
}

/* sets the sitewide header, DIFFERENT from the .heading class I made - headER is, of course, default */
header {
    height: 100%;
    display: flex;
    /* ^ heading tutorial has it as flex; this is not gonna influence the rest of the site because it's just the header */
    flex-direction: column;
    justify-content: center;
    /* ^ justify-CONTENT tells the site how to orient items "between and around content items along the main axis of a flex container 
    this mainly seems to be the x axis.*/
    align-items: center;
    /* ^ align-ITEMS controls all direct children rather than individual ones like in align-SELF. It controls them on the cross axis 
    this mainly seems to be the y axis*/
    padding: 20px 0 0 0;
}

/* the actual main content of the page */
main {
    height: 100%;
    display: grid;
    /* ^ HERE we need this to be a grid, because originally it was flex, which told all those grid divs within it to be flex. yeah. */
    /* now here's the question... do we need these bottom three if it's a grid now. */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* creates the white central section where all the actual content will be */
.container {
    background-color: #FCFFFC;
    background-image: url("images/natural-paper.png");
    margin-inline: auto;
    /* ^ margin-INLINE tells CSS where "the logical inline start and end margins of an element" are (MDN). 
    Setting it to auto instead of leaving it be creates a tiny gap between the elements which you can then adjust */
    max-width: 1000px;
    /* ^ the size of the container */
}

/* ----------HEADING---------- */
/* ----------HEADING---------- */
.heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    margin: 10px 0;

    /* below makes the lines */
    border-top: 5px solid #040F0F;
    border-bottom: 5px solid #040F0F;
    position: relative;
}

/* makes the top thin line */
.heading::before {
    width: 100%;
    content: "";
    height: 2px;
    background-color: #040F0F;
    margin-top: -8px;
}

/* makes the bottom thin line */
.heading::after {
    width: 100%;
    content: "";
    height: 2px;
    background-color: #040F0F;
    margin-bottom: -8px;
}

.heading h1 {
    font-size: 55px;
    display: inline-block;
    font-family: "Old London", sans-serif;
}

/* makes the line break in the top line */
.heading span {
    background-color: #FCFFFC;
    display: block;
    position: absolute;
    top: -12.5px;
    font-size: 20px;
    padding: 0 5px;
}

/* ----------NAV BAR---------- */
/* ----------NAV BAR---------- */
.navbar {
    text-align: center;
    margin-inline: auto;
    height: 40px;
    width: 100%;
    background-color: #FCFFFC;
    overflow: hidden; 
    /* ^ originally I had this set to AUTO per the W3 tutorial, but that seems to have created the weird scroll bar
    which is entirely unnecessary and looks ugly as fuck */
}

.navbar a {
    float: center; 
    /* float basically allows text/other inline elements to wrap around the target element. CENTER doesn't actually seem to be a real value...*/
    background-color: #2D3A3A;
    background-image: url("images/fabric-1-dark.png"); /* credit: http://www.atlemo.com/ Atle Mo */
    background-repeat: repeat;
    color: #FCFFFC;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    line-height: 40px; 
    /* ^ this needs to be the same as the height in .navbar for everything to work */
    padding: 40px;
    font-size: 20px;
    width: 33.33%; 
    /* ^ aka 1/5, because there's five boxes. If there were three it'd be 1/3 = 33.33% */
}

/* darkens the box when you hover over it */
.navbar a:hover {
    background-color: #040F0F;
}

/* turns the box green when you're on that page... but seems to only actually work for clicking? */
.navbar a.active {
    background-color: #2BA84A;
}

nav li {
    display: inline-block;
    min-width: 40px;
}

/* ----------GREETING----------- */
/* ----------GREETING----------- */
.greeting {
    text-align: center;
    margin-inline: auto;
    max-width: 800px;
    min-width: 800px;
    padding: 20px 0px 10px 0px;
    border-bottom: 5px solid #040F0F;
}

.greeting h2 {
    font-size: 50px;
}

/* -----------FOOTER------------ */
/* -----------FOOTER------------ */

footer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0 0 0;
}

.footing {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    margin: 10px 0;
    /* makes the lines */
    border-top: 3px solid #040F0F;
    border-bottom: 3px solid #040F0F;
    position: relative;
}

.footing::before {
    width: 100%;
    content: "";
    height: 1px;
    background-color: #040F0F;
    margin-top: -8px;
}

.footing::after {
    width: 100%;
    content: "";
    height: 1px;
    background-color: #040F0F;
    margin-bottom: -8px;
}

.footing p {
    padding: 10px;
}

/* =============================== */
/* ========== HOME PAGE ========== */
/* =============================== */

.about-section {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    max-width: 800px;
    padding: 25px 0px 25px 0px;
    border-bottom: 2px solid #2D3A3A;
}

.about-section img {
    border: none;
}

.about-text h3 {
    font-size: 30px;
}

.about-text p {
    padding: 5px;
    text-align: center;
}

.links img {
    width: 20%;
    padding: 15px;
}

.sample-section {
    display: grid;
    place-content: center; /* this combines justify-content and align-content into one! */
    text-align: center;
    gap: 30px;
    grid-template-columns: 236.66px 236.66px 236.66px;
    border-bottom: 2px solid #2D3A3A;
}

.sample-section a {
    background-color: #248232;
    text-shadow: 1px 1px 2px #2D3A3A;
    text-decoration: none;
    color:#FCFFFC;
    padding: 10px;
    min-height: 200px;
}

.sample-section a:hover {
    box-sizing: border-box; /* this plus width and padding makes the border not move the content inside */
    width: 100%;
    border: 5px #2BA84A solid;
    /* Padding in .sample-section a MINUS the border's size, to prevent shifting */
    padding: 5px;
}

.sample-section p {
    padding: 5px;
}

.sample-section h4 {
    font-size: 24px;
}

.favorite-games {
    padding: 10px 0px 10px 0px;
    text-align: center;
    align-items: center;
    justify-items: center;
    max-width: 800px;
}

.favorite-games img {
    display: inline-block;
    width: 25%;
    margin: auto;
}

/* =============================== */
/* ======== PROJECT PAGE ========= */
/* =============================== */

.project {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 800px;
    border-bottom: 2px solid #2D3A3A;
}

.project a {
    background-color: #248232;
    color:#FCFFFC;
    text-shadow: 1px 1px 2px #2D3A3A;
    text-decoration: none;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 800px;
}

.project a:hover {
    box-sizing: border-box; /* this plus width and padding makes the border not move the content inside */
    width: 100%;
    border: 5px #2BA84A solid;
    /* Padding in .project a MINUS the border's size, to prevent shifting. */
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
}

.project h6 {
    color: #FCFFFC;
    font-size: 20px;
}

.project h3 {
    font-size: 30px;
}

.project p {
    font-size: 18px;
}

.relevant-activities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 800px;
}

.relevant-activities div {
    background-color: #248232;
    color:#FCFFFC;
    text-shadow: 1px 1px 2px #2D3A3A;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 800px;
}

.relevant-activities h6 {
    color: #FCFFFC;
    font-size: 15px;
}

.relevant-activities h3 {
    font-size: 20px;
}

.relevant-activities p {
    font-size: 10px;
}

/* =============================== */
/* ======== CONTACT PAGE ========= */
/* =============================== */

.contacts {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    max-width: 800px;
    padding: 25px 0px 25px 0px;
    border-bottom: 2px solid #2D3A3A;
    text-align: center;
}

.contacts h3 {
    font-size: 30px;
}

.links img {
    width: 20%;
    padding: 10px;
}

.links a {
    text-decoration: none;
}

.site-credits {
    display: grid;
    margin: auto;
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    max-width: 800px;
}

.site-credits p {
    padding: 5px;
}

.site-credits h3 {
    font-size: 30px;
}

.site-credits h4 {
    font-size: 20px;
}

/* =============================== */
/* ========== 404 PAGE =========== */
/* =============================== */

.error {
    color: #FCFFFC;
    text-shadow: 1px 1px 2px #248232;
    text-align: center;
    padding: 20px;
}

.error h2 {
    font-size: 55px;
    display: inline-block;
    font-family: "Old London", sans-serif;
}

.error h4 {
    font-size: 30px;
}

.error p {
    font-size: 20px;
}

.error img {
    width: 40%;
}