@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

body {
    min-height: 100vh;
    margin: 0;
}

.container { display: flex;
    justify-content: center; 
    align-items: center;
    flex-flow: column nowrap;
    min-height: 100vh; 
   
   overflow: visible;
   box-sizing: border-box;

   }

   .logo-wrapper {
    display: block;
    text-align: center;

}

   .logo {display: flex;
    position: relative; 
    width: 33rem;
    margin: 0 auto;
    
}

#logoimg {width: 100%;}

.ylwbarcont {display: flex;
    justify-content: center;
    align-items: center;
    gap: 28rem;
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    

}


.ylwbar:hover{transform: scale(102%);
    color:#b31564;
    }

.ylwbar {padding: 2rem; padding-right: 2.5rem; padding-left: 2.1rem; font-size: 2.7rem; background-color: #ffce31;
    font-family: "Lexend", serif;
    color: #8c105a;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.2s ease-in;
min-width: 13rem;
width: 13rem;
max-width: 13rem;
}

.textcont {display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    }

    .text1 {font-size: 2rem; font-family: "Lexend", sans-serif;
        color:azure;
        text-align: center;}

    body {background-color: #397b9c}



    @media screen and (max-width: 1030px) {#english {position: absolute; top: 13.7rem;
    .container {margin-bottom: -15rem;
        margin-top: 4.5rem;}}
    #suomeksi {position: absolute; top: 21rem;}
    .textcont {position: relative; bottom: -12.5rem}
    a {display: flex;
        justify-content: center;
        align-items: center;
        gap: 28rem;
        position: absolute; 
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;}}

    @media screen and (max-width: 540px) {.container {transform: scale(80%); margin-top: -5rem;}}

    @media screen and (max-width: 420px) {.container {transform: scale(60%);}}

    @media screen and (max-width: 310px) {.container {transform: scale(40%); margin-top: -10rem;}}