/*Typography*/
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&display=swap');
* {
    margin: 0;
    padding: 0;
}

:root {
    --header-bg: #ecdccb;
    --black: #eb5942;
    --m-green: #4fb399;
    ;
}

html {
    width: 100%;
     heigth:100%;
    max-width:60%;    
   
}

body {
    color: var(--black);


	
}

/* header styling */
header {
    background: var(--header-bg);
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 999;
    display: grid;
	
}

.header-wrapper {
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
}

#header-img {
    max-width: 100px;
    height: auto;
    margin: .25rem;
    margin-right: auto;
    margin-left: auto;
}
/* navigation styling  */

nav {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: var(--header-bg);
    width: 100%;
    display: none;
}

ul {
    list-style: none;
}

nav li {
    margin: .05rem;
    margin-bottom: 1.2rem;
    margin-left: 1.2rem;
}

nav a {
    font-size: 1.1rem;
    font-family: 'Londrina Solid', cursive;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    
}

nav a:hover {
    color: var(--m-green);
}
/* navigation-toggle */

.nav-toggle:checked ~ nav {
    display: block;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    display: block;
    background: var(--black);
    height: 3px;
    width: 30px;
    border-radius: 3px;
    position: relative;
}

.nav-toggle-label span::before, .nav-toggle-label span::after {
    content: '';
    position: absolute;
}

.nav-toggle-label span::before {
    bottom: 6px;
}

.nav-toggle-label span::after {
    top: 6px;
}

.nav-toggle-label:hover {
    cursor: pointer;
}

.nav-toggle-label span:hover {
    background: var(--m-green);
}

.nav-toggle-label span:hover:before {
    background: var(--m-green);
}

.nav-toggle-label span:hover:after {
    background: var(--m-green);
}


/*Page Wrapper*/
.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
   background: #ecdccb;
}

.wrapper > h1 {
    position: absolute;
    bottom: 45%;
    width: 100%;
/*     color: #873370; purple */
	color: #7f5100;
    font-size: 3em;
	font-family: 'Lobster', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    text-align: center;

}

.overlay {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);

 
}

/*Pages*/
section {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    overflow: scroll;
    transition: all .75s;
		
}	
	

:target {
    width: 100%;
}

section .content a{
    position: relative;
    margin: auto;
    max-width: 900px;
    width: 100%;
    color: #eb5942;
    font-size: 1em;
    font-family: 'Lobster', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    
}

  
section h1, section h2, section h3 {
    margin: 3em;
    text-align: center;
}
/* section ul {
    list-style: square;
 }
section li {
	margin: .5em;
	text-align: center;
} */
	 
section p {
     margin: auto; 
     font-family: .25em, 'Lobster', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
     text-align: center;
}

section img {
    max-width: 100%;
    height: auto;
    margin: 1rem;
    margin-right: auto;
    margin-left: auto; 
} 
	

/*Home page*/
/*About page*/
.summary {
    background: #ecdccb;
	
}

.svg-container, .svg-container iframe {
    position: relative;
    margin: auto;
    width: 250px;
    height: 250px;
    background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
}

.experience {
    background: #ecdccb;
	 
}

.svg-container, .svg-container iframe {
    position: relative;
    margin: auto;
    width: 250px;
    height: 250px;
    background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
}

/*Contact page*/
.contact {
    background: #ecdccb;

}

.svg-container, .svg-container iframe {
    position: relative;
    margin: auto;
    width: 250px;
    height: 250px;
    background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
}

.gallery {
   
	 background: #ecdccb;
}
.svg-container, .svg-container iframe {
    position: relative;
    margin: auto;
    width: 250px;
    height: 250px;
    background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;

/* .svg-container1, .svg-container1 iframe {
    position: relative;
    margin: .25em;
    height: 250px;
    width: 250px;
    background: url(anneisolated-100.jpg) no-repeat center center;
    border: 0.5em solid pink;
    border-radius: 50%;
    overflow: hidden;
}
    

 .svg-container2, .svg-container2 iframe {

	display:inline-block;
	margin:1.5em; 
    width: 200px;
    height: 200px;
    background: url(anneisolated-100.jpg)) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
	
}

/* .svg-container3, .svg-container3 iframe {

display:inline-block;
	margin:1.5em; 
    width: 200px;
    height: 200px;
    background: url(200mockup-featuring-a-framed-poster-placed-against-a-concrete-wall-4479-el1-8.jpg) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
}

.svg-container4, .svg-container4 iframe {

	display:inline-block;
	margin:1.5em; 
    width: 200px;
    height: 200px;
    background: url(200mockup-featuring-a-picture-frame-standing-on-top-of-a-small-white-bookcase-499-el-3.jpg) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;

}

.svg-container5, .svg-container5 iframe {

    display:inline-block;
	margin:1.5em; width: 200px;
    height: 200px;
    background: url(200preview-4.jpg) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
	
}

.svg-container6, .svg-container6 iframe {

display:inline-block;
	margin:1.5em;     width: 200px;
    height: 200px;
    background: url(200preview-5.jpg) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
	
}

.svg-container7, .svg-container7 iframe {

    display:inline-block;
	margin:1.5em; 
	width: 200px;
    height: 200px;
    background: url(200mockup-featuring-a-picture-frame-standing-on-top-of-a-small-white-bookcase-499-el-5.jpg) no-repeat center center;
    border: 0.5em solid #000;
    border-radius: 50%;
    overflow: hidden;
	
} 
.prof{
  background-color: red;
 
}

.prof-p{
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  
}

.project{
  display: grid;
  background-color: transparent; 
  width: 100%; 
  text-align: center;
  margin: auto;
  grid-template-columns: 50% 50%; 
  grid-template-rows: 200px 200px;
  grid-gap: 20px 0px;
}

.pj1{
  padding: 20px 20px;
  margin: 20px;
  color: black;
  border: 1px solid black;;
  
}
.pj2{
  padding: 20px 20px;
  color: black;
  margin: 20px;
  border: 1px solid black;
}
.pj3{
  padding-top: 20px;
  color: black;
  margin: 20px;
  border: 1px solid black;;
}
.pj4{
  padding-top: 20px;
  color: black;
  margin: 20px;
  border: 1px solid black;
}
 */
 
}
}

@media (max-width:736px) {

	
html {
  font: 6px, 'Lobster', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

section img {
  font-family: 'Lobster', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
   overflow: scroll;
	}
h1 {
  font-size: 2em;
  margin:auto;
}

h2 {
  font-size: 1em;
  margin:auto;
}

h3 {
  font-size: .5em;
  margin:auto;							/*mobile responsiveness for section pages only.*/
}

 p {
  font-size: .25em;
  margin: auto;
}
	
section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border:solid burlywood;	
}	
	
section .content {
	margin: auto;
     }
	
 #contact-img {
    max-width: 100%;
    height: auto;
    margin:auto;
} 
	
.svg-container, 
.svg-container iframe {
  height: 250px;
  width: 250px;
  background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
  margin: auto;
}
	
/* .svg-container-flexgrid {
      display: flex;
      flex-direction:column;
	justify-content:center;
	align-items:center;
       } */
	
}

@media (min-width:737px) and (max-width:1023px) {

	.nav-toggle-label {
        display: none;
    }

    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(460px, 2fr) 1fr;
    }

    #header-img {
        grid-column: 2 / 3;
    }

    nav {
        all: unset;
        /* takes out every styling I've done above for this element */
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        /* border: solid red; */
    }

    nav li {
        margin-bottom: 0;
    }

    nav a {
        position: relative;
    }

    nav a:hover:after {
        content: '';
        display: block;
        height: 3px;
        border-radius: 3px;
        background: var(--m-green);
        position: absolute;
        bottom: -0.5rem;
        left: 0;
        right: 0;
    }	
html {
 font: 12px,  'Londrina Solid', cursive;
}
body {
   overflow: hidden;
	}
h1 {
  font-size: 3em;
  margin:auto;
}

h2 {
  font-size: 2em;
  margin:auto;
}

h3 {
  font-size: 2em;
  margin:auto;							/*Tablet pages only.*/
}

 p {
  font-size: 1em;
  margin:auto;
}
	
section {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border:solid orange;	
}	
	
section .content {
	margin:auto;
     }
	
.svg-container, 
.svg-container iframe {
  height: 250px;
  width: 250px;
  background: url(rsz_1rsz_mcedlogo.png) no-repeat center center;
  margin: auto;


}
}
			
@media (min-width: 1024px) {

    .nav-toggle-label {
        display: none;
    }

    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(460px, 2fr) 1fr;
    }

    #header-img {
        grid-column: 2 / 3;
    }

    nav {
        all: unset;
        /* takes out every styling I've done above for this element */
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        /* border: solid red; */
    }

    nav li {
        margin-bottom: 0;
    }

    nav a {
        position: relative;
    }

    nav a:hover:after {
        content: '';
        display: block;
        height: 3px;
        border-radius: 3px;
        background: var(--m-green);
        position: absolute;
        bottom: -0.5rem;
        left: 0;
        right: 0;
    }

    html {
        font: 24px, 'Londrino Solid', cursive;
	    max-width:100%;
    }
  h1 {
  font-size: 3em;
	margin:auto;
}

h2 {
  font-size: 2em;
	margin:auto;
}

h3 {
  font-size: 1.5em;
	margin:auto;						
}

 p {
  font-size: 1.0em;
  margin:auto;
	 
}
	
section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border:solid purple;	
}	
	
section .content {
	flex:grow;
     }
	
.svg-container, 
.svg-container iframe {
  height: 800px;
  width: 800px;
  background: url(Mcedlogo.png) no-repeat center center;
  margin: auto;
    
}
}