@import url("//fonts.googleapis.com/css?family=Catamaran");
html, body, div, img, h1 {
  margin: 0;
  padding: 0;
  outline: 0;
}

body {
  background: #00838f;
  font-family: "Catamaran", sans-serif;
}

p {
  font-family: "Catamaran", sans-serif;
  font-size: 1em;
  color: #fff;
}

ul {
  font-family: "Catamaran", sans-serif;
  font-size: 1em;
  color: #fff;
}

h2 {
  font-family: "Catamaran", sans-serif;
  color: #fff;
}

h3 {
  font-family: "Catamaran", sans-serif;
  color: #fff;
}

strong {
  font-family: "Catamaran:wght@700", sans-serif;
  font-weight: bold;
}

.text {
  width: 85%;
  margin: 2em;
}

.contact {
   font-size: 1.8em;
   letter-spacing: 1px;
   line-height: 1em;
  }

/* a styles */
a:link,
a:active,
a:focus,
a:visited,
a:hover {
  color: #e0f7fa;
  text-decoration: none;
}

a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}

/*top nav bar*/
.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav {
  color: white;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1em;
}

.topnav a:hover {
  background-color: #444;
  color: black;
}

.topnav a.active {
  background-color: #00515e;
  color: white;
}

.imageright {
  width: 100%; 
  max-width: 350px; 
  height: 300px;
  position: relative; 
  float: right;
  margin: 2em;
}

.box {
  border: 1px solid white;
  width: 20%;
  text-align: center;
}

/*profile section */

.profile {
   font-family: "Catamaran", sans-serif;
    color: #e0f7fa;
}
.profile-pic {
    width: 240px;
    height: 240px;
    border-radius: 0 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: block;
    margin-left: auto;
   margin-right: auto;
   }

pic {
  grid-area: pic;
}

.text-container {
     width: 360px;
     /*margin-left: 256px;*/
     padding-top: 68px;
     text-align: center;
     text-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     grid-area: text;
  }
  .profile h1 {
    margin-bottom: 1.75em;
    font-weight: 400;
    font-size: 2.8em;
    line-height: .75em;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 2px 3px 2px #333;
  }
.title {
   font-size: 1.4em;
   letter-spacing: 1px;
  }
#line1::after {
    content: "\a";
    white-space: pre;
}
#line2::before {
    white-space: pre;
}



/*screens less than 600px 2 rows 1 column*/
@media screen and (max-width: 600px) {
  .profile {
  display: grid;
  align-content: center;
  justify-content: center;
  grid-template-rows: 250px 200px;
  grid-template-columns: auto;
  grid-gap: 0px;
  padding: 30px 10px;
  grid-template-areas: 'pic'
                       'text';
  }
 
 }
  

/*screens larger than 600px 1 row 2 columns*/  
@media screen and (min-width: 601px) {

.profile {
    /*width: 70%;
    /*height: 250px;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    float: none;*/
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 40% 60%;
    grid-gap: 0px;
    padding: 30px 10px;
    align-content: center;
    justify-content: center;
    grid-template-areas: 'pic text';
  }
  
}


/*slideshow */
.slide {
  width: 100%; 
  max-width: 350px; 
  height: 450px;
  overflow: hidden; 
  position: relative; 
  float: right;
  margin: 2em;
}

.slide img { 
  position: absolute; 
  animation: slide 40s infinite; 
  opacity: 0; 
  width: 100%; 
  height: auto;
}

@keyframes slide {
  0% {opacty:0;}
  25% {opacity:1;} 
  50% {opacity:1;}
  75% {opacity:0;}
  100% {opacity:0.5;}
}
.slide img:nth-child(1){animation-delay:0s;}
.slide img:nth-child(2){animation-delay:5s;}
.slide img:nth-child(3){animation-delay:10s;}
.slide img:nth-child(4){animation-delay:15s;}
.slide img:nth-child(5){animation-delay:20s;}
.slide img:nth-child(6){animation-delay:25s;}
.slide img:nth-child(7){animation-delay:30s;}
.slide img:nth-child(8){animation-delay:35s;}



/*video*/

.video {
    margin: 100 100 100 100;
}