* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    min-height: 100vh;
}
@font-face{
    font-family: "libertinus-mono";
    src: url('../fonts/libertinusmono-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} 
body {
    font-family: "libertinus-mono";
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 3px;
    text-align: center;
    color: #031621;
    min-height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(../img/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-image: image-set(url(../img/bg.jpg) 1x,); /* fallback for unsupported browsers */
}
div.main {
    width: 425px;
    background-color: #f5f5f5;
    border-radius: 2vh;
    text-align: center;
    box-sizing: border-box;
    padding: 75px 5px;
    display: inline-block;
    height: 520px;
    margin-top: calc(((100vh - 520px) / 2));
}
div.main section.photo {
    height: 125px;
}
div.main section.photo img {
    height: 125px;
    width: auto;
    border-radius: 50%;
}
div.main section.info {
    height: 155px;
}
div.main section.info h1 {
    font-size: 26pt;
    font-weight: 500;
    line-height: 50px;
    padding-top: 25px;
    padding-bottom: 10px;
    padding-left: 0;
}
div.main section.info h2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}
div.main section.links {
    height: 100px;
    padding-top: 37.5px;
    padding-bottom: 12.5px;
    box-sizing: border-box;
}
div.main section.links a {
    height: 50px;
    text-decoration: none;
    display: inline-block;
    margin: 0 7.5px;
}
div.main section.links a svg {
    height: 50px;
    width: auto;
}
div.main section.links a svg path {
    fill: #031621;
    transition: fill 0.25s ease;
}
div.main section.links a:hover svg path {
    fill: #6599ab;
}

@media only screen and (max-width: 444.44px) and (orientation:portrait) {
    body {
        background-image: url(../img/bg_small.jpg);
    }
    div.main {
        width: 95vmin;
        height: 116vmin;
        padding: 15vmin 1vmin;
    }
    div.main section.info h1 {
        font-size: clamp( .1rem, 7.25vw, 8vh);
        line-height: 6.75vmin;
    }
    div.main section.info h2 {
        font-size: clamp( .1rem, 4.5vw, 7vh);
        line-height: 6.75vmin;
    }
    div.main section.photo img {
        height: 28.5vmin;
        width: auto;
    }
    div.main section.photo {
        height: 28.5vmin;
    }
    div.main section.info {
        height: 40vmin;
    }
    div.main section.links {
        height: 15vmin;
        padding-top: 1vmin;
        padding-bottom: 1vmin;
    }
    div.main section.links a {
        height: 6vmin;
        margin: 0 2vmin;
    }
    div.main section.links a svg {
        height: 10vmin;
        width: 10vmin;
    }
}
@media only screen and (max-height: 550px) and (orientation:landscape) {
    body {
        background-image: url(../img/bg_small.jpg);
    }
    div.main {
        width: 78vmin;
        height: 95vmin;
        padding: 5vmin 1vmin;
        margin-top: 1vmin;
    }
    div.main section.info h1 {
        font-size: clamp( .1rem, 6.25vmin, 7vh);
        line-height: 6.75vmin;
    }
    div.main section.info h2 {
        font-size: clamp( .1rem, 4.5vmin, 7vh);
        line-height: 6.75vmin;
    }
    div.main section.photo img {
        height: 28.5vmin;
        width: auto;
    }
    div.main section.photo {
        height: 28.5vmin;
    }
    div.main section.info {
        height: 40vmin;
    }
    div.main section.links {
        height: 15vmin;
        padding-top: 1vmin;
        padding-bottom: 1vmin;
    }
    div.main section.links a {
        height: 6vmin;
        margin: 0 2vmin;
    }
    div.main section.links a svg {
        height: 10vmin;
        width: 10vmin;
    }
}