html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main {
    display: flex;
    flex-flow: column wrap;
    height: 70%;
    width: 70%;
    align-items: center;
    justify-content: center;
}

header{
    height: 60%;
    width: 70%;
    font-size: 6vw;
    /* border: 1px solid red; */
}

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    height: 30%;
    width: 70%;
    /* border: 1px solid red; */
}

.navList{
    padding: 10px 30px;
    background-color: rgb(24, 24, 24);
    color: var(--blog-white);
    border-radius: 3px;
}

.navList:hover{
    background-color: rgb(5, 5, 5);
    color: white;
}

.link-style-removed{color: rgb(53, 53, 53);}

@media (max-width: 1500px) and (min-width: 1301px){
    .navList{padding: 9px 25px; font-size: 16px;}
}

@media (max-width: 1300px) and (min-width: 1101px){
    .navList{padding: 9px 23px;font-size: 16px;}
}

@media (max-width: 1100px) and (min-width: 901px){
    .navList{padding: 8px 22px;font-size: 15px;}
}

@media (max-width: 900px) and (min-width: 701px){
    main {height: 70%;width: 90%;}
    header{height: 60%;width: 100%;font-size: 50px;}
    nav {height: 30%;width: 80%;}
    .navList{padding: 8px 20px;font-size: 14px;}
}

@media (max-width: 700px) and (min-width: 601px){
    main {height: 70%;width: 90%;}
    header{height: 50%;width: 100%;font-size: 45px;}
    nav {height: 30%;width: 90%;}
    .navList{padding: 8px 18px;border-radius: 3px;font-size: 14px;}
}

@media (max-width: 600px) and (min-width: 501px){
    main {height: 70%;width: 90%;}
    header{height: 50%;width: 100%;font-size: 45px;}
    nav {height: 30%;width: 90%;}
    .navList{padding: 8px 17px;border-radius: 3px;font-size: 14px;}
}

@media (max-width: 500px) and (min-width: 401px){
    main {height: 70%;width: 90%;}
    header{height: 50%;width: 90%;font-size: 40px;text-align: center;}
    nav {height: 30%;width: 90%;}
    .navList{padding: 8px 15px;border-radius: 3px;font-size: 13px;}
    footer{font-size: 13px;}
}

@media (max-width: 400px) and (min-width: 301px){
    main {height: 70%;width: 90%;}
    header{height: 40%;width: 90%;font-size: 40px;text-align: center;}
    nav {height: 30%;width: 100%;}
    .navList{padding: 7px 13px;border-radius: 3px;font-size: 11px;}
    footer{font-size: 13px;}
}

@media (max-width: 300px) and (min-width: 201px){
    main {height: 70%;width: 90%;}
    header{height: 40%;width: 90%;font-size: 40px;text-align: center;}
    nav {height: 30%;width: 100%;}
    .navList{padding: 6px 10px;border-radius: 3px;font-size: 9px;}
    footer{font-size: 11px;}
}

@media (max-width: 200px){
    main {height: 70%;width: 100%;}
    header{height: 40%;width: 90%;font-size: 20px;text-align: center;}
    nav {height: 30%;width: 100%;}
    .navList{padding: 6px 9px;border-radius: 3px;font-size: 8px;}
    footer{font-size: 9px;}
}