body {
    margin: 0;

    /* background: radial-gradient(circle at center, #9BCF53, #BFEA7C); */
    background: radial-gradient(circle at center, #71C9CE, #A6E3E9);

    font-family: 'Lato', sans-serif;
}

a {
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    color: #000;
}

.unclickable {
    pointer-events: none;
}

/* Glass Pane */
.glass {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: .25rem .25rem .5rem 0 rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(.2rem);
    -webkit-backdrop-filter: blur(.2rem);
    border-radius: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
  }

/* Primary Container */
#primary-container {
    width: 100vw;
    height: 100vh;

    overflow-x: hidden;

    align-content: start;

    display: grid;
}

/* Content Container */
#content-container {
    position: relative;

    margin: 3rem 0;

    display: grid;
    justify-content: center;
    align-content: start;
    grid-row-gap: min(3vw, 1rem);
    grid-template-rows: repeat(4, 1fr);
}

/* Profile Container */
.profile-container {
    padding: min(2vw, 1rem);

    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    grid-column-gap: min(1vw, 1rem);
    grid-template-columns: min(25vw, 8rem) 1fr;
}

a#obitan.profile-container {
    font-family: 'Kosugi Maru', sans-serif;
}

/* Profile Container - Icon Container */
.icon-container {
    position: relative;

    grid-column: 1;
    grid-row: 1 / 3;

    height: min(25vw, 8rem);
    width: min(25vw, 8rem);

    filter: drop-shadow(.25rem .25rem .4rem rgba(0, 0, 0, 0.4));
}

.icon-background {
    position: absolute;

    height: min(20vw, 6.5rem);
    width: min(20vw, 6.5rem);

    margin: min(2.5vw, .75rem);

    outline: solid .25rem #fff;
    border-radius: 50%;
}

#hiroki .icon-background {
    background-color: #9BCF53;
}

#obitan .icon-background {
    background-color: #FFF67E;
}

.icon {
    position: absolute;

    height: min(22.5vw, 7.25rem);
    width: min(20vw, 6.5rem);

    margin: 0rem min(2.5vw, .75rem) min(2.5vw, .75rem) min(2.5vw, .75rem);

    border-bottom-right-radius: 3.25rem;
    border-bottom-left-radius: 3.25rem;

    background-repeat: no-repeat;
    background-size: auto 105%;
    background-position: 50% 0%;
}

#hiroki .icon {
    background-image: url("hiroki_icon.svg");
}

#obitan .icon {
    background-image: url("obitan_icon.svg");
}

.name {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;
    align-self: end;
    
    font-size: min(calc(1.3rem + 2.5vw), 2.9rem);
}

#obitan .name {
    font-size: min(calc(1rem + 2.5vw), 2.7rem);

    margin-bottom: min(1vw, .5rem);
}

.subtitle {
    grid-column: 2;
    grid-row: 2;

    padding: 0 .75rem;

    border-top: solid 1px #000;

    justify-self: center;
    align-self: start;

    font-size: min(calc(.45rem + 2.5vw), 1.5rem);
    font-style: italic;
    white-space: nowrap;
}

#obitan .subtitle {
    font-size: min(calc(.35rem + 2vw), 1.3rem);

    padding-top: min(1vw, .5rem);
}

/* Paper Craft Images */
#paper-craft-container {
    z-index: -1;
    position: absolute;

    width: 100%;
    height: 100%;
}

.paper-craft-image {
    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;

    filter: drop-shadow(.15rem .15rem .2rem rgba(0, 0, 0, 0.4));
}

#cloud-1 {
    position: absolute;

    right: max(-10vw, -10rem);
    top: max(-23vw, -11rem);

    background-image: url("cloud_1.svg");

    width: min(60vw, 27rem);
    height: min(60vw, 27rem);
}

#cloud-2 {
    position: absolute;

    left: max(-14vw, -8rem);
    top: min(46vw, 14rem);

    background-image: url("cloud_2.svg");

    width: min(50vw, 20rem);
    height: min(50vw, 20rem);
}

@media (min-width: 576px) {
    /* Primary Container */
    #primary-container {
        align-content: center;
    }

    /* Content Container */
    #content-container {
        place-self: center;

        margin: 1rem 0;
    }
}

@media (max-height: 800px) {
    /* Primary Container */
    #primary-container {
        align-content: start;
    }

    /* Content Container */
    #content-container {
        margin: 3rem 0;
    }
}