html {
    scroll-behavior: smooth;
}
.noanimation {
    opacity: 0;
}

nav ul li:hover {
    cursor: pointer;
    color: white;
}

#aboutme {
    float: right;
    width: 60%;
    padding-left: 5%;
}


article p {
    font-family: "Tahoma", "Verdana", "Arial", sans-serif;
    font-size: 18px;
}
#close {
    color: #10d1eb;
    padding-left: 15%;
    font-family: Tahoma;
    font-weight: 300;
     text-align: center;
}
#closebutton {
    color: #10d1eb;
    text-align: center;
    padding-left: 40%;
}
#closebutton:hover {
    color: white;
    cursor: pointer;
}
#close:hover {
    color: white;
    cursor: pointer;
}
#closecircle {
    height: 3em;
    width: 3em;
    border-radius: 50%;
    background-color: black;
}
#conduitgraphics {
    width: 20%;
    border: 4px;
    background-color: #10d1eb;
    float: right;
    text-align: match-parent;
    font: Times-New-Roman, serif;
    font-size: 16px;
    flex-wrap: wrap;
    transform: translateX(-20%);
    border-radius: 10%;
    padding: 3%;
}

#conduitgraphics img {
    display: inline-block;
    width: 20%;
    height: 3vh;
    border-radius: 25%;

}
#contactdiv {
    font-family: Tahoma, sans-serif;
    font-size: 1.5em;
    border: 4px;
    left: 45%;
    border-style: solid;
    background-color: #e5c716;
    box-shadow: 10px 10px 30px 10px gray;
    display: block;
    margin: 0%;
    padding: 0%;
    width: 30vw;
    height: 50vh;
    position: relative;
    clear: both;
    padding: 2%;
}

#contactform {
    width: 40%;
    border: 4px;
    padding: 3%;
    background-color: #10d1eb;
    border-radius: 25px;
    display: inline-block;
    transform: translateX(50%);
}
#contactlogo {
    width: 60%;
    margin-left: 20%;
}
#resume {
    float: right;
    width: 70%;
    padding-right: 10%;
    padding-left: 10%;
}

#errmessage {
    color: red;
    font-family: Helvetica;
    font-size: 16pt;
}


#experience {
    float: right;
    width: 70%;
    padding-right: 10%;
    padding-left: 20%;
}

figure.screenshot {
  display: inline-block; 
  margin: 15px;
  text-align: center;    /* centers caption under image */
}

figcaption {
  font-weight: 600;
  color: black;
  font-family: Tahoma, sans-serif;
  margin-top: 6px;
  font-size: 0.9rem;
}
#footer {
    display: block;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    clear: both;
    
}


#gettingtoknow {
    width: 70%;
    border-top-color: #10d1eb;
    border-top-style: solid;
    border-top-width: 20px;
    padding-top: 1%;
    padding-left: 5%;
    padding-right: 10%;
    float: right;
}

#gettingtoknow p {
    transform: translateX(-100px);
}

#gettingtoknow a {
    background-color: #e5c716;
}

h1 {
    font-family: "Verdana", "Tahoma", "Arial", sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #e5c716;
    background-color: #000000;
    text-align: center;
    width: 50%;
    display: inline-block;
    padding-top: 1%;
    padding-right: 10%;
    padding-left: 20%;
    border-radius: 50%;
}



h2 {
    font-family: "Helvetica", "Tahoma", "Arial", sans-serif;
    font-size: 24px;
    font-style: italic;
    text-align: center;
    position: relative;
}

h3 {
    font-family: "Verdana", "Tahoma", "Arial", sans-serif;
    font-size: 24px;
    text-align: center;
    border-top-width: 20px;
    padding-top: 1%;

}

#headshot {
    width: 20%;
    float: left;
    border-radius: 25px;
    transform: translateX(50px);
}

/*animation elements below*/
.animation {
    opacity: 1;
}
#openinganimation {
    display: inline-block;
    background-image: url("codingbg.png");
    background-size: cover;
    background-repeat: no-repeat;
}
#fixedbg {
    display: inline-block;
    background-image: url("codingbg.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#frame {
    flex-direction: row;
    display: inline-block;
    transform: translateX(15%);
}

#firstline {
    font: Times New Roman;
    font-size: 36pt;
    background-color: #e5c716;
    width: 30%;
    text-align: center;
    display: inline-block;
    box-shadow: 10px 10px 30px 10px gray;
    opacity: 0%;
    float: left;
    transform: translateX(100%);
    animation-name: reveal1;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

}

@keyframes reveal1 {

    0% {
        opacity: 0%;
        transform: translateY(0%);
        background-color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    25% {
        opacity: 100%;
        transform: background-color:#e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    50% {
        opacity: 100%;
        transform: background-color:cornsilk;
        box-shadow: 10px 10px 30px 10px black;
    }

    75% {
        background-color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    100% {
        opacity: 0%;
        transform: translateY(100%);
    }

}



#secondline {
    font-size: 36pt;
    color: #e5c716;
    background-color: #000000;
    width: 30%;
    text-align: center;
    display: inline-block;
    box-shadow: 10px 10px 30px 10px gray;
    opacity: 0%;
    transform: translateX(100%);

    animation-name: reveal2;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: 1;
}

@keyframes reveal2 {
    0% {
        opacity: 0%;
        transform: translateY(0%);
        background-color: #000000;
        box-shadow: 10px 10px 30px 10px gray;
    }

    25% {
        opacity: 100%;
        background-color: #000000;
        box-shadow: 10px 10px 30px 10px gray;
    }

    50% {
        opacity: 100%;
        color: darkgoldenrod;
        background-color: lightgray;
        box-shadow: 10px 10px 30px 10px black;
    }

    100% {
        opacity: 0%;
        transform: translateY(100%);
        color: darkgoldenrod;
        background-color: lightgray;
        box-shadow: 10px 10px 30px 10px black;
    }
}



#frame2 {
    transform: translateX(20%);
}

#fifthline {
    font-size: 36pt;
    text-align: left;
    background-color: #e5c716;
    width: 60%;
    display: block;
    text-align: left;
    box-shadow: 10px 10px 30px 10px gray;
    opacity: 0%;

    animation-name: reveal5;
    animation-duration: 7s;
    animation-delay: 5s;
    animation-iteration-count: 1;
}

@keyframes reveal5 {
    0% {
        opacity: 0%;
        transform: translateY(100%);
        background-color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    25% {
        opacity: 100%;
        background-color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    50% {
        opacity: 100%;
        background-color: cornsilk;
        box-shadow: 10px 10px 30px 10px black;
    }

    75% {
        background-color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    100% {
        opacity: 0%;
        transform: translateY(0%);
    }
}

#sixthline {
    font-size: 36pt;
    color: #e5c716;
    background-color: #000000;
    width: 40%;
    display: block;
    text-align: center;
    box-shadow: 10px 10px 30px 10px gray;
    opacity: 0%;

    animation-name: reveal6;
    animation-duration: 5s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes reveal6 {
    0% {
        opacity: 0%;
        transform: scale(100%);
        background-color: #000000;
        box-shadow: 10px 10px 30px 10px gray;
    }

    25% {
        opacity: 100%;
        background-color: #000000;
        color: #e5c716;
        box-shadow: 10px 10px 30px 10px gray;
    }

    50% {
        opacity: 100%;
        color: darkgoldenrod;
        background-color: lightgray;
        box-shadow: 10px 10px 30px 10px black;
    }

    75% {
        opacity: 100%;
        color: darkgoldenrod;
        background-color: lightgray;
        box-shadow: 10px 10px 30px 10px black;
        ;
        transform: scale(150%);
    }

    100% {
        opacity: 0%;
        color: darkgoldenrod;
        background-color: lightgray;
        box-shadow: 10px 10px 30px 10px black;
        ;
        transform: scale(150%);
    }
}



/*end of animation elements*/



#home {
    float: right;
    width: 60%;
    padding-right: 10%;
    padding-left: 10%;
}

input[type=text],
select {
    width: 40%;
    padding: 1%;
    margin: 1% 0;
    border: 1px solid #aaa;
    border-radius: 4px;
}

label {
    width: 20%;
    display: inline-block;
}

#library {
    width: 50%;
    border-radius: 25%;
    padding-bottom:
}


#mission {
    width: 70%;
    text-align: left;
    transform: translateX(100px);
}

#missionbox {
    width: 50%;
    float: left;
    flex-direction: column;
    text-align: left;
    transform: translateX(200px);
    padding: 3%;
}

#navlogo{
    width: 125%;
    
}

#portfolio {
    width: 80%;
    margin-left: 15%;
}
#portfolio a {
    display: inline-block;
}

#schools columns {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    border-bottom: 4px;
}

.schoollogo {
    background-color: none;

}

scroll-behavior:smooth;

section p {
    font-family: "Tahoma", "Verdana", "Arial", sans-serif;
    font-size: 18px;
}


#menubutton {
    display: none;
}
.menu {
    height: 90%;
    width: 10%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: #e5c716;
    box-shadow: 10px 10px 30px 10px gray;
    overflow-x: hidden;
    border-radius: 25px;
}


.menu li {
    position: relative;
    top: 20%;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 4%;
    text-decoration: none;
    font-size: 16pt;
    font-weight: 600;
    color: #000000;
    display: block;

}

.menu img {
    width: 70%;
    transform: translateX(-25px);
    border: 2px;
    border-radius: 25px;

}


.menu a {
    font-family: Helvetica, sans-serif;
    display: block;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 4%;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    display: block;


}

.menu a:hover {
    color: white;
}


.menu img:hover {
    width: 80%;
}

#site {
    opacity: 0%;
    animation-name: appear;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 14s;
    animation-fill-mode: forwards;
}

@keyframes appear {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}

#smallbusiness {
    height: 60%;
    width: 40%;
    transform: translateX(150px);
    border-radius: 25%;

}


#tableheading {
    font-weight: bold;
    background-color: #10d1eb;
    font-size: 24px;
    text-align: center;
}


td {
    font-size: 20px;
    padding-right: 30px;
    padding-bottom: 30px;
}

td img:hover {
    border-color: #e5c716;
    border-width: 10px;
    border-style: solid;
}


td img {
    width: 40%;
}

textarea {
    width: 100%;
}

.thumbnail {
  width: 200px;          /* fixed size for consistency */
  border: 2px solid black;
  display: block;        /* so it sits above the caption */
  margin: 0px auto;  /* centers inside figure */
    padding: 6px;
}

.thumbnail:hover {
  border: 4px solid #e5c716;
    padding: 4px;
}
#thumbnailbit {
    margin-left: 10%;
    display: block;
    clear:both;
    width: 90%;
}
#thumbnailframe {
    display: block;
    float:none;
}
#titlename {
    font-size: 48px;
    font-family: "Times New Roman", serif;
    color: #10d1eb;
    text-align: center;
}

tr {
    height: 30%;
    padding-bottom: 5%;
    padding-top: 5%;
}

#whyhire {
    float: right;
    padding-right: 15%;
}

#herovideo {
    height: 30%;
    width: 30%;
    float: right;
    transform: translateY(50%);
}

/*menu slideout*/

.show-menu {
    font-family: Tahoma; 
    font-size: 2em;
    text-decoration: none;
    color: black; 
    background: #e5c716; 
    text-align: center;
    padding: 10px 0; 
    position: relative;
    top: -20px;
    display: none;
    box-shadow:  box-shadow: 10px 10px 30px 10px gray;
}
/*Hide checkbox*/
input[type=checkbox] { 
    display: block;
}
/*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ #menu {
    display: block;
}


/*table stylings*/
   table {
      width: 100%;
      border-collapse: collapse;
      margin: auto;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    th, td {
      text-align: left;
      vertical-align: top;
      padding: 12px;
      border-bottom: 1px solid #ddd;
    }
    th {
      background: #efefef;
      width: 25%;
      font-weight: bold;
    }
    @media (max-width: 768px) {
      table, tbody, tr, th, td {
        display: block;
        width: 100%;
      }
      th {
        background: #f0f0f0;
        padding: 10px;
      }
      td {
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
      }
    }
    h1 {
      text-align: center;
      margin-bottom: 10px;
    }
    .contact {
      text-align: center;
      margin-bottom: 20px;
      font-size: 0.95rem;
    }
    .contact a {
      color: #0066cc;
      text-decoration: none;
    }
    .downloads {
      text-align: center;
      margin: 15px 0 30px 0;
    }
    .downloads a {
      display: inline-block;
      margin: 5px;
      padding: 10px 20px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      background: #10d1eb;
      color: black;
      transition: background 0.3s ease;
    }
    .downloads a:hover {
      background: #e5c716;
    }


/* media queries */

@media screen and (max-width: 1160px){
    
    #aboutme {
        display: block;
        float: none;
        margin: 2%;
        clear: both;
        width: 80%;
    }
    #openinganimation {
        display: block;
        background-image: url("codingbg.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #citations {
        left: 100%;
        width: 100vw;
        clear: both;
    }
    #contactdiv h1 {
        font-size: 1.5em;
    }
    #contactdiv {
        font-size: 1em;
        top: -2%;
    }
    .flex-container {
        width: 100vw;
        height:30vh;
    }
    #footer {
        width: 100%;
        left: 80%;
    }
    #frame {
        display: none;
    }
    #frame2 {
       display: none;
    }
    #gettingtoknow {
        float: right;
        width: 70%;
        padding-right: 10%;
        padding-left: 20%;
    }
    #headshot {
        display: block;
    }
    .menu {
        left: -20%;
    }
    #menubutton {
        padding: 1px;
        background-color: #10d1eb;
         box-shadow:  box-shadow: 10px 10px 30px 10px gray;
        display: block;
        position: fixed;
    }
    #menubutton:hover {
        cursor: pointer;
    }
    #portfolio {
        left: 0;
    }
    #site {
        opacity: 100%;
    }
    #sixthline {
        transform: translateY(-50%);
    }
    #fixedbg {
        display: inline-block;
        background-image: url("codingbg.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
}
    




@media screen and (max-width :760px) {

    nav {
        background-color: green;
    }
    article {
        width: 100vw;
    }
    #contactdiv {
        width: 90%;
        left: 0%;
        margin: 0px;
    }
    #contactdiv h1 {
        width: 60%;
    }
    .flex-container {
        width: 100vw;
        height: 30vh;
        background-size:cover;
    }
    #footer {
        width: 100vw;
        left: 20%;
    }
    h1 {
        width: 60%;
    }
    #citations {
        width: 100vw;
        left: 20%;
    }
    #fixedbg {
        display: inline-block;
        background-image: url("codingbg.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    #frame {
        display: none;
    }
    #frame2 {
        display: none;
    }
    #gettingtoknow {
        left: 30%;
        float: none;
        width: 70%;
    }
    h1 {
        width: 80%;
        margin: 0;
        padding: 0;
        font-size: 24px;
        margin-bottom: 8%;
        text-align: center;
    }
    #gettingtoknow h2 {
        width: 50%;
        left: 0px;
        margin: 0;
        padding: 0;
    }
    #headshot {
        display: block;
        float: none;
        width: 40%;
    }
    .menu {
        left: 50%;
    }
    #menubutton {
        padding: 1px;
        background-color: #10d1eb;
         box-shadow:  box-shadow: 10px 10px 30px 10px gray;
        display: block;
        position: fixed;
    }
    #menubutton:hover {
        cursor: pointer;
    }
    p {
        width: 95%;
        margin-right: 2.5%;
        margin-left: 2.5%;
    }
    #portfolio {
        left: 0;
    }
    #portfolio h1 {
        margin: 0;
        left: 0;
        padding:1%;
    }
    section {
        width: 100vw;
        display: block;
        position: relative;
        float: none;
        margin-bottom: 10%;
    }
    #site {
        opacity: 100%;
    }
    .thumbnail {
        display: block;
        float: none;
        width: 80%;
    }
    #whyhire {
        width: 100%;
        left: 20%;
    }
}