body 
{
    background-color: rgb(200, 248, 228);
}

@font-face 
{
font-family: BaliBeach;
src: url(BaliBeach-L3G6W.ttf);
}

@font-face 
{
font-family: Armanda;
src: url(ArmandaFree-BWXXB.ttf);
}

.balibeach
{
    font-family: BaliBeach;
}

.armanda
{
    font-family: Armanda;
}

h1 
{
    text-align: center;
    color: rgb(87, 12, 156);
    font-family: BaliBeach;
}

h2 
{
    color: rgb(6, 89, 6);
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

h3 
{
    text-align: center;
    font-family: Armanda;
    color: rgb(12, 108, 156);
}

h4
{
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: chocolate;
}

p 
{
    color: red;
}

a 
{
    color: hotpink;
    
}

a:link, a:visited 
{
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }

a:hover, a:active 
{
    background-color: green;
    color: white;
  }

table, th, td 
{
    vertical-align: middle;
    text-align: center;
    border:1px solid black;
    max-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-clip: content-box;
    box-shadow: inset 0 0 0 7px green;
}

.cropped-image 
{
    width: 300px;
    height: 300px;
    border: 3px solid #bbb;
}

.position-70-15 
{
    object-position: 70% 15%;

}


    /* Not used */
.image-cropped-transform 
{
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    object-fit: cover;
    object-position: 55%;
    transform: scale(0.5) translate(0, 5%);
}