/*sirte config*/
body{
    background-color: rgb(219, 219, 219);
    margin: 0;
    size: auto;
    min-height: 3064.800px;
    padding-top: 60px;
}
img{
    position: relative;
    transform: translate(-50%, 0);
    left: 50%;
    height: 350px;
    width: auto;
}
.imgheight{
    height: 1000px;
}
/* Text/Title */
.mainheader{
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: underline;
 font-size: 400%;
 margin-top: 0;
}
.middle{

    text-align: center;
    margin-inline: auto;
}
.context{
    font-size: 400%;
    display: block;
    text-align: center;
    margin-inline: auto;
    width: fit-content;
}
.subheader{
    font-family:Verdana, Geneva, Tahoma, sans-serif ;
    font-size: 250%;
    font-weight: bold;
    text-decoration: underline;
    width: fit-content;
    margin-inline: auto;
}
.mediaLink {
    position: relative;
    display: block;
    margin-inline: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: fit-content;
    text-decoration: underline dotted;
    color: black;
    font-size: 20px;
}
.mediaPlayer {
    position: relative;
    display: block;
    margin-inline: auto;
    height: 350px;
    width: 563px;
}
.embedMediaLink {
    text-decoration: underline dotted;
    color: black;
}
/*paragraph with no background*/
.paragraph{
    font-size: 150%;
    display: block;
    text-align: center;
    margin-inline: auto;
    width: fit-content;
    max-width: 89%;
}
/* background */
.bg{
    background-color: rgb(200, 200, 200);
    padding: 5px;
    outline-style: solid;
    outline-color: black;

}

.bookmark{
    transform: translate(0,100px);
    position: absolute;
    top: -50px;
}

/* Table */
table,th,td {
    border:1px solid black;
    border-collapse: collapse;
    background-color: rgb(200, 200, 200);
    margin-inline: auto;
    
}
th, td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 120%;
}

/* iframe/picture in the center of the page */
.mediummiddlepicture{
    transform: translate(70%,0%);
    height: 400px;
    width: 40%;
}

/* divider that has grey border in the center*/
.box {
    display: block;
    background-color: rgb(200, 200, 200);
    margin-top: 20px;
    padding: 5px;
    outline-style: solid;
    outline-color: black;
    text-align: center;
    max-width: 90%;
    margin-inline: auto;
}

.buttons {
    font-size: 125%;
}

/*Navbar Style*/
.navbar {
    position: fixed;
    display: flex;
    padding-top: 10px;
    width: 100%;
    top: 0;
    background-color: rgb(170, 170, 170);
    max-height: 47px;
    transition: transform 0.2s;
    
}
.navbar a {

    float: left;
    display: block;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
    padding: 10px;
    margin: 4px;
    margin-bottom: 0px;
    font-family: monospace;

    /*
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
    */

    transition: all 0.5s ease-out 0s;
}

.nav--hidden{
    transform:translateY(-60px);
}

.navbar a:hover{
    padding-bottom: 43px;
    transform:translateY(-10px);
}