/* FONTS */

@font-face {
    font-family: gtAlpinaRegular;
    src: url(gt-alpina/gt-alpina-regular.otf);
}

@font-face {
    font-family: gtAlpinaRegularLight;
    src: url(gt-alpina/gt-alpina-regular-light.otf);
}

@font-face {
    font-family: Coolvetica;
    src: url(coolvetica/coolvetica\ rg.otf);
}

@font-face {
    font-family: Coolvetica-Italic;
    src: url(coolvetica/coolvetica\ rg\ it.otf);
}

@font-face {
    font-family: Mont;
    src: url(mont/Mont-HeavyDEMO.otf);
}

body {
    background-color: #f2f2ea;
}

/* (1) UNIVERSAL HEADER --------------------------------------- */

.header-main {
    width: 100%;
    height: 50px;
    background-color: #d8412dff;
    display: flex;
    justify-content: space-between;
}

/* (1a) Left side of header: Home, dropdown menu eventually */

.header-main-nav {
    width: 13%;
    height: 100%;
    font-family: Coolvetica;
    font-size: 30px;
    line-height: 50px;
    color: #f2f2ea;
    display: flex;
    justify-content: flex-start;
}

.header-main a:hover {
    text-decoration: underline;
    text-decoration-color:#f2f2ea;
}

.header-main-home {
    margin-left: 10px;
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    order: 2;
}

.star-home {
    margin-top: 2%;
    margin-right: 5%;
    order: 1;
    height: 80%;
    width: 30%;
}

.star-home img{
    margin-left: 37%;
    height: 100%;
    display: none;
}

.header-main-home:hover + .star-home img{
    display: block;
}

/* (1b) Right side of header: Github & Linkedin */

.outside-links {
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    font-family: Coolvetica-Italic;
    font-size: 30px;
    line-height: 50px;
    color: #f2f2ea;
    margin-right: 10px;
}

.header-main-github {
    margin-right: 10px;
}

.star-github {
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
}

.star-github img {
    display: none;
    height: 80%;
    width: 100%;
}

.header-main-github:hover + .star-github img{
    display: block;
}

.header-main-linkedin {
    margin-right: 10px;
}

.star-linkedin {
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
}

.star-linkedin img {
    display: none;
    height: 80%;
    width: 100%;
}

.header-main-linkedin:hover + .star-linkedin img{
    display: block;
}
  

/* (2) MAIN BODY -------------------------------------------- */

.main-body {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* (2a) Left and right collages */
 
.left {
    width: 33%;
    background-image: url(images/main-collage-left.png);
    background-size:contain;
    background-repeat: repeat-y;
    background-position: left;
}

.right {
    width: 33%;
    background-image: url(images/main-collage-right.png);
    background-size: contain;
    background-repeat: repeat-y;
    background-position: right;
}

/* (2b) Center section: logo + links to pages */

.center {
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* (2b.1) Logo */
.main-logo{
    margin-top: 75px;
    width: 80%;
    height: auto;
    margin-bottom: 15px;
}


/* (2b.2) List of pages */

.pages {
    font-family: Coolvetica;
    height: fit-content;
    width: 75%;
    font-size: 35px;
    text-align: left;
    color: rgb(77, 64, 64);
    margin-left: 40px;
}

/* About */

.about {
    margin-top: 5px;
    display: flex;
}

.about a {
    order: 2;
}

.about-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.about-star img {
    display: none;
}

.about a:hover + .about-star img {
    display: block;
}

.center a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}

/* People I Love */

.people {
    margin-top: 15px;
    display: flex;
}

.people a {
    order: 2;
}

.people-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.people-star img {
    display: none;
}

.people a:hover + .people-star img {
    display: block;
}

.people a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Things I've Made */

.made {
    margin-top: 15px;
    display: flex;
}

.made a {
    order: 2;
}

.made-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.made-star img {
    display: none;
}

.made a:hover + .made-star img {
    display: block;
}

.made a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Best Thrift Finds */

.thrift {
    margin-top: 15px;
    display: flex;
}

.thrift a {
    order: 2;
}

.thrift-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.thrift-star img {
    display: none;
}

.thrift a:hover + .thrift-star img {
    display: block;
}

.thrift a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Booklists */

.booklists {
    margin-top: 15px;
    display: flex;
}

.booklists a {
    order: 2;
}

.booklists-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.booklists-star img {
    display: none;
}

.booklists a:hover + .booklists-star img {
    display: block;
}

.booklists a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Making This Site */

.making-site {
    margin-top: 15px;
    display: flex;
}

.making-site a {
    order: 2;
}

.making-site-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.making-site-star img {
    display: none;
}

.making-site a:hover + .making-site-star img {
    display: block;
}

.making-site a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Essentials */
.essentials {
    margin-top: 15px;
    display: flex;
}

.essentials a {
    order: 2;
}

.essentials-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.essentials-star img {
    display: none;
}

.essentials a:hover + .essentials-star img {
    display: block;
}

.essentials a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Outfit Log */

.outfit {
    margin-top: 15px;
    display: flex;
}

.outfit a {
    order: 2;
}

.outfit-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.outfit-star img {
    display: none;
}

.outfit a:hover + .outfit-star img {
    display: block;
}

.outfit a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Photo Journal */

.photo-journal {
    margin-top: 15px;
    display: flex;
}

.photo-journal a {
    order: 2;
}

.photo-journal-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.photo-journal-star img {
    display: none;
}

.photo-journal a:hover + .photo-journal-star img {
    display: block;
}

.photo-journal a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Essays & Writing */

.writing {
    margin-top: 15px;
    display: flex;
}

.writing a {
    order: 2;
}

.writing-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.writing-star img {
    display: none;
}

.writing a:hover + .writing-star img {
    display: block;
}

.writing a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* Music */

.music {
    margin-top: 15px;
    display: flex;
}

.music a {
    order: 2;
}

.music-star {
    margin-top: 2px;
    margin-right: 5px;
    height: 100%;
    width: 35px;
    order: 1;
}

.music-star img {
    display: none;
}

.music a:hover + .music-star img {
    display: block;
}

.music a:hover {
    text-decoration: underline;
    text-decoration-color:#d8412dff;
}


/* (2b.4) Footer: letter beads */

.gap {
    width: 100%;
    height: 200px;
    background-color: #f2f2ea;
}

.bead-footer {
    width: 60%;
}