@font-face{
        font-family:Inter;font-style:normal;font-weight:400;src:url(Inter.woff2) format("woff2")
}
    *{box-sizing:border-box;padding:0;margin:0;background:0 0;
    
        text-decoration:none;
        outline:0;
        font-family:inherit;
        font-size:inherit;
        line-height:inherit;
        font-weight:inherit;
        color:inherit;
        font-feature-settings:"onum","kern","liga","clig","calt"
}

.mydiv {
    align-items: center;
}

.logo {
    width: 200px;
    height: 200px;
    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;
    align-self: left;
}


hr {
    width:50%;
    margin:0 auto;
  }

  h3 {
    width:50%;
    margin:0 auto;
  }

body,html{
    width:100%;
    height:100%;
    background:#141414;
    color:#e5e5e5;
    font-family:Inter, sans-serif
}
body{
    display:grid;
    grid-template-rows:1fr auto
}
main{
    padding:0 50px;
    align-self:center;
    justify-self:center;
    text-align:center
}
h1{
    font-variation-settings:'wght' 600,'slnt' 0;
    font-size:40px;
    line-height:60px
}
button{
    font-variation-settings:'wght' 400,'slnt' 0;
    border:none;
    appearance:none;
    font-size:20px;
    line-height:30px;
    padding:10px 30px;
    border-radius:9999px;
    background:#191919;
    color:#999;
    margin-top:1em;
    transition:color .4s ease-out,background .4s ease-out;
    cursor:pointer
}
button:hover{
    background:#00f;
    color:#fff
}
footer{
    font-variation-settings:'wght' 500,'slnt' 0;
    text-align:center;
    padding:30px 50px;
    font-size:14px;
    color:#666
}
a{
    transition:color .4s ease-out
}
a:hover{
    color:#fff
        
}
@media (max-width:400px)
{
    h1{
        font-size:30px;
        line-height:50px
    }
    button{
        font-size:16px;
        line-height:25px
    }
    footer{
        font-size:12px;
        line-height:30px}

    .logo{
        width: 100;
        height: 100;
        align-self: left;
    }
}