html, body, .container {
    height: 100%;
  }
  
  /* Reset */
  html, body, h1, p, a, div, section {
    margin: 0;
    padding: 0;
    font-size: 100%;
  }

  * {
    margin:0;
    padding:0;
    height:100vh;
}
body { /* Location of the image */ background-image: url(assets/hp.png); 
    /* Background image is centered vertically and horizontally at all times */ background-position: center center; 
    /* Background image doesn’t tile */ background-repeat: no-repeat; 
    /* Background image is fixed in the viewport so that it doesn’t move when the content’s height is greater than the image’s height */ background-attachment: fixed; 
    /* This is what makes the background image rescale based on the container’s size */ background-size: cover; 
    /* Set a background color that will be displayed while the background image is loading */ background-color: #000000; 
    animation: fadein 1s;
}


@media only screen and (max-width: 767px) { 
        body { /* The file size of this background image is 93% smaller to improve page load speed on mobile internet connections */ background-image: url(assets/hpmb.png); } 

    } /* The media query is set at a max-width: 767px breakpoint, which in our case means that if the browser viewport is greater than 767px, it will serve the larger background image file.*/


@media only screen and (min-width: 768px) { 
.container {
    padding-top: 118px;
    width: 100%;

}

      
.content {
    text-align: center;
}

.logo{
    position: fixed;
    margin:auto;
    width:auto;
    height:100px;
    top:10%;
    left:0;
    right:0;
    display: block;
}
.title{
    font-family: 'Inter', sans-serif;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 4rem;
    color: #ffffff;
    position: fixed;
    margin:auto;
    text-align:center;
    top:25%;
    display: inline-block;
    left:0;
    right:0;
    height:70px;
}

.eng-btn {
    display:inline-block ;
    position: fixed;
    top:35%;
    padding: 6px 20px;
    color: #3C3C3C;
    border: none;
    border-radius: 60px;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    width:122px;
    height:40px;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    right:53%;
    transition-duration: 0.4s;
    cursor: pointer;
    }
.eng-btn:hover{
    background-color:black;
    color:white;
}
.kr-btn {
    display:inline-block ;
    position: fixed;
    top:35%;
    padding: 6px 20px;
    color: #3C3C3C;
    border: none;
    border-radius: 60px;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    width:122px;
    height:40px;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    left:53%;
    transition-duration: 0.4s;
    cursor: pointer;
    }
    .kr-btn:hover{
        background-color:black;
        color:white;
    }
}

@media only screen and (min-width:320px) and (max-width:767px){

              
.content {
    text-align: center;
}

.logo{
    position: fixed;
    margin:auto;
    width:auto;
    height:70px;
    top:10%;
    left:0;
    right:0;
    display: block;
}
.title{
    font-family: 'Inter', sans-serif;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 3rem;
    color: #ffffff;
    position: fixed;
    margin:auto;
    text-align:center;
    top:25%;
    display: inline-block;
    left:0;
    right:0;
    height:70px;
}

.eng-btn {
    display:inline-block ;
    position: fixed;
    top:38%;
    padding: 6px 20px;
    color: #3C3C3C;
    border: none;
    border-radius: 60px;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    width:100px;
    height:32px;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    right:53%;
    transition-duration: 0.4s;
    cursor: pointer;
    }
.eng-btn:hover{
    background-color:black;
    color:white;
}
.kr-btn {
    display:inline-block ;
    position: fixed;
    top:38%;
    padding: 6px 20px;
    color: #3C3C3C;
    border: none;
    border-radius: 60px;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    width:100px;
    height:32px;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    left:53%;
    transition-duration: 0.4s;
    cursor: pointer;
    }
    .kr-btn:hover{
        background-color:black;
        color:white;
    }
}

.box{
    background-color: white;
    position: fixed;
    text-align: center;
    height: 150px;
    width: 700px;
    margin:auto;
    left:0;
    right:0;
    top:50%;
    padding: 24px;

}