body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: #25282b;
    margin: 10px
    }


nav {
    text-align: center;
    }

h1 {
    text-align: center;
    }

h2 {
    margin: auto;
    font-size: xx-large;
    font-weight: bold;
    }

footer {
    text-align: center;

}

figure {
    text-align: center;
    width: 600px;
    display: block;
    padding: 20px;
    margin: auto;
    border: 2px solid black;
    background-color: #0000004f;

}

figcaption {
    font-style: italic;
}

li {
    text-align: justify;
}

td {
    border: 2px solid #000; 
    background-color: #323d61;
    width:50%;
    text-align: center;
    }

td.creator {
    border: 2px solid #000; 
    background-color: #323d61;
    margin: auto;
    width:30%;
    max-width: 40%;
    text-align: center;
    padding: 20px;
    }
    
td.video {
    border: 2px solid #000; 
    background-color: #323d61;
    margin: auto;
    max-width: 50%;
    text-align: center;
    padding: 20px;
    }

td.imagebox {
    border: 2px solid #000; 
    background-color: #323d61;
    margin: auto;
    width: 60%;
    max-width: 60%;
    max-height: 20%;
    text-align: center;
    }

td.imagecontent {
    border: 2px solid #000; 
    background-color: #323d61;
    margin: auto;
    max-width: 30%;
    text-align: center;
    padding: 10px;
    }


td.q {
    border: 2px solid #000; 
    background-color: #323d61;
    width:25%;
    text-align: center;
    font-weight: bold;
    }
    
td.a {
    border: 2px solid #000; 
    background-color: #323d61;
    width:75%;
    text-align: justify;
    }

table {
    max-width: fit-content;
    margin: auto;
}

table.introduction {
    max-width: 60%;
}

a:link {
    text-decoration: none;
    color: #54c5ff
}

a:visited {
    text-decoration: none;
    color: #c453ff;
}

a:hover {
    text-decoration: underline;
    color: white;
}

a:active {
    text-decoration: underline;
    color: white;
}

#email {
    background-color: #323d61;
    margin: auto;
    border: 2px solid black;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    width: 400px;
    }

.bubble {
    background-color: #323d61;
    margin: auto;
    border: 2px solid black;
    padding: 20px;
    border-radius: 20px;
    max-width: 600px;
    text-align: center;
    }

.block {
    background-color: #323d61;
    margin: auto;
    border: 2px solid black;
    padding: 20px;
    max-width: 50%;
    text-align: center;
    }

.blockcontent {
    background-color: #2b3452;
    margin: auto;
    border: 1px solid black;
    padding: 20px;
    max-width: fit-content;
    text-align: justify;
    }

.flex-container {
    display: flex;
    margin: auto;
    justify-content: center;
    max-width: 80%;
    padding: auto;
}

.personalaudio {
    background-color: #323d61;
    border: 2px solid black;
    padding: 20px;
    margin: 10px;
    max-width: 80%;
    max-height: fit-content;
    text-align: center;
    font-size: small;
}

.blockimg {
    background-color: #323d61;
    margin: auto;
    border: 2px solid black;
    padding: 10px;
    text-align: center;
    }

.exampleimg{
    scale: 80%;
    background-color: #0000004f;
    max-width: 720px;

}
.exampleimg:hover {
    scale: 110%;
    background-color: #0000004f;
    padding: 10px;
}
    

.center {
    text-align: center;
    width: 600px;
    display: block;
    padding: 20px;
    margin: auto;
}
.left {
    width: 50%;
}

.right {
    width: 50%;
}


.image {
    width: 100%;
    display: block;
    padding: 20px;
    margin: auto;
}


.personalimages {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    margin: auto;
    align-content: center;
    align-items: center;
}

.video {
    padding: 20px;
    margin: auto;
    align-content: center;
    align-items: center;
    background-color: #000000bd;
}