/*TO DO
-look over everything again
-remove all styles that aren't being used anymore
-clean up html

*/

html {
    font-size: 10px;
    color: #DDD;
    background-color: #000;
}

/*

                                        INDEX + GLOBAL

*/

header {
    background-image: url(../images/galaxyBack-sm.jpg);
    background-size: cover;
    background-position: center center;
}

h1 {
    font-family: "EB Garamond", serif;
    font-weight: 900;
    font-size: 4.5rem;
    padding: 8rem 0 0;
    text-align: center;
}

h1 a:link {color: #FFF; border: none;}

h1 a:hover, h1 a:focus, h1 a:active {color: #FFF; border: none;}

h1 a:visited {color: #CCC; border: none;}

h1 + p {
    font-family: "EB Garamond", serif;
    font-size: 1.8rem;
    font-style: italic;
    padding: 2rem 0 5rem;
    text-align: center;
    text-shadow: 0 0 10px #000;
}

nav {padding: 3rem 0; background-color: #061A35;}

ul {
    font-family: "EB Garamond", serif;
    font-size: 1.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

li {width: 50%;}

li a {
    display: block;
    width: 100%;
    background-color: #061A35;
    padding: 1rem 0;
    border-radius: 50%;
}

a:link {
    color: #DDDDA7;
    text-decoration: none;
    border: 2px dotted #DDDDA7;
}

li a:hover {font-weight: 400; border: 2px solid #DDDDA7;}

li a:active {font-weight: 900;}

li a:visited {color: #9B8DDC; border: 2px dotted #DDDDA7;}

#here a {background-color: #DDDDA7;}

#here a:link {color: #061A35; border-color: #061A35; font-weight: 900;}

#here a:hover, #here a:focus {border-color: #061A35;}

#here a:active {font-weight: 900; border: 2px solid #9B8DDC;}

#here a:visited {color: #9B8DDC; border: 2px dotted #9B8DDC;}

footer {
    font-family: "EB Garamond", serif;
    font-size: 1.6rem;
    width: 100%;
    text-align: center;
    font-style: italic;
    position: absolute;
    padding: 4rem 0;
}

/*

                                        COLORS

*/

h2 {
    font-family: "EB Garamond", serif;
    font-size: 3.5rem;
    padding: 2rem 0;
    text-align: center;
}

h3 {
    font-family: "EB Garamond", serif;
    font-size: 2rem;
    padding: 2rem 0 0;
    text-align: center;
}

article.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem;
}

.colors {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.col {
    width: 10rem;
    height: 10rem;
    border: 1px solid #EEE;
    font-size: 1.8rem;
    font-family: "EB Garamond", serif;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

.c1 {background-color: #fac3db; color: #000;}
.c2 {background-color: #A7A5D1;}
.c3 {background-color: #061A35;}
.c4 {background-color: #DDDDA7; color: #000;}
.c5 {background-color: #014040;}
.c6 {background-color: #41A6A6;}
.c7 {background-color: #44F2C1; color: #000;}
.c8 {background-color: #4ED9B1; color: #000;}
.c9 {background-color: #663973;}
.c10 {background-color: #F2CEAE; color: #000;}
.c11 {background-color: #F2766B;}
.c12 {background-color: #BE4435;}
.c13 {background-color: #4A2B8C;}
.c14 {background-color: #C6C5D9; color: #000;}
.c15 {background-color: #9B8DDC;}
.c16 {background-color: #0367A6;}

/*

                                        TYPOGRAPHY

*/

#type {margin: 2rem 2rem 1rem; line-height: 1.3;}

p.h1 {
    font-size: 5rem; 
    text-align: center;
    font-family: "Rubik Glitch", serif; 
    color: #000;
    text-shadow: 0 0 6px #fac3db;
    margin-bottom: 1.5rem;
}

p.sub {
    font-size: 1.8rem; 
    text-align: center;
    font-family: "Charm", serif;
    margin-bottom: 4rem;
}

p.h2 {
    font-size: 2.8rem; 
    font-weight: 600;
    font-family: "Jost", sans-serif; 
    color: #A7A5D1;
    margin-bottom: 1rem;
}

p.p {
    font-size: 1.8rem;
    line-height: 1.4;
    font-family: "Jost", sans-serif;
}


/*

                                            IMAGES

*/

img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

#img {margin: 2rem;}

#img p {
    font-family: "EB Garamond", serif;
    font-size: 2rem;
    background-color: #666;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    margin-bottom: 2.5rem;
}

/*

                                        MEDIA QUERIES

*/

@media screen and (min-width: 450px) {
    #img {margin: 2rem 4rem;}
}

@media screen and (min-width: 560px) {
    
    h1, p.h1  {font-size: 6rem;}
    
    h1 + p {font-size: 1.8rem;}
    
    ul {
        font-size: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 4rem;
        margin: 0 2rem;
    }
    
    h3 {
        padding-right: 2rem;
        line-height: 103px;
        vertical-align: middle;
    }
    
    section {margin-top: 5rem;}
    
    #type {margin: 2rem 4rem;}
    
    p.h2 {font-size: 3.5rem;}
    
    #img {max-width: 70%; margin: auto;}
    
    img {margin-bottom: 4rem;}
}

@media screen and (min-width: 633px) {
    header {
        background-image: url(../images/galaxyBack-lg.jpg);
        background-position: center center;
    }

    
    #type {margin: 2rem 6rem;}
}

@media screen and (min-width: 750px) { 
    h1, p.h1 {font-size: 8rem;}
    
    p.h1.geo, p.h1.geo2 {font-size: 6rem;}
    
    ul {width: 70%; margin: auto;}
    
    footer {font-size: 1.2rem;}
    
    #type {width: 60%; margin: auto;}
    
    h2#pad {padding: 3rem 0 5rem;}
    
    #img {max-width: 50%; margin: 2rem auto 0;}
}

@media screen and (min-width: 1100px) {
    #img {max-width: 45%; margin: auto;}
}