@font-face {
  font-family: "TheFrightHouseDEMO";
  src: url("./fonts/TheFrightHouseDEMO.otf");
}

@font-face {
    font-family: 'NITEMARE';
    src: url('./fonts/NITEMARE.ttf') ;
}

@font-face {
    font-family: "Caudex-Regular";
    src: url("./fonts/Caudex-Regular.ttf");
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 20px;
  background-image: url(https://res.cloudinary.com/deieutqt4/image/upload/v1764179448/descarga_1_jitqos.jpg);
  font-family:"Caudex-Regular" ;
  color: white;
}

.container {
    width: 90%;
  max-width: 1200px;
  height: 600px;
  display: flex; 
  gap: 30px;
  padding: 20px;
  background-image: url(https://res.cloudinary.com/deieutqt4/image/upload/v1764194330/Aesthetic_Wallpapers_discontinued__r46h1s.jpg);
}

main {
  flex: 3; 
  padding: 0;
  background-color: #11121afa;
  overflow: scroll;
  border-style: solid;
  border-width: 60px;
  border-image: url(https://res.cloudinary.com/deieutqt4/image/upload/v1764177399/tumblr_a6c9dddd837c9b1c2fb6bd3f3ba99441_899a2a37_250_ayiwrg.webp) 70 round repeat;
  flex-direction: column-reverse;
}
main::-webkit-scrollbar {
    display: none;
}

aside {
  flex: 1;
  padding: 0;
  position: relative;
  background-color: #11121afa;
  border-radius: 4px;
  border-style: solid;
  border-width: 60px;
  border-image: url(https://res.cloudinary.com/deieutqt4/image/upload/v1764177399/tumblr_a6c9dddd837c9b1c2fb6bd3f3ba99441_899a2a37_250_ayiwrg.webp) 70 round repeat;
}

.date {
    font-family: "NITEMARE";
}

.date img {
  height: 20px;
}
h1 {
    font-family: "NITEMARE";
    font-size: 30px;
}

.entries {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
}

.home-button-container a {
    text-decoration: none;
    color: white;
    position: absolute;
    top: 370px;
    
}

article img {
  height: 300px;
}

@media (max-width: 768px) {

    .container {
        flex-direction: column-reverse; 
        height: auto; 
        gap: 15px;
        padding: 10px;
    }
    main, aside {
        flex: auto;
        min-height: 400px;
        border-width: 30px; 
    }
    
    aside {
        order: 2; 
    }

   
    .home-button-container a {
        position: relative;
    }

    .date img {
      height: 15px;
      width: 15px;
    }

    article img {
        height: 200px; 
        width: 100%;
        object-fit: cover;
    }
}