@font-face {
    font-family: 'Lodeh-VGLD6';
    /*src: url('/Lab9/fonts-lab-9/lodeh-regular-font/Lodeh-VGLD6.ttf') format('truetype'); https://brittanyifaweb.neocities.org/Lab9/fonts-lab-9/Lodeh-VGLD6.ttf*/
    src: url(https://brittanyifaweb.neocities.org/Lab9/fonts-lab-9/Lodeh-VGLD6.woff2);
}

/* style.css for Lab 9 in C6P2 Web Development Internship - Brittany Thompson, November 26/2025 */
/* html {
    background-color: azure;
} */

main {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "width" 100;
}

body {
    background-color: aliceblue;
    font-family: 'Times New Roman', 'Lucida Sans Regular', 'Lucida Grande';
}

/* header style css */
h1 {
    font-size: 450%;
    color: rgb(73, 73, 73);
    font-family: 'Lodeh-VGLD6';
    font-weight: 700;
    font-style: normal;
}

nav ul li a {
    color: gray;
    text-decoration: none;
}


nav {
    border-bottom: 10px outset gray;
}

nav ul li {
    list-style: none;
    /* border: 1px solid red; */
}

/* main style css */



/* index.html */
.opening-h2 {
    font-size: 300%;
    width: 85%;
    margin: auto;
    padding: 20px 0 20px 0;
    text-align: center;
    text-transform: uppercase;
    color: rgb(53, 53, 53);
    font-weight: 200;
}

.index-opening1 {
    padding-top: 30px;
    border-right: 1px solid black;
    padding-right: 2%;

}

.index-section {
    padding-left: 2%;
}

.index-opening1 img {
    width: 98%;
    border-bottom: 20px outset darkgray;
}

.index-divs {
    border-bottom: 1px solid black;
    padding-top: 12px;
}

.index-span1 {
    font-style: italic;
}

.ps1-pics {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 10%;
    flex-wrap: wrap;
    align-items: center;
    border: 2px inset darkgray;
}

.ps1-pics img {
    width: 40%;
    padding: 2%;
}

/* ps1.html */
.ps1-html-container {
    padding: 2%;
    border-bottom: 1px solid black;
}

.ps1-divs {
    width: 40%;
    border-top: 1px solid black;
}

.ps1-divs img {
    padding-top: 20%;
}

.ps1-h3 {
    padding: 12% 0 15% 0;
}

/* spyro.html */
.spyro-123 {
    width: 65%;
    padding-right: 2%;
}

.spyro-descriptions {
    width: 30%;
    padding-left: 3%;
    border-left: 1px solid black;
}

.spyro-games {
    padding: 10% 0 5% 0;
    border-bottom: 1px solid black;
}

.spyro-html-blockquote {
    border-left: 3px outset gray;
    padding: 1%;
    background-color: azure;
}

/* spyro.html image: */
.spyro-ps1 {
    width: 98%;
    padding-top: 5%;
    border-bottom: 20px outset darkgray;
}

.spyro-descriptions img {
    width: 55%;
}

/* crash.html */
.crash-section1,
.crash-section2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.crash-div {
    width: 30%;
    border-bottom: 1px solid black;
}

/* ctr.html */
.ctr-sectionright {
    width: 65%;
    padding-top: 2%;
    padding-left: 5%;
}

.ctr-rightdivs {
    width: 90%;
    border-bottom: 1px solid black;
}

.ctr-rightdivs img {
    width: 100%;
    padding-top: 4%;
}

.ctr-sectionleft {
    width: 33%;
    padding-top: 2%;
    padding-right: 2%;
    border-right: 1px solid black;
}

.ctr-leftdivs {
    width: 95%;
    padding-bottom: 2%;
    border-bottom: 1px solid black;
}

/* reviews.html */
.reviews-openingp {
    width: 60%;
    text-align: justify;
    margin: auto;
    padding-bottom: 3%;
}

.reviews-section1 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    border-top: 1px solid black;
}

.reviews-div1 {
    width: 30%;
}

.reviews-section2 {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-evenly;
}

.reviews-div2 {
    width: 30%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.reviews-section3 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
}

.reviews-div3 {
    width: 30%;
    border-bottom: 1px solid black;
}

/* footer */
.index-footer {
    width: 98%;
    clear: both;
    padding-top: 50px;
    text-align: right;
    color: gray;
}