/* Information about commands 
https://developer.mozilla.org/en-US/ */

/* set up box size */
/* used for hambuger */
*::before,
*::after {
	box-sizing: border-box;
}
/* custom properties */
/* root used to says apply this above other things. */

:root {
	/* font family --RefName: attibute*/
	--ff-primary: 'Lora, serif':
	--ff-secondary: 'Roboto Slabe', monospace;
	/* front weight */
	--fw-reg: 400;
	--fw-bold: 700;
	/* font color */
	--clr-light: #fff; /* White */
	--clr-dark: #303030; /* dark gray */
	--clr-accent: #1b1a75; /* dark blue */ 

	--clr-button: #90EE90; /* light green */
	--clr-backgrd: lightgray; /* light gray */
    --clr-cnbackgrd: rgb(238, 203, 179); /*info box light pink like */
	/* font size */
	--fs-h1: 3rem;
	--fs-h2: 2.25rem;
	--fs-h3: 1.75rem;
	--fs-body: 1rem;
}

/* for large display size */
@media (min-width: 800px) {
/* font size */
    :root {
        --fs-h1: 4.0rem;
        --fs-h2: 3.5rem;
        --fs-h3: 2.75rem;
        --fs-body: 2.25rem;
    }
}

/* General styles */

html {
    scroll-behavior: smooth; /*slows down to be smooth */
	/* scroll-behavior: smooth; *//*instant scroll */
}

body {
    background: var(--clr-light); /* background */
    color: var(--clr-dark);	  /* text */	
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
} 

.section {
	padding: 0em 2em;   /* inside element to border to content */
				        /* 5 top&bottom , 2 left&right */
    margin: 0;
    padding: 0;
}

strong { font-weight: var(--fw-bold) }

:focus {
        outline: 3px solid var(--clr-button);   /* solid box color when clicked */
        outline-offset: 5px;  	                /* how far away lines from text */
}

/* buttons */

.btn {
    display: inline-block;			/* ? */
    padding: .5em 2.5em;
    background: var(--clr-button);
    color: var(--clr-dark);		    /* text color */
    text-decoration: none;
    cursor: pointer;	            /*change from arrow to hand */
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;    /* time change for transform */
}

.btn:hover {
    transform: scale(1.1);	/* size change */
}
.page-background {
    background-color: var(--clr-backgrd); 
}

/* PC nav bar */
.nav {
    display: flex; 
    position: fixed; /* Keep Nav on top of all pages */
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--clr-cnbackgrd); 
    color: var(--clr-dark);
    align-items: center;
    height: 60px; /* Total height of nav */
    z-index: 100;
}
/*
    transform: translatex(100%);
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
*/

.logo {
    display: flex;  
   	width: 90px;
    height: 50px; 
}
.nav_items {
    list-style-type: none; /* no leading dot */
    padding: 0 10px;
    display: flex;
    /* background: yellow; */ /*good for testing  */
    flex-direction: row;    /* justify-content: center; */
    justify-content: space-evenly;
    align-items: center;
} 
.nav_item { 
    margin-right: 20px; /* for space between words and logo */
}

.nav__link {
    color: inherit; /* inherit from parent navbar */
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    text-decoration: none;
}
.nav__link:hover {
    color: var(--clr-accent);
}

.nav-toggle {
    display: none;
    padding: 0.5em; /* Used for internal box size control */
    background: transparent;
    /* background: blue; *//* hambuger use to debug -Makes c=visible */
    border: 0; 
    cursor: pointer;
    position: absolute;
    right: 3em; /* distant from the right side */  
    top: 1em; /* distant from the top */
     z-index: 101; 
}

/*
.nav-open .hamburger {
        transform: rotate(.625turn);
}
    */
/*
.nav-open .hamburger::after {
    opacity: 1;
} 
*/
.hamburger {
    display: block;
    position: relative;
} 

.hamburger, 
.hamburger::before,
.hamburger::after { 
    background: var(--clr-accent);
    width: 3em; /* How long line is */
    height: 3px; /* width of each line */
    border-radius: 1em; /* rounds the end of the lines */

    transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: ''; /* words under top and bottom lines */
    position: absolute;
    left: 0;
    right: 0;
} 
.hamburger::before { 
    top: -6px; /* top line distance from center line */
}
.hamburger::after { 
    bottom: -6px; /* bottom line didstance from center line */
}
@media (max-width: 600px) {
    /* When screen size goes below 600px navbar turms off (not visible) and hambuger turns on */
   
    section {
	padding: 5em 1em;   /* Spacing for sections to move a little away from edge and between lines */
				        /* 0 top&bottom , 1 left&right */
    }
    .nav_items {
        padding: 3em 0em 3em 0em;
    }
    .logo {
        display: flex;  
   	    width: 175px;
        height: 125px; 
    }
    .nav_item {
        margin-bottom: 3em;
    }
    .nav-toggle {
        position: fixed;
        top: -6;
    }
    .nav-toggle { 
        display: block;
    } 
    .nav_list {
        display: none;
    }
}
.nav_list.nav-open {

    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute; 
    background: slategray;
    top: -17px; 
    width: 100%;
    /*right: 5em; */
   /* height: 550px; */
}
.nav__link {
    color: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    text-decoration: none;
}
/*
.section__title { *?
   /* margin-bottom: .1em; */ 
 /*   padding: 0;
    margin: 0;
}
*/
.intro {
    display: grid; 
    max-width: 100vw;
    height: 100vh;
    overflow: hidden; 
    grid-template-columns: 4.0fr 1.0fr;
}
.intro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} 
.section__title--intro {
    display: block;
    background: var(--clr-cnbackgrd);
    text-align: center;
    margin-top: 60px;
    line-height: 10px; 
}
.letstalk {
    display: grid; 
    max-width: 100vw;
    height: 100vh;
    overflow: hidden; 
    grid-template-columns: 1.0fr 4.5fr;
    grid-template-rows: auto auto auto;
    gap: 15px; 
}
.section__title--letstalktext {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent); 
    background-color: var(--clr-accent);
    margin-top: 70px; 
    margin-left: 15px;
    height: 125px;
}
.section__title--letstalktext h1 {
    color: var(--clr-cnbackgrd);
    font-style: italic;
}
.section__title--letstalkimg {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.letstalk-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 70px; 
}
.letstalk-col {
    margin: 0px;
}

.letstalkthings1, .letstalkthings2, .letstalkthings3 {
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
}
.letstalk-thing {

    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent);
    font-weight: var(--fw-reg);
    font-size: var(--fs-body);
    width: 1700px;
    margin: 0 auto; /* depaends on width. 0 is top/bottom and auto does left/right both the same or centering. */
}
.mywork {
    display: grid; 
    max-width: 100vw;
    height: 100vh;
    overflow: hidden; 
    grid-template-columns: 1.0fr 4.5fr;
    grid-template-rows: auto auto auto auto;
    gap: 15px;
}
.section__title--myworktext {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent); 
    background-color: var(--clr-accent);
    margin-top: 70px; 
    margin-left: 15px;
    height: 125px;
}
.section__title--myworktext h1 {
    color: var(--clr-cnbackgrd);
    font-style: italic;
}
.section__title--myworkimg {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.mywork-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: 2;
    grid-row: 1 / span 5;
    margin-top: 70px; 
}
.mywork-col h3 {
    margin: 1px;
}
.myworkthings1, .myworkthings2, .myworkthings3, .myworkthings4 {
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
}

.mywork-thing {
    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent);
    font-weight: var(--fw-reg);
    font-size: var(--fs-body);
    width: 2000px;
    margin: 0 auto; /*epaends on width. 0 is top/bottom and auto does left/right both the same or centering. */
}
.myworkthings5 {
    text-align: center;
    
}
.btn {
    align-items: center;
    justify-content: center;
    color: var(--clr-cnbackgrd);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    width: 400px;
    height: 85px;
    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent);
    background-color: var(--clr-accent);
}
.mypassion {
    display: grid; 
    max-width: 100vw;
    height: 100vh;
    overflow: hidden; 
    grid-template-columns: 0.45fr 1.0fr 1.0fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}
.section__title--mypassiontext {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 5px; 
    border-color: var(--clr-accent); 
    background-color: var(--clr-accent);
    margin-top: 70px; 
    margin-left: 15px;
    height: 125px;
}
.section__title--mypassiontext h1 {
    color: var(--clr-cnbackgrd);
    font-style: italic;
}
.section__title--mypassionimg {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    padding-left: 2em;
}
.mypassion-col2-1 {
    grid-column: 2 /4;      /* create column from grid line 2 to grid line 4 */
    grid-row: 1; 
    display: flex;
    align-items: center;        /* centers content vertically in flex container */
    justify-content: center;    /* centers content horizontally in flex container*/
    margin-top: 5px;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h1);
}
.mypassion-col2-2 {
    grid-column: 2;      /* create column from grid line 2 to grid line 4 */
    grid-row: 2; 
    display: flex;
    flex-direction: row;
    align-items: top;   
    justify-content: space-around; 
    font-weight: var(--fw-reg);
    font-size: var(--fs-h2);
}
.portfolio p {
    margin: 0;
    padding: 0;
}
.portfolio img {
    display: flex;
    width: 300px;
    height: 275px;
    object-fit: cover;  /* this maintains img aspect ratio */     
}
.mypassion-col3-2 {
    grid-column: 3;
    grid-row: 2; 
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 55px;
}

th, td {

    width: 100px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black; 
}
.year-col {
   width: 100px; 
}
.brand-col {
   width: 300px; 
}
.model-col {
   width: 200px; 
}
.classics {
    display: grid; 
    max-width: 100vw;
    height: 100vh;
    overflow: hidden; 
    grid-template-columns: 0.45fr 1.0fr 1.0fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}
.section__title--classicstext {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;        /* centers content vertically in flex container */
    justify-content: center;    /* centers content horizontally in flex container*/
    border-style: solid;        /* box with Classic text */
    border-width: 5px;          /* box with Classic text */ 
    border-color: var(--clr-accent);        /* box with Classic text */
    background-color: var(--clr-accent);    /* box with Classic text */
    margin-top: 70px;           /* Offset from the grid border */
    margin-left: 15px;          /* offset from the grid border */
    height: 125px;              /* box height */
}
.section__title--classicstext h1 {
    color: var(--clr-cnbackgrd);
    font-style: italic;
}
.section__title--classicsimg {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.classicscol2-1 {
    grid-column: 2 /4;
    grid-row: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h1);
}
.classicscol2-2 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;        /* centers content vertically in flex container */
    justify-content: center;    /* centers content horizontally in flex container*/
    margin-top: 1px;
}
.classicscol2-2 img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;  /* this maintains img aspect ratio */
}
.caracelcol3-2 {
    display: flex;
    flex-direction: column; 
    grid-column: 3;
    grid-row: 2;
    align-items: center;        /* centers content vertically in flex container */ 
    justify-content: center;    /* centers content horizontally in flex container*/
    margin-top: 40px; 
}
.caracelcol3-2 img {
    display: flex;
    width: 600x;
    height: 525px;
    object-fit: cover;  /* this maintains img aspect ratio */
    justify-content: center; 
    margin-top: 5px; 
}
.classic_header {
    font: h1;
}
.clw {
   /* display: inline-block;  
    vertical-align: top; */

    display: column; 
    max-width: 1000px;
    font-size: 40px;
    justify-content: center; 
} 
.classicscol3-3 {
    grid-column: 3;
    grid-row: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    margin-top: -10px;
}
.forward_img {
    display: flex;
    width: 350px;
    height: 250px;
    object-fit: cover;  /* this maintains img aspect ratio */
    margin-top: 1px; 
}  
.backward_img {
    display: flex;
    width: 250px;
    height: 175px;
    object-fit: cover;  /* this maintains img aspect ratio */
    margin-top: 1px; 
}
.backward_img:hover {
    transition: 200ms;
    transform: rotateY(120deg); 
/*    transform: rotateX(5deg); */
}

.forward_img:hover {
    transition: 200ms;
    transform: rotateY(240deg); 
/*    transform: rotateX(15deg); */
}
.forward {
    margin-right: 10px;
}
.backward {
    margin-left: 10px;
}                
.move_forward_btn {
    margin-top: 5px; 
    text-align: center;
}
.move_backward_btn {
    margin-top: 5px; 
    text-align: center;
}
/* .clpict_item img {
    transition: 5s;
} */
/*.clpict_item:hover {
   
    transform: rotateY(180deg); 
}
*/
.fadeout {
    transition: 700ms;
    opacity: 0;
}
.fadein {
    transition: 700ms;
    opacity: 1;
}
.flipped {
    transition: 100ms;
    transform: rotateX(180deg); 
}
.section__title--maptext {
    text-align: center;
    margin-top: 70px; 
} 

.footer {
    display: flex; 
    justify-content: space-between;
    height: 300px;
    overflow: hidden;
    background-color: var(--clr-cnbackgrd);
}
.footer_box1 {
    width: 10%;
    padding-left: 175px;
    overflow: hidden; 
}
.footer_box2 {
    width: 40%;
/*    background-color: var(--clr-dark); */
    overflow: hidden; 
}
.footer_box3 {
    width: 40%;
/*    background-color: var(--clr-accent); */ 
    overflow: hidden; 
}
.footer_box4 {
    width: 10%;
    text-align: center;
 /*   background-color: var(--clr-cnbackgrd); */ 
 /*   display: flex; */
 /*   align-items: center;  */     /* centers content vertically in flex container */ 
 /*   justify-content: right; */   /* centers content horizontally in flex container*/
    padding-right: 75px;
 /*   overflow: hidden; */
}
.map_img {
    width: 57em;
    height: 40em;
    object-fit: cover;  /* this maintains img aspect ratio */
}



/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
/* gmp-map {
  height: 100%;
}*/