/* custom styles */
:root {
    --primary-bg-color: #000000;
    --header-bg-color: #8a2be2;
    --navbar-bg-color: #e28a2b;
    --font-color: #ffffff;
    --hover-text-color: #e28a2b;
}

* {
    box-sizing: border-box;
}
  
body {
    background-color: var(--primary-bg-color);
    color: var(--font-color);
}

a {
    color: var(--font-color);
    text-decoration: none;
}
/* text color change on hover */
.hover-text:hover {
    color: var(--hover-text-color);
}

textarea::placeholder {
    /* Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this. */
    opacity: 1; 
}

/* site header */
header {
    text-align: center;
    background-color: var(--header-bg-color);
    padding:5px;
}

#header-parent {
    display: grid;
    grid-template-areas: 
    'logo-left slogan slogan logo-right';
    gap: 0px;
}

.site-logo {
    width:170px;
    height:170px;
}

#site-logo-left {
    grid-area: logo-left;
}

#site-logo-right {
    grid-area: logo-right;
    transform: rotateY(180deg);
}

#site-header {
    grid-area: slogan;
    font-size: 25px;
    font-family: monospace, sans-serif, 'Times New Roman';
}

/* nav styles */

/* nav bar links */
#nav-bar a {
    padding: 14px 16px;
    display:block;
    float: left;
}
/* nav bar on hover */
#nav-bar a:hover {
    background-color: #ddd;
    color: #000000;
}

#nav-bar {
    overflow: hidden;
    background-color:var(--navbar-bg-color);
}
/* nav search */
#nav-search {
    float: right;
    margin-top: 8px;
}

#search-btn, #search-input {
    padding: 5px;
}

#search-btn {
    margin-right: 10px;
}

#search-input {
    padding-left: 20px;
    background-color: #faebd7;
    color: #000000;
}

/* main */
#main-parent {
    display: grid;
    grid-template-areas: 
    'article-1 article-1 sidebar'
    'article-2 article-2 sidebar';
}

main article {
    /* margin:auto - remaining space will be split equally between the two margins */
    margin: auto;
    width: 90%;
}

/* aricles */
.article-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-title, .article-date {
    text-align: center;
}

/* article btn */
.view-post-btn {
    font-size: 25px;
    width: 100%;
    background-color: #ff9800;
}

.view-post-btn:hover {
    background-color: #ffffffda;
}

/* article-1 */
#article-1 {
    grid-area: article-1;
}
/* article-2 */
#article-2 {
    grid-area: article-2;
}
/* side */
#side {
    grid-area: sidebar;
    padding-left: 8px;
}

#side-image{
    /* If the max-width property is set to 100%, the image will scale down if it has to, 
    but never scale up to be larger than its original size */
    max-width: 100%;
    height: auto;
}

.dot {
  /* create dot */
  height: 5px;
  width: 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  /* position centered */
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#side-links { 
    text-align: center;
    border-bottom: solid thin #ffffff;
    padding-bottom: 5px;
    font-weight: bold;
}

#about-link{
    font-weight: bold;
    text-decoration: underline #ffffff;
}

#about-link:hover {
    text-decoration: underline var(--hover-text-color);
}

#social-media-links {
  text-align: center;
  margin-top: 10px;
}

.social-media-icon {
    font-size: 25px;
}

/* login form */
#login {
    border: solid #ffffff;
    text-align: center;
    /* size adjustment */
    margin: 30px auto 0px auto;
    width: 90%;
}

#login-title {
    font-weight: bold;
}

#login textarea {
    width: 75%;
    margin-bottom: 10px;
    border: solid #ffffff;
    font-size: 15px;
}

#login input {
    margin-left: 15px;
}

#login input, #login label {
    float: left;
}

/* sign in btn */
#login button {
    font-size: 20px;
    padding: 5px;
    margin-bottom: 5px;
    font-weight: bold;
}

#login button:hover, #subscribe-btn:hover {
    background-color: #f0ffff;
}

/* latest articles */
#latest-articles {
    margin-top: 40px;
}

#latest-articles h3 {
    text-align: center;
    text-decoration: underline #ffffff;
}

.latest-articles-image {
    width: 24.99999%;
    float:left;
    margin-right: 7px;
}

.latest-article {
    padding-bottom: 10px;
    float:right;
}

/* footer */
footer {
    text-align: center;
    padding:20px;
    margin-top: 20px;
    border-top: solid #ffffff;
    display: grid;
    grid-template-areas: 
    'subscribe column-2 column-3 column-4'
    'subscribe column-2 column-3 column-4'
    'footer-nav footer-nav footer-nav footer-nav'
    'copyright copyright copyright copyright';
}

/* subscribe column */
#subscribe-parent {
    grid-area: subscribe;
}

#email-text-area {
    width: 35%;
    margin-bottom: 10px;
    border: solid #ffffff 5px;
    font-size: 15px;
}

#subscribe-btn {
    padding: 6px 4px 1px 4px;
    font-size: 18px;
    font-family:  sans-serif, 'Times New Roman', serif;
}

#footer-col-2 {
    grid-area: column-2;
}

#footer-col-3 {
    grid-area: column-3;
}

#footer-col-4 {
    grid-area: column-4;
}

#footer-nav {
    grid-area: footer-nav;
    padding: 10px 5px;
    border-top: solid #ffffff 3px;
    border-bottom: solid #ffffff 1px;
}

#footer-nav a {
    padding-right: 15px;
    float: left;
}

#footer-nav a:first-child {
    padding-left: 20px;
}

#footer-nav a:last-child {
    padding-right: 20px;
    float: right;
    font-weight: bold;
}

#footer-copyright {
    grid-area: copyright;
}

/* media breakpoints */
/* phone */
@media only screen and (max-width: 750px) {
    /* header */
    .site-logo {
        width: 0px; /* hide nav logos on phones */
    }
    
    header {
        padding: 0px;
    }

    #site-header {
        font-size: 18px;
    }
    
    #nav-bar {
        background-color: #000000;
    }

    #nav-bar a {
        padding: 8px 12px 4px 4px;
        text-align: center;
        float: none;
    }

    #search-btn {
        margin-right: 50px;
    }

    #search-input {
        background-color: #ffffff;
    }

    /* side */
    #side-image {
        margin-top: 10px;
        border-top: solid thin #ffffff;
    }

    #main-parent {
        grid-template-areas: 
        'sidebar'
        'article-1'
        'article-2';
    }
    
    /* footer */
    footer {
        padding:0px;
        grid-template-areas: 
        'subscribe subscribe subscribe'
        'column-3 column-2 column-4'
        'footer-nav footer-nav footer-nav'
        'copyright copyright copyright';
    }
    
    #email-text-area {
        width: 75%;
    }

    #footer-nav {
        margin-top: 10px;
        padding: 10px 5px;
        border-top: solid #ffffff 1px;
    }

    #footer-nav a{
        margin-bottom: 10px;
    }

    #footer-nav a:last-child {
      margin-bottom: 0px;
    }
  
}

/* Small devices (portrait tablets and large phones -- fixes nav search bar position */
@media (min-width: 379px) and (max-width: 750px){
    #search-btn {
        margin-right: 0px;
    }
}

/* Medium devices (landscape tablets, 750px and up) */
@media only screen and (max-width: 1200px) {
    .article-img {
        width: 100%;
    }

   footer h3 {
    font-size: 15px;
    text-decoration: underline #ffffff;
   }
}