@charset "UTF-8";
html{
    height: 100%;
    font-size: 62.5%;
}

body {
    height: 100%;
    min-height: 100%;
    background-color: #4f4f4f;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: url("../img/lofi-bg.jpg"),url("../img/lofi-bg-small.jpg");
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: cover;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    font-size: 1.75rem;
    color: whitesmoke;
}

.wrapper {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-container {
    background-color: rgba(51, 51, 51, .6);
    padding: min(2rem, calc(4vw));
    border-radius: 2%;
    box-sizing: border-box;
}

.flex-container div {
    display: flex;
    justify-content: center;
}

.flex-container div + div {
    margin-top: 2rem;
}

#icon img, #ref-sheet img {
    height: min(20rem, calc(56vw));
    /* height: min(30rem, calc(61.2vw)); */
}

#icon img{
    border-radius: 50%;
}

#ref-sheet img{
    border-radius: 20%;
}

#ref-sheet a:hover {
    transform: scale(1.03);
}

#links {
    gap: min(2rem, calc(5.4vw));
}

#links img{
    height: min(5rem, calc(13.9vw));
    /* height: min(7.5rem, calc(15vw)); */
    border-radius: 10%;
}

#links a, #ref-sheet a{
    transition: transform .25s ease-out;
}

#links a:hover {
    transform: scale(1.1);
}