* {
    margin: 0;
    padding: 1% 0%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main.index {
    display: grid;
    grid-area: main;
    grid-template-areas: "greeting-box wave-box wave-box" "about about about" "experience-box portfolio-box contact-box";
    grid-template-columns: auto auto auto;
    grid-gap: 2em;
}

.greeting-box {
    padding-top: 50%;
    padding-bottom: 50%;
    grid-area: greeting-box;
}

.wave-box {
    animation: 1s slide-left;
    grid-area: wave-box;
    margin-right: 100%;
    width: 100%;
}

.about {
    grid-area: about;
}

.experience-box {
    grid-area: experience-box;
}

.portfolio-box {
    grid-area: portfolio-box;
}

.contact-box {
    grid-area: contact-box;
}

html {
    background-color: black;
    color: white;
}

body {
    width: 90%;
    margin: 1% auto;
    color: white;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

a:hover {
    color: white;
    transform: scale(1.05, 1.05);
    transition: transform 100ms ease-in-out;
    cursor: pointer;
}

header h1 {
    top: 50%;
    transform: translateY(40%);
    text-transform: uppercase;
}

header h2 {
    color: white;
}

footer {
    padding: 1%;
    text-align: center;
}

header {
    width: 100%;
    background-color: black;
    position: sticky;
    top: 0em;
    gap: 0em 1em;
    display: inline-block;
    display: grid;
    grid-template-areas: "name-header nav-header";
    grid-template-columns: 25% 35%;
}

nav {
    top: 50%;
    transform: translateY(-70%);
    grid-template-areas: "home experience portfolio contact";
    grid-template-columns: auto auto auto auto;
    grid-area: nav;
    grid-gap: 2% 2%;
    background-color: black;
    justify-content: end;
}

.index {
    grid-area: home;
}

.array {
    grid-area: experience;
}

.detail {
    grid-area: portfolio;
}

.form {
    grid-area: contact;
}

.link-box {
    background-color:rgb(4,170,109);
    text-align: center;
    color: white;
    font-size: x-large;
}

.link-box:visited {
    background-color: rgb(108,186,156);
    color: white;

}

nav a:link {
    color: rgb(4,170,109);
    text-decoration: none;
}

nav a:visited {
    color: rgb(108,186,156);
    text-decoration: none;
}

nav a:hover {
    color:  rgb(216, 255, 241);
}

nav a {
    text-transform: uppercase;
    padding: 1%;
    width: 150%;
}

p {
    text-indent: 1em;
}

p a:hover {
    color: rgb(216, 255, 241);
}

figure {
    text-align: center;
}

img {
    max-width: 100%;
    align-content: center;
}

figcaption {
    color: white;
}

cite {
    font-size: x-small;
}

.rounded {
    border-radius: 5%;
}

.go-left {
    float: left;
    margin-right: 1em;
}

.go-right {
    float: right;
    margin-left: 1em;
}

table {
    border: medium solid white;
    width: 100%;
    margin: auto;
    align-content: center;
}

table+p {
    padding-top: 1em;
}

td {
    padding: .5em;
}

th {
    padding: .5em;
    text-align: left;
    font-size: 115%;
}

caption {
    font-weight: bold;
    padding-top: 1em;
}

form p  {
    text-indent: 0;
}

fieldset {
    padding: 1%;
}

legend {
    margin-top: 1%;
    font-size: large;
    color: rgb(108,186,156);
}

label {
    display: block;
}

.radio label,
.checkbox label {
    display: inline;
}

input[type=submit] {
    background: rgb(108,186,156);
    color: white;
    font-size: x-large;
    padding: 1%;
}

input[type=checkbox]:hover {
    cursor: pointer;
}

input[type=radio]:hover {
    cursor: pointer;
}

input[type=submit]:hover {
    cursor: pointer;
}

.mistake {
    border-color: red
}

.greeting {
    font-size: 300%;
}

.p-greeting {
    text-indent: 0em;
    font-size: 150%;
    color:rgb(108,186,156);
}

  @keyframes slide-left {
    from {
      margin-right: -100%;
      width: 300%; 
    }
  
    to {
      margin-right: 100%;
      width: 100%;
    }
  }

.cranberry {
    width: 100%;
}

.queer {
    width: 53em;
    height: 30em;
    margin-left: 10%;
    margin-right: 10%;
}

.margin {
    margin-left: 2em;
}

.unmargin {
    margin-left: -1em;
}

.ppar {
    text-indent: 0em;
}

.title {
    color:rgb(4,170,109);
}

.pdf {
    width: 100%;
    height: 75em;
}

.activePage {
    font-size: 125%;
}

/* FTS 141 CSS */

.left {
    height: 30em;
    float: left;
    margin-bottom: 5%;
}

.right {
    height: 30em;
    float: right;
    margin-bottom: 5%;
}

.center {
    height: 30em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}

/* FTS 141 grid */

.row-1 {
    grid-area: row-1;
}

.row-2 {
    grid-area: row-2;
}

.row-3 {
    grid-area: row-3;
}

.row-4 {
    grid-area: row-4;
}

main.fts141 {
    display: grid;
    grid-area: fts-grid;
    grid-template-areas: "fts-1" "fts-2"; /* add to make new section */
    grid-template-columns: auto;
    grid-gap: 2em;
}

/* copy to make new section */
.fts-1 {
    grid-area: fts-1;
    display: grid;
    grid-template-areas: "row-1" "row-2" "row-3" "row-4";
    grid-template-columns: auto;
}

.fts-2 {
    grid-area: fts-2;
    display: grid;
    grid-template-areas: "row-1" "row-2" "row-3" "row-4";
    grid-template-columns: auto;
}