@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Montserrat:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&family=Noto+Sans: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');

html {
    overflow-x: hidden;
}

:root {
    --main-bg-color: #FFFFFF; /* White */
    --main-text-color: #333333; /* Dark Gray */
    --secondary-bg-color: #F5F5F5; /* Light Gray */
    --accent-teal: #008080; /* Teal */
    --accent-blue: #87CEEB; /* Soft Blue */
    --accent-beige: #F5DEB3; /* Warm Beige */
    --highlight-green: #98FB98; /* Soft Green */
    --highlight-coral: #FF7F50; /* Coral */
    --secondary-bg-color-70: rgb(245, 245, 245, 0.7); /* Light Gray */

}

body {
    padding: 0;
    margin: 0;
}




@media screen and (orientation:landscape) and (max-width: 45cm) {
    html {
      font-size: 14px; /* Default root font size */
    }
  }
  
  @media screen and (orientation:landscape) and (max-width: 43cm) {
    html {
      font-size: 13px; /* Default root font size */
    }
  }
  
  
  @media screen and (orientation:landscape) and (max-width: 41cm) {
    html {
      font-size: 13px; /* Default root font size */
    }
  }
  
  
  @media screen and (orientation:landscape) and (max-width: 38cm) {
    html {
      font-size: 11.5px; /* Default root font size */
    }
  }
  
  
  @media screen and (orientation:landscape) and (max-width: 33cm) {
    html {
      font-size: 10px; /* Default root font size */
    }
  }
  
  @media screen and (orientation:landscape) and (max-width: 29cm) {
    html {
      font-size: 9px; /* Default root font size */
    }
  }

  
  @media screen and (orientation:landscape) and (max-width: 700px) {
    html {
      font-size: 8px; /* Default root font size */
    }
  }

  @media screen and (orientation:landscape) and (max-width: 600px) {
    html {
      font-size: 7px; /* Default root font size */
    }
  }



  @media screen and (orientation:landscape) and (max-width: 500px) {
    html {
      font-size: 6px; /* Default root font size */
    }
  }


  @media screen and (orientation:landscape) and (max-width: 400px) {
    html {
      font-size: 5px; /* Default root font size */
    }
  }



  @media screen and (orientation:landscape) and (max-width: 300px) {
    html {
      font-size: 4px; /* Default root font size */
    }
  }

  
  @media screen and (orientation:landscape) and (max-width: 200px) {
    html {
      font-size: 3px; /* Default root font size */
    }
  }











 


  @media screen and (orientation:portrait) and (max-width: 300px) {
    html {
      font-size: 8px; /* Default root font size */
    }
  }

  
  @media screen and (orientation:portrait) and (max-width: 200px) {
    html {
      font-size: 6px; /* Default root font size */
    }
  }





@media screen and (orientation:portrait) {
    #desktop {
        display: none;
    }




    header {
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--secondary-bg-color);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100vw;
        height: 5rem;

    }


    header a img {
        height: 5rem;
        z-index: 1000;
        position: fixed;
        top: 0;
    }


    nav {
        padding-top: 5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--secondary-bg-color);


    }


    nav a {
        text-decoration: none;
        margin: 1.5rem 0;
        font-size: 3rem;
        font-weight: bold;
        color: var(--main-text-color);
        background-color: var(--secondary-bg-color);
    }


    #menu.active {
        scale: 1;
        transition: 0.3s ease-in;
        transform-origin: top right;

    }

    #menu.inactive {
        scale: 0;
        transition: 0.3s ease-in;
        transform-origin: top right;
    }



    #menu-control {
        z-index: 100;
        position: fixed;
        top: 0;
        right: 0rem;
        height: 3rem;
        width: 3rem;
        margin: 1rem;
    }

    #menu-control svg {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }


    #close {
        display: none;
    }


    #icons {
        position: fixed;
        top: 4.5rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        z-index: 10000;
        height: auto;
        width: auto;
    }


    #icons svg {
        height: 1.5rem;
        margin: 0.5rem 0;
        fill: var(--main-text-color);

    }


    #icons.active {
        scale: 1;
        transition: 0.3s ease-in;
        transform-origin: top center;
    }

    #icons.inactive {
        scale: 0;
        transition: 0.3s ease-in;
        transform-origin: top center;
    }

}









@media screen and (orientation:landscape) {
    #mobile {
       display: none;
    }



    header {
        font-family: 'Roboto', sans-serif;

        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--secondary-bg-color);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;


    }


    header a img {
        height: 5rem;
    }


    nav {
        display: flex;
        align-items: end;
        justify-content: right;
        position: relative;
        background-blend-mode:hue;

    }


    nav a, #apartmanok {
        text-decoration: none;
        margin: 0 1rem;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--main-text-color);
        cursor: pointer;
    }


    #iconbar {
        position: fixed;
        top: 0;
        right: 0;
        margin: 0.5rem;
        display: flex;
        flex-direction: row;
    }


    #iconbar svg {
        width: 1.3rem;
        height: auto;
        margin: 0 0.5rem;
        fill: var(--main-text-color);
    }


    


    #lenyilo {
        transform: scale(0);
        position: absolute;
        background-color: var(--secondary-bg-color);
        top: calc(100% + 1rem);
        background-blend-mode:hue;
        left: 0;
        transition: 0.3s ease-in;
        transform-origin: top;



        z-index: 1;
    }
    #lenyilo a {
        color: var(--main-text-color);
        padding: 1rem 2rem;
        text-decoration: none;
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
    #lenyilo a:hover {
        background-color: #ebebeb;
        transform: scale(1);
    }


    #lenyilo:hover {
      transform: scale(1);
  }
  
    #apartmanok:hover + #lenyilo {
        display: block;
        transform: scale(1);
        transition: 0.3s ease-in;

    }


}








footer {
    background-color: var(--secondary-bg-color);
    font-family: 'Montserrat', sans-serif;
    padding: 1rem 0;
    font-size: 1.2rem;
    line-height: 2rem;
    width: 100%;
}



footer div {
    display: flex;
    flex-direction: column;
    margin-left: 1.5rem;
}


footer div a {
    text-decoration: none;
    color: var(--main-text-color);
    transition: 0.3s ease-in;

}


footer div a:hover {
    color: var(--accent-teal);
    transition: 0.3s ease-in;
}

footer svg {
    height: 1.2rem;
    width: auto;
    fill: var(--main-text-color);
    transition: 0.3s ease-in;
    transform: translateY(0.3rem) translateX(-0.5rem);
}


footer div a:hover > svg {
    fill: var(--accent-teal);
    transition: 0.3s ease-in;
}


@media screen and (orientation:landscape) {
    footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}


@media screen and (orientation:portrait) {
    footer {
        display: flex;
        flex-direction: column;
    }

    footer div {
        margin-bottom: 1rem;
    }



}



body {
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media screen and (orientation:landscape) {
    #kezdo {
        height: 100vh;
        width: 100vw;
        position: relative;
    }


     
    
    #openimg {
        width: 100%;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;

    }


    #titlebox {
        font-family: 'Roboto', sans-serif;
        font-size: 4rem;
        font-weight: bold;
        color: var(--main-text-color);
        background-color: var(--secondary-bg-color);
        position: absolute;
        bottom: 0;
        padding: 5rem  8rem  5rem 1.5rem;
        border-top-right-radius: 2rem;
        left: 0;
    }


}







@media screen and (orientation:portrait) {
    #kezdo {
        height: 60vh;
        width: 100vw;
        position: relative;
    }
     
    
    #openimg {
        width: 100%;
        height: 60vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

    }


    #titlebox {
        font-family: 'Roboto', sans-serif;
        font-size: 2rem;
        font-weight: bold;
        color: var(--main-text-color);
        background-color: var(--secondary-bg-color);
        position: absolute;
        bottom: 0;
        padding: 1rem;
        max-width: 70vw;
        border-top-right-radius: 2rem;
        left: 0;
    }




}




.svg {
  width: 100%;
  margin: 0;
}


.svg:nth-child(odd) {
  transform: translateY(0.1rem);
}


.svg:nth-child(even) {
  transform: translateY(-0.1rem);
}



#languages {
  position: fixed;
  z-index: 100000;
  top: 0.5rem;
  right: 7.5rem;
  color: #333333;
  font-size: 1rem;
  display: flex;
  font-family: 'Roboto', sans-serif;
}


#en, #de, #hu {
  cursor: pointer;
}

section {
  margin: -0.2rem 0;
}


@media screen and (orientation:portrait) {
  .svg {
    overflow: hidden;
    max-width: 100vw;
  }


  
#languages {
  position: fixed;
  z-index: 100000;
  top: 1rem;
  right: 5rem;
  color: #333333;
  font-size: 1rem;
  display: flex;
  font-family: 'Roboto', sans-serif;
}


section {
  margin: -0.1rem 0;
}
}