style.css

/* Start without margin and padding, setting colors */
body {
    margin: 0;
    padding: 0;
    background-color: rgb(78, 84, 84);
    color: cornsilk;
    font-family: sans-serif;
}
/*Settings for all the sematic elements*/
header, nav, article, footer {
    width: 80%;
    margin: auto;
    margin-top: 20px;
    border: cornsilk solid 1px;
    border-radius: 10px;
    background-color: black;
    padding: 20px;
}
#content {
    margin: auto;
    padding: 10px;
}

header, footer {
    justify-content: center;
}
header {
    height: 5%; 
}
footer {
    margin-bottom: 20px;
}
/*Headings*/
h1{ 
    margin: auto;   
    font-family: 'Tangerine', cursive;
    font-size: 5em;
    justify-content: center;
    display: flex; 
}
h2 {
    font-family: 'Amatic SC';
    font-size: 2em;
    text-decoration: none;
    text-align: center;
}
/*media rules for h1 size on smaller screens*/
 @media only screen and (max-width: 600px) {
    h1 {
        font-size: 3em;
    }
}
@media only screen and (max-width: 360px) {
    h1 {
        font-size: 2em;
    }
} 
/*round image, as a block elemant*/
img {
    display: block;
    margin: auto;
    border: cornsilk solid 2px;
    border-radius: 50%;
}
/*Styling tables, dotted border, collapse border */
table {
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
    color: cornsilk;
    font-family: 'Amatic SC';
    font-size: 1.2em;
    text-align: center;
}
table,td {
    border:  rgb(44, 46, 46) dotted;
    border-collapse: collapse;
}
/*italic*/
span {
    font-style: italic;
    font-weight: lighter;
}
/*icons*/
i {
    font-size: 2ex;
    font-weight: lighter;
}
/*smaler text for copyright*/
#copy {
    font-size: 10px;
    text-align: center;
}
/*almost like a logo*/
#copy  span {
    font-family: 'Tangerine', cursive;
    font-size: x-large;
}
/*Flexbox settings, center*/
.flex-container{
    display: flex; 
    justify-content: center;
}
/*unordered list, flex, wrap*/
.flex-container ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
/*list items, grow, no bulletpoints*/  
.flex-container ul li {
    flex-grow: 1;
    list-style: none;
} 
/*buttons*/  
.flex-container button{
    margin: 5px;
    border: cornsilk solid 2px;
    border-radius: 10%;
    background-color: rgb(38, 39, 41);
    color: cornsilk;
    font-family: 'Amatic SC';
    font-size: 2em;
    text-decoration: none;
}
/*changes buttons when hoover*/ 
.flex-container ul li button:hover {
    background-color: cornsilk;
    color: black;
}
/* link text, color, no underline */
.flex-container a {
    color: cornsilk;
    font-family: 'Amatic SC';
    /* font-size: 2em; */
    text-decoration: none;
}
/*changes link text when hoover*/
.flex-container a:hover {
    background-color: cornsilk;
    color: black;
}
/*Images, rouded corners, flex, wrap*/
.flex-container img {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    border-radius: 25%;
}