:root {
    --red: #ee0a37;
    --white: hsl(210, 28%, 95%);
    --lightBlue: #00bfff;
    --darkBlue: #0b0b14;
    --offWhite: hsl(210,28%, 70%);
}

/* MAIN */
*{
    box-sizing: border-box;
}

body {
    background-color: var(--darkBlue);
    background-attachment: fixed;
    font-size: larger;
    color: var(--white);
    margin: auto;
    max-width: 2000px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 15px;
    text-align: center;
}

header {
    padding: 25px; 
}

header img {
    width: 300px;
}
main {
    margin: auto;
    animation: load 1s;
    padding: 25px;
    border-radius: 150px;
    
}

h4, h5, h6 {
    color: var(--offWhite);
    font-family: 'Courier New', Courier, monospace;
}

h4 {
    margin-top: -15px;    

}

p, ul, ol, a {
    color: var(--offWhite);
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
}

a {
    color: var(--white);
    text-decoration: none;
    padding: 15px;
    border: 1px var(--white) solid;
    margin: 15px;
    text-align: center;
    border-radius: 25px;
    width: 250px;
    transition:  transform .5s;
}


a:hover {
    border: 1px var(--red) solid;
    color: var(--red);
    background-color: #190005;
    transform: scale(1.1);

}

/* TABLE */
    table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        margin: auto;

    }
    tr, td, th {
        padding: 15px;
    }

    td {
        font-family: monospace;
        color: var(--offWhite);
        font-size: larger;
    }
    .heading {
    border-bottom: 1px var(--offWhite) solid;

}

/* FLEX */

.flex {
    display: flex;
    flex-flow: row wrap;
    gap: 50px;
justify-content: center;
align-items: center;
}

.update {
    max-width: 500px;
}

img {
object-fit: contain;    
width: 500px;
    max-width: 100%;
    transition: transform .2s;
}

main img:hover {
    transform: scale(1.2);
}

/* FOOTER */

#social-buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.svg {
    color: white;
}

/* NAV */

nav {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: auto;
    justify-content: center;
}

/* ANIMATION */



@keyframes load {
    from {
        transition: opacity 1s; 
        position: relative;
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        opacity: 1;

    }
}

/* MOBILE  */

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

body {
    padding: 5px;
    margin: auto;
    font-size: 1em;
}

header img {
    width: 50%;
}

a {
width: 100%;
}

img {
    object-fit: contain;    
    width: 500px;
    max-width: 100%;    
}

main img:hover {
    transform: scale(1);
}
  }