/* test style */
a:link{
    text-decoration-line: none;
}
h1 {
    font-family: "Garamond", "Times New Roman", serif;
    font-size: 40px;
}
h2 {
    font-family: "Garamond", "Times New Roman", serif;
    font-size: 30px;
}
h3 {
    font-family: "Garamond", "Times New Roman", serif;
    font-size: 30px;
    margin-bottom: 5px;
}
p{
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    margin-top: 0px;
}
ul {
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    margin-top: 0px;
    line-height: 1.1;
}
ul li {
    margin-bottom: 20px;
}
body{
    background-color: #008080;
}

 /* Main grid*/
.grid-container {
    display: grid;
    grid-template-areas: 
        "grid-header"
        "grid-middle"
        "grid-footer"
}
.grid-header {
    grid-area: grid-header;
    background: linear-gradient(#008080, #99cccc);
    text-align: center;
    line-height: 2.0;
    display: grid;
        grid-template-columns: 0.5fr 2fr 0.5fr;
            grid-template-areas: 
                "grid-header-left" "gird-header-center" "grid-header-right"
}
.grid-middle {
    grid-area: grid-middle;
    background: linear-gradient(#99cccc, #cce5e5);
    display:grid;
        line-height: 1.15;
        text-align: left;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-areas: 
            "grid-middle-left" "grid-middle-center" "grid-middle-right"
}
.grid-footer {
    grid-area: grid-footer;
    background: linear-gradient(#cce5e5, #008080);
    text-align: center;
}

/* Header */
.grid-header-center {
	display: grid;
    grid-template-areas: 
        "header-pic header-title"
        "header-pic header-text"
}

.header-pic {
	grid-area: header-pic;
    margin-top: 40px;
    margin-bottom: 20px;
	display: grid;
	&
	img {
		border-radius: 30px;
		width:90%;
		animation-name: imagefade;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-duration: 32s;
		align-self: center;
		justify-self: center;
		grid-column: 1;
		grid-row: 1;
	}
}

.header-pic img:nth-of-type(1) {
	animation-delay: 24s;
}
.header-pic img:nth-of-type(2) {
  animation-delay: 16s;
}
.header-pic img:nth-of-type(3) {
  animation-delay: 8s;
}
.header-pic img:nth-of-type(4) {
  animation-delay: 0;
}

@keyframes imagefade {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.header-title{
    grid-area: header-title;
    margin-right: 10px;
}
.header-text{
    grid-area: header-text;
    margin-right: 10px;
}

/* Floating Year Grids */
.cv {
	display:grid;
	grid-template-columns: 1fr 9fr;
	grid-template-areas:
		"cv-year" "cv-item" 
}

.cv-item {
	padding-left:10px;
	list-style-type: none;
}

.cv-year {
	display:grid;
	justify-content: center;
	font-weight:bold;
	border-radius: 10px;
	background:white;
	padding:5px;
}


/* Mobile Screens */
@media screen and (max-width:1000px) {
    .grid-middle {
        grid-template-columns: 0.1fr 2fr 0.1fr;
    }
        .grid-header {
        grid-template-columns: 0.1fr 2fr 0.1fr;
    }
}
@media screen and (max-width:700px) {
    .grid-header-center {
        grid-template-areas: 
            "header-pic"
            "header-title"
            "header-text"
    }
}

/*Non-Academic Collapsible Section */
details {
  border: 1px solid #000;
  border-radius: 1px;
  padding: 0.5em 0.5em 0;
}
summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  display: block;
  background: #cce5e5;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
}