@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --f : "League Spartan";
  --b : "Poppins";
  --red : #de3831;
  --black : #1c1c1c;
}

::-webkit-scrollbar {
  background-color : var(--red);
  width : 5px;
  border-radius : 20px;
}

::-webkit-scrollbar-thumb {
  background-color : rgba(255,255,255,0.3);
}

body {
    padding : 0;
    margin : 0;
    overflow-x : hidden;
}

nav {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-around;
    height : 8vw;
    width : 100vw;
    background-color : white;
    }

nav > img {
    width : 20vw;
    height : auto;
}

nav > a, nav > a > p {
    color : var(--black);
    text-decoration : none;
    text-transform : uppercase;
    letter-spacing : 3px;
    font-size : 20px;
}

p, li {
    font-family : var(--b);
}

h1, h2, h3, h4 {
    font-family : var(--f);
}

h1 {
    color : var(--red);
    font-size : 40px;
}

h2 {
    color : var(--black);
    font-size : 30px;
    font-family : var(--b);
    letter-spacing : 10px;
    text-transform : uppercase;
    font-weight : normal;
}

#hamburger-container {
    display : none;
}

#header-img {
    width : 100vw;
    height : auto;
}

#home-blog-posts-container {
    padding : 20px 0;
    width : 100vw;
    height : 80vh;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
}

.post-container {
    padding : 30px;
    border-radius : 10px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    margin : 20px;
    height : 70vh;
}

#latest-post {
    width : 40vw!important;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : center!important;
}


#latest-post > h1 {
    margin : 20px 0 0 0;
    padding : 0;
}

#latest-post-img {
    height : auto;
    width : 100%;
    max-height : 70vh;
    object-fit : contain;
    border-radius : 20px;
    object-fit : cover;
}

button {
    color : white;
    background-color : var(--black);
    padding : 14px 30px 10px 30px;
    font-size : 24px;
    border : 0;
    font-family : var(--f);
    text-transform : uppercase;
    font-weight : bold;
    margin : 10px 0;
    transition-duration : 0.5s;
    cursor : pointer;
}

button:hover {
    background-color : #383838;
}

.date {
    margin : 0;
}

.other-posts {
    width : 100%;
    height : auto;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    margin : 20px 0;
}

.other-posts > img {
    width : 100px;
    height : 100px;
    border-radius : 10px;
    object-fit : cover;
    margin-right : 10px;
}

.other-posts > span {
    display : flex;
    flex-direction : column!important;
    align-items : center;
    justify-content : center;
    width : 80%;
}

.other-posts > span > * {
    width : 100%;
    text-align : left;
}

.other-posts > span > * {
    padding : 0;
    margin : 0;
}

#other-posts-container {
    width : 20vw;
    overflow-y : scroll!important;
}


#other-posts-container > h2 {
    text-align : center;
}

#blog-post {
    width : 60vw;
    height : auto;
    position : relative;
    left : 20vw;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

#blog-post > * {
    width : 100%;
    height : auto;
}

#blog-post > p:has(img) {
    text-align : center;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

#blog-post > p > img {
    max-height : 60vh;
    width : auto;
}

#blog-post > h1, #blog-post > h2, #blog-post > h3 {
    font-family : var(--f);
    letter-spacing : 0;
    text-transform : capitalize;
    font-weight : bold;
}

#blog-post > h3 {
    font-size : 26px;
}

footer {
    width : 100%;
    height : auto;
    padding : 20px 0;
    background-color : var(--red);
    margin-top : 40px;
}

footer > p {
    color : white;
    text-align : center;
    width : 100%;
}

p > a {
    color : var(--red);
    font-weight : bold;
    text-decoration : underline;
}
  @media screen and (max-width: 980px) {


    nav {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : space-around;
    height : auto;
    width : 100vw;
    background-color : white;
    }

nav > img {
    width : 80vw;
    height : auto;
}

nav > a, nav > a > p {
    color : var(--black);
    text-decoration : none;
    text-transform : uppercase;
    letter-spacing : 3px;
    font-size : 20px;
}

p, li {
    font-family : var(--b);
}

h1, h2, h3, h4 {
    font-family : var(--f);
}

h1 {
    color : var(--red);
    font-size : 40px;
}

h2 {
    color : var(--black);
    font-size : 30px;
    font-family : var(--b);
    letter-spacing : 10px;
    text-transform : uppercase;
    font-weight : normal;
}

#hamburger-container {
    display : none;
}

#header-img {
    width : 100vw;
    height : auto;
}

#home-blog-posts-container {
    padding : 20px 0;
    width : 100vw;
    height : auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

.post-container {
    padding : 10px 30px;
    border-radius : 40px;
    box-shadow: none;
    margin : 5px 0;
    height : auto;
}

#latest-post {
    width : 90vw!important;
}

#latest-post > h1 {
    margin : 20px 0 0 0;
    padding : 0;
}

#latest-post-img {
    height : auto;
    width : 100%;
    border-radius : 20px;
    object-fit : cover;
}

.other-posts {
    width : 100%;
    height : auto;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    margin : 20px 0;
}

.other-posts > img {
    width : 100px;
    height : 100px;
    border-radius : 10px;
    object-fit : cover;
    margin-right : 10px;
}

.other-posts > span {
    display : flex;
    flex-direction : column!important;
    align-items : center;
    justify-content : center;
    width : 80%;
}

.other-posts > span > * {
    width : 100%;
    text-align : left;
}

.other-posts > span > * {
    padding : 0;
    margin : 0;
}

#other-posts-container {
    width : 90vw;
}

#other-posts-container > h2 {
    text-align : center;
}

#blog-post {
    width : 90vw;
    height : auto;
    position : relative;
    left : 5vw;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

#blog-post > * {
    width : 100%;
    height : auto;
}

#blog-post > p:has(img) {
    text-align : center;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

#blog-post > p > img {
    max-height : 100vh;
    height : auto;
    width : 100%;
}

#blog-post > h1, #blog-post > h2, #blog-post > h3 {
    font-family : var(--f);
    letter-spacing : 0;
    text-transform : capitalize;
    font-weight : bold;
}


  }