:root {
    /* Color Variables */
    --off-white: #f8fdff;
    --dark-blue: #292546;
    --pale-purple: #BBB8D1;
    --dark-green: #798276;
    --pale-green: #B0BAAD;
    --light-gray: #EBEBEB;
    --mid-gray: #C6CACC;
}

#site-title {
    color:  var(--dark-blue);
    font-family:'Caudex', serif;
    font-size: 2.3rem;
    font-weight: 400;
    text-align: center;
}
#site-title:hover {
    color: var(--dark-green);
}
nav {
    background-color: var(--pale-green);
    width: 100vw;
    height: 8vh;
    margin: 0 0 0 -0.5rem;
    padding: 1rem 0 1rem 0;
    text-align: center;
}
ul {
    list-style-type: none;
    display: flex;
    align-items: baseline;
    flex-direction: row;
    justify-content: center;
}
li {
    padding: 0 1rem 0 1rem;
}
#home-nav {
    color: var(--dark-blue);
    font-size: 1.2rem;
    transition: 0.3s;
}
#home-nav:hover {
    text-decoration: underline;
}
#home-nav:visited {
    color: var(--dark-blue);
}
#contact-nav {
    color: var(--dark-blue);
    font-size: 1.2rem;
    transition: 0.3s;
}
#contact-nav:hover {
    text-decoration: underline;
}
#contact-nav:visited {
    color: var(--dark-blue);
}
#about-nav {
    color: var(--dark-blue);
    font-size: 1.2rem;
    transition: 0.3s;
}
#about-nav:hover {
    text-decoration: underline;
}
#about-nav:visited {
    color: var(--dark-blue);
}

body {
    background-color: var(--light-gray);
    height: fit-content;
}
a:link {
  text-decoration: none; /* removes  default underline for links*/
}

#short-info {
    color: var(--dark-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-align: center;
}

.editor {
    display: grid;
    /* grid-template-columns: 1fr 0fr 2fr 2fr; */
    background-color: var(--off-white);
    border-style: solid;
    border-width: 1px;
    border-color: var(--dark-blue);
    height: fit-content;
    /* max-width: 90vw; */
    max-width: 1300px; 
    padding: 0rem 0rem 1rem 1rem;
    margin: auto;
    margin-bottom: 2rem;
    column-gap: 1rem;
    /* 			overflow: visible; */    
    /* align-items: center; */
    overflow: hidden;
}
.colors {
    display: grid; 
    grid-template-columns: 6rem 6rem;
    justify-items: center;
    padding: 0rem 1rem 1rem 0rem;
    column-gap: 1rem;
    width: 12rem;
    height: 25rem;
}
#color1{
    background-color: var(--light-gray);
    width: 6rem;
    height: 6rem;
    /* margin-left: -13em; */
    /* margin-left: -9.5em; */
    margin-top: 2rem;
    border-radius: 50%;
    grid-column: 1/2;
    grid-row: 1/auto;
}
#color1:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color1value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
    /* border-radius: 50%; */
}
#color2{
    background-color: var(--mid-gray);
    width: 6rem;
    height: 6rem;
    /* margin-left: -7em; */
    margin-top: 2rem;
    border-radius: 50%;
    grid-column: 2/auto;
    grid-row: 1/auto;
}
#color2:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color2value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
}
#color3{
    background-color: var(--pale-purple);
    width: 6rem;
    height: 6rem;
    /* margin-left: -13em; */
    margin-top: 10.5rem;
    border-radius: 50%;
    grid-column: 1/auto;
    grid-row: 1/auto;
}
#color3:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color3value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
}
#color4{
    background-color: var(--dark-green);
    width: 6rem;
    height: 6rem;
    /* margin-left: -7em; */
    margin-top: 10.5rem;
    border-radius: 50%;
    grid-column: 2/auto;
    grid-row: 1/auto;
}
#color4:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color4value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
}
#color5{
    background-color: var(--pale-green);
    width: 6rem;
    height: 6rem;
    /* margin-left: -13em; */
    margin-top: 19rem;
    border-radius: 50%;
    grid-column: 1/auto;
    grid-row: 1/auto;
}
#color5:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color5value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
}
#color6{
    background-color: var(--dark-blue);
    width: 6rem;
    height: 6rem;
    /* margin-left: -7em; */
    margin-top: 19rem;
    border-radius: 50%;
    grid-column: 2/auto;
    grid-row: 1/auto;
}
#color6:hover {
    width: 7rem;
    height: 7rem;
    cursor: pointer;
}
#color6value {
    display: none;
    position: absolute;
    width: 2rem;
    height: 2rem; 
}
#font1 {
    font-family:'Caudex', serif;
    grid-column: 3/auto;
    grid-row: 1/auto;
}
#h1f1 {
    font-size: 4rem;
}
#h1f1:hover{
    cursor: pointer;
}
#h3f1 {
    font-size: 1.8rem;
}
#h5f1 {
    font-size: 1.4rem;
}
#smallest-font1 {
    font-size: 1rem;
}

/* This now works, but needs to be changed to appear when Font 1 is clicked on 
    also the placement is strange */
#input-font1{
    display: none;
    position: absolute;
    margin-top: 2rem;
} 

#font2 {
    font-family: 'Montserrat', sans-serif;
    grid-column: 4/auto;
    grid-row: 1/auto;
    padding: 0 1rem 0 0rem;
}
#h1f2 {
    font-size: 4rem;
}
#h1f2:hover{
    cursor: pointer;
}
#h3f2 {
    font-size: 1.8rem;
}
#h5f2 {
    font-size: 1.4rem;
}
#smallest-font2 {
    font-size: 1rem;
}

#input-font2 {
    display: none; 
    position: absolute;
    margin-top: 2rem;
}
#reset-btn {
    color: var(--dark-blue);
    background-color: var(--light-gray);
    font-family:'Caudex', serif;
    width: 4rem;
    height: 2rem;
    margin: -2rem 1rem 0 0 ;
    border-color: var(--dark-green);
    border-radius: 5px;
    grid-column: 5/auto;
    grid-row: 4/auto;
    /* justify-self: flex-end; */
}

/* Tab styling */
.tab {
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    border: none;
    /* max-width: 91.2vw; */
    max-width: 1300px;
    margin: auto;
}
/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    color: var(--dark-green);
    float: left;
    border: 1px solid var(--dark-blue);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 1.2rem;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: var(--mid-gray);
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: var(--off-white);
    border: 1px solid var(--dark-blue);
    border-bottom: none;
}

/* Style the tab content */
.tabcontent {
    background-color: var(--off-white);
    /* max-width: 89.4vw; */
    max-width: 1300px;
    padding: 6px 12px;
    border: 1px solid var(--dark-blue);
    border-top: 1px solid var(--dark-blue);
    margin: auto;
    overflow: hidden;
}


/* Homepage */
#homepage-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
/* homepage desktop */
#desktop-container-homepage {
    /* background-color: #292546; */
    width: 45rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-d{
    background-color: #EBEBEB;
    /* width: 50vw; */
    width: 50rem;
    /* height: 37vw; */
    height: 50rem;
}
#header-d {
    background-color: #BBB8D1;
    /* width: 50vw; */
    /* width: 720px; */
    width: 45rem;
    /* height: 4vh; */
    height: 2rem;
}
#site-title-d {
    font-family: 'Caudex', serif;
    /* margin-left: 3vw; */
    margin-left: 2rem;
    
/* 			padding-bottom: 0.5rem; */
}
#nav-menu {
    font-family: "Caudex", serif;
    text-align: right;
    /* margin-top: -4vh;  */
    margin-right: 3vw;
    margin-bottom: -5vh; 
    margin: -2rem 2rem -4rem 0;
/* 			padding: 0.5rem; */
}
.body-d {
    /* width: 50vw; */
    width: 45rem;
    height: fit-content;
}
#homepage-title-d {
    text-align: center;
    font-size: 1.5em;
    /* margin-top: -0.2vh; */
    margin-top: 0.5rem;
}
#home-img-d {
    width: 15rem; 
    height: 15rem; 
    /* margin-left: 3vw;  */
    /* margin-top: -1vh; */
    margin: -1rem 0 0 2rem;
}
#figcaption-d {
    color: #798276;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65em; 
    /* margin-left: 8vw;  */
    /* margin-bottom: 1rem; */
    margin: 0 0 1rem 6rem;
}
#body-text01 {
    font-family: 'Montserrat', sans-serif;
    font-size: .9em; 
    /* line-height: 1.5em; */
    /* margin-top: -23vh; */
    /* margin-left: 24vw; */
    margin: -10rem 0 0 20rem;
}
#strip-d {
    background-color: #C6CACC;
    text-align: center;
    /* width: 42vw; */
    width: 38rem;
    /* height: 16.5vh; */
    height: 7rem;
    /* margin-top: 16vh; */
    margin-top: 7rem;
    /* padding: 0 4vw 0 4vw; */
    padding: 0 3.5rem 0 3.5rem;
}
#strip-title {
    font-family: 'Caudex', serif;
}
#strip-text01 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em; 
    /* line-height: 1.5em; */
}
#btn01 {
    background-color: #292546;
    color: var(--off-white); 
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em; 
    border-radius: 16px;
}
#btn01:hover {
    background-color: #BBB8D1;
    color: #292546;
}
#footer-d {
    background-color: #BBB8D1;
    /* width: 50vw; */
    width: 45rem;
    height: 7.5vh;
    margin-top: 4vh; 
    margin-bottom: 5vh;
}
/* Homepage Mobile View CSS */
#mobile-container-homepage {
    /* background-color: #292546; */
    width: 25rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-m{
    background-color: #EBEBEB;
    /* width: 28vw; */
    width: 400px;
    /* height: 35.2rem; */
    /* height: 37vw; */
    height: 35rem;
}
#header-m {
    background-color: #BBB8D1;
    /* width: 28vw; */
    width: 25rem;
    /* height: 4vh; */
    height: 2rem;
}
#site-title-m {
    /* margin-left: 3vw; */
    margin-left: 2rem;
}
#nav-menu-m {
    font-family: "Caudex", serif;
    text-align: right;
    /* margin-top: -4.5vh;  */
    /* margin-right: 3vw; */
    margin: -2rem 2rem 0 0;
}
.body-m {
    /* width: 28vw; */
    width: 25rem;
    height: fit-content;
}
#homepage-title-m {
    text-align: center;
    font-size: 1.5em; 
    /* margin-top: -0.2vh;  */
    margin-top: 0.5rem;
}
#home-img-m {
    width: 15rem; 
    height: 15rem; 
    /* margin-left: 5vw;  */
    /* margin-top: -3vh; */
    margin: -1rem 0 0 5rem;
}
#figcaption-m {
    color: #798276;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65em;
    /* margin-left: 9vw; */
    /* margin-top: 0vh; */
    margin: 0 0 0 9rem;
}
#body-text01-m {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em; 
    /* line-height: 1.5em; */
    text-align: center;
    /* margin-top: 0.5vh;  */
    margin-top: 0.5rem;
}
#strip-m {
    background-color: #C6CACC;
    text-align: center;
    /* width: 20vw; */
    width: 18rem;
    /* height: 16vh; */
    height: 6.5rem;
    margin-top: -1vh;
    /* padding: 0 4vw 0 4vw; */
    padding: 0 3.5rem 0 3.5rem;
}
/* .strip-title-m {

} */
#strip-text01-m {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em; 
    /* line-height: 1.5em; */
    /* margin-top: -1vh; */
    /* margin-bottom: 0.2vh; */
    margin: -1rem 0 0.5rem 0;
}
#btn01-m {
    background-color: #292546;
    color: #F8FDFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em; 
    text-align: center;
    border-radius: 16px;
}
#btn01-m:hover {
    background-color: #BBB8D1;
    color: #292546;
}
#footer-m {
    background-color: #BBB8D1;
    /* width: 28vw; */
    width: 25rem;
    /* height: 6vh; */
    height: 5rem;
    /* margin-top: 3vh;  */
    margin-top: 1rem;
}


/* #Contact-page */
#contact-page-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
/* Desktop contact page */
#desktop-container-contact-page {
    /* background-color: #292546; */
    width: 45rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-cd{
    background-color: #EBEBEB;
    /* width: 50vw; */
    width: 750px;
    /* height: 39vw; */
    height: 35rem;
}
#header-cd {
    background-color: #BBB8D1;
    /* width: 50vw;
    height: 5vh; */
    width: 45rem;
    /* height: 4vh; */
    height: 2rem;
}
#site-title-cd {
    font-family: "Caudex", serif;
    /* margin-left: 3vw; */
    margin-left: 2rem;
}
#nav-menu-cd {
    font-family: "Caudex", serif;
    text-align: right;
    /* margin-top: -4vh; 
    margin-right: 3vw;
    margin-bottom: -5vh;  */
    margin-right: 3vw;
    margin-bottom: -5vh; 
    margin: -2rem 2rem -4rem 0;
}
.body-cd {
    /* width: 50vw; */
    width: 45rem;
    height: fit-content;
}
#homepage-title-cd {
    font-family: "Caudex", serif;
    text-align: center;
    font-size: 1.5em;
    margin-top: 1vh;
}
#strip-cd {
    background-color: #C6CACC;
    text-align: center;
    /* width: 35vw;
    height: 13rem;
    margin-top: 4vh;
    margin-left: 7vh;
    padding: 0 4vw 0 4vw; */
    width: 32rem;
    height: 13rem;
    margin-top: 2rem;
    margin-left: 6vh;
    padding: 0 3.5rem 0 3.5rem;
}
#strip-text01-cd {
    font-size: 0.8em;
}
#name-label-cd {
    font-family: 'Caudex', serif;
}
#name-cd {
    font-family: 'Montserrat', sans-serif;
    width:20.5rem; 
    margin-top:2vh; 
}
#email-label-cd {
    font-family: 'Caudex', serif;
}
#email-cd {
    font-family: 'Montserrat', sans-serif;
    width:20.5rem; 
    margin-top:2vh;
}
#subject-label-cd {
    font-family: 'Caudex', serif;
    float:left; 
    margin-top: 2rem;
    margin-left: 3rem;
}
#subject-cd {
    font-family: 'Montserrat', sans-serif;
    height:50px; 
    width: 24rem; 
    margin-top: 1rem; 
    margin-bottom: 1rem; 
}
#submit-btn-cd {
    color: #f8fdff;
    background-color: #292546; 
    font-family: 'Montserrat', sans-serif; 
    float: right;
}
#submit-btn-cd:hover {
    background-color: #BBB8D1;
    color: #292546;
}
#footer-cd {
    background-color: #BBB8D1;
    /* width: 50vw; */
    width: 45rem;
    height: 8vh;
    /* margin-top: 26vh; */
    margin-top: 12rem;
}
/* mobile contact page */
#mobile-container-contact-page {
    /* background-color: #292546; */
    width: 25rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-cm{
    background-color: #EBEBEB;
    /* width: 28vw; */
    width: 400px;
    /* height: 39vw; */
    height: 35rem;
}
#header-cm {
    background-color: #BBB8D1;
    /* width: 28vw; */
    width: 25rem;
    /* height: 5vh; */
    height: 2rem;
}
#site-title-cm {
    /* margin-left: 3vw; */
    margin-left: 2rem;
}
#nav-menu-cm {
    font-family: "Caudex", serif;
    text-align: right;
    /* margin-top: -4vh;
    margin-right: 3vw; */
    margin: -2rem 2rem 0 0;
}
.body-cm {
    /* width: 28vw; */
    width: 24rem;
    height: fit-content;
}
#homepage-title-cm {
    text-align: center!important;
    font-size: 1.5em; 
    /* margin-top: -0.2vh;  */
    margin-top: 0.5rem;
}
#body-text01-cm {
    font-size: 0.8em;
    text-align: center;
    margin-top: -0.5vh;
}
#strip-cm {
    background-color: #C6CACC;
    text-align: center;
    /* width: 20vw; */
    width: 19rem;
    /* height: 40vh; */
    height: 16rem;
    margin-top: 4vh;
    margin-left: 0vh;
    /* padding: 0 4vw 0 4vw; */
    padding: 1rem 3.5rem 1rem 3.5rem ;
}
#strip-text01-cm {
    font-size: 0.8em;
    margin-top: -1vh;
    margin-bottom: 0.2vh;
}
#name-label-cm {
    font-family: 'Caudex', serif;
}
#name-cm {
    font-family: 'Montserrat', sans-serif;
    width: 12rem; 
    margin-top:2vh; 
}
#email-label-cm {
    font-family: 'Caudex', serif;
}
#email-cm {
    font-family: 'Montserrat', sans-serif;
    width:12rem; 
    margin-top:2vh; 
}
#subject-label-cm {
    font-family: 'Caudex', serif;
    float:left; 
    margin-top: 2rem; 
    margin-left: 1.3rem;
}
#subject-cm { 
    font-family: 'Montserrat', sans-serif;
    height:50px; 
    width:10.5rem; 
    margin-top:2vh; 
}
#submit-btn-cm {
    color: #f8fdff;
    background-color: #292546; 
    font-family: 'Montserrat', sans-serif; 
    /* float: right; */
}
#submit-btn-cm:hover {
    background-color: #BBB8D1;
    color: #292546;
}
#footer-cm {
    background-color: #BBB8D1;
    /* width: 28vw; */
    width: 25rem;
    /* height: 8vh; */
    height: 4rem;
    /* margin-top: 16vh; */
    margin-top: 6rem;
}

/* #Article */
#article-page-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* margin-bottom: 2rem; */
}
/* article desktop */
#desktop-container-article {
    /* background-color: #292546; */
    width: 45rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-ad{
    background-color: #EBEBEB;
    /* width: 50vw; */
    /* width: 750px;
    height: 39vw; */
    width: 50rem;
    /* height: 37vw; */
    height: 50rem;
}
#header-ad {
    background-color: #BBB8D1;
    /* width: 50vw; */
    width: 45rem;
    /* height: 5vh; */
    height: 2rem;
}
#site-title-ad {
    font-family: 'Caudex', serif;
    /* margin-left: 3vw; */
    margin-left: 2rem;
}
#nav-menu-ad {
    font-family: 'Caudex', serif;
    text-align: right;
    /* margin-top: -4vh; */
    /* margin-right: 3vw;
    margin-bottom: -5vh;  */
    margin: -2rem 2rem -4rem 0;
}
.body-ad {
    /* width: 50vw; */
    width: 45rem;
    height: fit-content;
}
#article-title-ad {
    font-family: 'Caudex', serif;
    font-size: 1.1em;
    font-weight: bold;
    /* margin-top: 1vh;
    margin-left: 7vw;
    margin-right: 6vw; */
    margin: 0.5rem 3rem 0.5rem 6rem;
}
#article-info {
    color: #798276;
    font-family: 'Caudex', serif;
    font-size: 0.65em;
    /* margin-left: 7vw; 
    margin-top: -1vh; */
    margin: -0.5rem 0 1rem 6rem;
}
#article-img-d {
    width: 32rem; 
    height: 15rem; 
    /* margin-left: 7vw; 
    margin-top: -1vh; */
    margin: -0.5rem 0 1rem 6rem;
}
#article-figcaption {
    color: #798276;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65em;
    margin-left: -1vw; 
    margin-top: -1rem;
    text-align: center;
}
#body-text01-ad {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    /* margin-top: 1vh;
    margin-left: 7vw;
    margin-right: 7vw; */
    margin: 0.5rem 6rem 2rem 6rem;
}
#footer-ad {
    background-color: #BBB8D1;
    /* width: 50vw; */
    width: 45rem;
    /* height: 9vh; */
    height: 5rem;
    /* margin-top: 1vh; */
    margin-top: 1rem;
}
/*article mobile template  */
#mobile-container-article {
    /* background-color: #292546; */
    width: 25rem;
    height: 35.2rem;
    margin: 1rem 0 2rem 0;
    
    overflow: hidden;
}
#container-am{
    background-color: #EBEBEB;
    /* width: 28vw; */
    width: 400px;
    /* height: 39vw; */
    height: 35rem;
}
#header-am {
    background-color: #BBB8D1;
    /* width: 28vw;
    height: 5vh; */
    width: 25rem;
    /* height: 4vh; */
    height: 2rem;
}
#site-title-am {
    font-family: "Caudex", serif;
    /* margin-left: 3vw; */
    margin-left: 2rem;
}
#nav-menu-am {
    font-family: "Caudex", serif;
    text-align: right;
    /* margin-top: -4vh;
    margin-right: 3vw; */
    margin: -2rem 2rem 0 0;
}
.body-am {
    /* width: 28vw; */
    width: 25rem;
    height: fit-content;
}
#article-title-am {
    font-family: 'Caudex', serif;
    font-size: 1em;
    font-weight: bold;
    /* margin-top: 0.5vh; */
    /* margin-left: 1vw; */
    /* margin-right: 1vw; */
    margin: 0.5rem 0.5rem 0.5rem 1rem;
}
#article-info-m {
    color: #798276;
    font-family: "Caudex", serif;
    font-size: 0.65em;
    /* margin-left: 1vw; 
    margin-top: -1vh; */
    margin: -0.5rem 0 0 1rem;
}
#article-img-m {
    width: 23rem; 
    height: 15rem; 
    /* margin-left: 1vw; 
    margin-top: -1vh; */
    margin: 0.5rem 0 0 1rem;
}
#article-figcaption-m {
    color: #798276;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65em;
    margin-left: -1vw; 
    margin-top: 0vh;
    text-align: center;
}
#body-text01-am {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75em;
    /* margin-top: 1rem;
    margin-left: 1vw;
    margin-right: 1vw; */
    margin: 0.5rem 1rem 0.5rem 1rem;
}
#footer-am {
    background-color: #BBB8D1;
    /* width: 28vw;
    height: 7vh;
    margin-top: -1vh; */
    width: 25rem;
    /* height: 6vh; */
    height: 5rem;
    /* margin-top: 3vh;  */
    margin-top: 0rem;
}

/* contact form page */
#contact-text {
    font-family: 'Caudex', serif;
    color: var(--dark-blue);
    font-size: 2.5em;
    display: grid;
    justify-content: center;
    margin-top: 4rem;
}
#contact-form {
    text-align: center;
    margin-bottom: 6rem;
}
#name-label {
    font-family: 'Caudex', serif;
    color: var(--dark-blue);
}
#name-input {
    font-family: 'Montserrat', sans-serif;
    width: 15rem;
    min-height: 2rem;
    margin-top: 4rem;
}
#email-label {
    font-family: 'Caudex', serif;
    margin-top: 2rem;
}
#email-input {
    font-family: 'Montserrat', sans-serif;
    width:  15rem;
    min-height: 2rem;
    margin-top: 1rem;
}
#message-label {
    font-family: 'Caudex', serif;
    margin-top: 2rem;
}
#message-input {
    font-family: 'Montserrat', sans-serif;
    width: 19rem;
    min-height: 3rem;
    margin-top: 1rem;
}
#send-form-btn {
    color: var(--dark-blue);
    background-color: var(--pale-green);
    font-family: 'Montserrat', sans-serif;
    border-color: var(--dark-green);
    margin-top: 1rem;
}
#send-form-btn:hover {
    color: var(--off-white);
    background-color: var(--dark-green);
}

#about-text {
    color: var(--dark-blue);
    text-align: center;
    padding: 0 20vw 0 20vw;
}
.h1 {
    font-family: 'Caudex', serif;
}
.about-subheaders {
    color: var(--dark-blue);
    /* background-color: var(--pale-purple); */
    font-family: 'Caudex', serif;
    text-align: left;
    /* max-width: 50rem; */
    width: fit-content;
    padding: 0 4rem 0 4rem;
    
}
.about-text {
    color: var(--dark-blue);
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    text-indent: 50px;
    max-width: 54rem;
    padding: 0 4rem 0 4rem;
}
#squarespace-site-link:hover {
    text-decoration: underline;
}

.footer {
    background-color: var(--pale-green);
    width: 100vw;
    height: 12vh;
    margin: 4rem 0 -0.5rem -0.5rem;
    padding: 1rem 0 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#linkedin-icon {
    scale: 0.7;
    transition: 0.3s;
    border-radius: 6px;
}
#linkedin-icon:hover {
    background-color: var(--light-gray);
}
#github-icon {
    transition: 0.3s;
}
#github-icon:hover {
    background-color: var(--light-gray);
}

/* for tablet/mobile view */
@media only screen and (max-width: 820px) { /* was 768*/
    .colors {
        grid-column: 1/auto;
        grid-row: 1/auto;
        height: 15rem;
    }  
    #color3 {
        grid-column: 3/auto;
        grid-row: 1/auto;
        margin-top: 2rem;
    }
    #color4 {
        grid-column: 1/auto;
        grid-row: 2/auto;
        margin-top: 2rem;
    }
    #color5 {
        grid-column: 2/auto;
        grid-row: 2/auto;
        margin-top: 2rem;
    }
    #color6 {
        grid-column: 3/auto;
        grid-row: 2/auto;
        margin-top: 2rem;
    }
    #font1 {
        font-family:'Caudex', serif;
        grid-column: 1/auto;
        grid-row: 2/auto;
    }
    #font2 {
        font-family: 'Montserrat', sans-serif;
        grid-column: 1/auto;
        grid-row: 3/auto;
        padding: 0 1rem 0 0rem;
    }   
    #reset-btn {
        width: 4rem;
        height: 2rem;
        margin: 1rem 1rem 0 0 ;
        border-radius: 5px;
        grid-column: 1/auto;
        grid-row: 5/auto;
        justify-self: flex-end;
    }


    .about-subheaders {
        /* background-color: #798276; */
        padding: 0;
    }
    .about-text {
        padding: 0;
    }
    #about-text {
        padding: 0 4rem 0 4rem;
    }
}

/* for mobile only view */
@media only screen and (max-width: 480px) {
    #color1value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px; 
    }   
    #color2value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px;
    }  
    #color3value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px;
    }  
    #color4value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px;
    }   
    #color5value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px;
    }  
    #color6value {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 1rem auto;
        position: relative;
        padding: 0px;
    }  
    #reset-btn {
        width: 4rem;
        height: 2rem;
        margin: 1rem 1rem 0 0 ;
        border-radius: 5px;
        grid-column: 1/auto;
        grid-row: 5/auto;
        justify-self: flex-end;
    }

    #desktop-container-homepage {
        grid-column: 2/auto;
        grid-row: 1/auto;
        display: none;
    }
    #mobile-container-homepage {
        margin: 1rem 0 2rem -1rem;
    }
    #desktop-container-contact-page {
        grid-column: 2/auto;
        grid-row: 1/auto;
        display: none;
    }
    #mobile-container-contact-page {
        margin: 1rem 0 2rem -1rem;
    }
    #desktop-container-article {
        grid-column: 2/auto;
        grid-row: 1/auto;
        display: none;
    }
    #mobile-container-article {
        margin: 1rem 0 2rem -1rem;
    }
    #article-title-am {
        margin: 0.5rem 1rem 0.5rem 1rem;
    }
    
    #article-img-m {
        margin: 0.5rem 0 0 1rem;
    }
    #body-text01-am {
        margin: 0.5rem 1rem 0.5rem 1rem;
    }


    #email-input {
        margin-bottom: 0.5rem;
    }
    #message-label {
        width: 15rem;
    }
    #message-input {
        width: 18rem;
    }
}

/* for the templates between 480px and 1149px */
@media only screen and (max-width: 1149px) and (min-width: 480px) {
    #homepage-grid {
        grid-template-columns: 1fr;
    }
    #desktop-container-homepage {
        /* background-color: #292546; */
        grid-column: 1/auto;
        grid-row: 1/auto;
    }
    #mobile-container-homepage {
        grid-column: 1/auto;
        grid-row: 2/auto;
    }
    #contact-page-grid {
        grid-template-columns: 1fr;
    }
    #desktop-container-contact-page {
        grid-column: 1/auto;
        grid-row: 1/auto;
    }
    #mobile-container-contact-page {
        grid-column: 1/auto;
        grid-row: 2/auto;
    }
    #article-page-grid {
        grid-template-columns: 1fr;
    }
    #desktop-container-article {
        /* background-color: #292546; */
        grid-column: 1/auto;
        grid-row: 1/auto;
    }
    #mobile-container-article {
        grid-column: 1/auto;
        grid-row: 2/auto;
    }

    .about-subheaders {
        padding: 0;
    }
    .about-text {
        padding: 0;
    }
    #about-text {
        padding: 0 8rem 0 8rem;
    }
}