/* Start */

/* body section */

body {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    background: #485865;
    color: #f0f8ff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    padding: 2em 2em 2em;
}

/* div section */

div {
    background: #485865;
    color: #f0f8ff;
    display:inline-flex;
    padding: 0.5em;
}

/* Footer section */

footer{
    background: #485865;
    color: #f0f8ff;
    display:inline-flex;
    padding: 0.25em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    width: 5em;
}

/* html section */

html {
    background: #485865;
    color: #f0f8ff;
    background-image: #485865;
    text-align: center;
}

/* Header section */

h1 {
    background: #485865;
    color: #f0f8ff;
    font-weight: 600;
    align-self: center;
    padding-top: 50px;
    padding-bottom: 25px;

}

h2 {
    background: #485865;
    color: #f0f8ff;
    font-weight: 600;
    align-self: center;
    padding-top: 50px;
    padding-bottom: 25px;
}

h3 {
    background: #485865;
    color: #f0f8ff;
    font-weight: 600;
    align-self: center;
    padding-top: 25px;
}

h4 {
    background: #485865;
    color: #f0f8ff;
    font-weight: 600;
    align-self: center;
    padding-bottom: 25px;
}

/* img section */

img {
    align-self: center;
    background: transparent;
    padding: 3px;
    margin:  auto;
    border-radius: 3px;
    border: 2px groove;
    border-color: transparent;
    object-fit: contain;
    display: inline-flex;
    max-width: 800px;
}

.img2 {
    align-self: center;
    background: transparent;
    padding: 3px;
    margin:  auto;
    border-radius: 3px;
    border: 2px groove;
    border-color: transparent;
    object-fit: contain;
    display: inline-flex;
    max-width: 800px;
}

img:hover {
    filter: brightness(var(--value, 1)); --value:1.1;
    animation: fadelarge 2s linear 1 forwards;
}

.img:not(:hover) {
    filter: brightness(var(--value, 1)); --value:1;
    animation: fadelarge 2s linear 1 backwards;
}

.img2:hover {
    filter: brightness(var(--value, 1)); --value:1.1;
    animation: fadelarge 2s linear 1 forwards;
}

.img2:not(:hover) {
    filter: brightness(var(--value, 1)); --value:1;
    animation: fadelarge 2s linear 1 backwards;
}



@keyframes fadelarge {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
}


/* Paragrah section */

p00 {
    background: #485865;
    color: #f0f8ff;
    display:block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-align: center;
}


p01 {
    background: #485865;
    color: #f0f8ff;
    display:block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    text-align: center;
}

p02 {
    display:inline-grid;
    padding: 1em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    width: 300px;
    height; 50px;
}


/* Table section */

table {
    display:inline-flex;
}


table2 {
    
}

a:default {
    color: #58caff;

}
a:link {
    color: #58caff;

}
a:hover {
    color: #58caff;

}
a:visited {
    color: #ffffff;
}


/* End */