body
{
    font-family: "Montserrat", Courier, serif;
}

.contact-page-container
{
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    width:          50%;
    height:         50%;
    outline:        solid black 1px;
    resize:         both;

}

.contact-page-container a
{
    color:           black;
    text-decoration: none;

}

.contact-page-container a:visited
{
    color:           black;
    text-decoration: none;
}

.divider
{
    flex:         1 1 0; /* participates in height distribution */

    aspect-ratio: 1 / 1; /* width : height = 8 : 1 (change as needed) */
    /*width:        1rem;*/
    /*min-width:    0;*/
    /*height: 30%;*/
    width:        50px;
    max-width:    50px;
    height:       50px;
    max-height:   50px;
}

.selector
{
    position:                   absolute;
    top:                        50%;
    left:                       0;
    height:                     100%;
    /*outline:                     dashed blue 1px;*/
    opacity:                    0;
    transform:                  translate3D(-200%, -50%, 0);
    transition-property:        transform, opacity;
    transition-duration:        0.2s;
    transition-timing-function: linear;
    fill:                       white;
}

.contact-header
{
    font-size: 30px;

}

.contact-page-wrapper
{
    container-type:  size;
    display:         flex;
    flex-direction:  column;

    align-items:     center;
    justify-content: space-between;
    width:           100%;
    height:          80%;

}

.contact-page-item
{
    position:        relative;
    display:         flex;
    flex:            10 1 0; /* grow a lot, shrink if needed */
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    min-width:       30%;
    border-radius:   16px;
    font-weight:     400;
    font-size:       2rem;
    text-align:      center;
    transition:      box-shadow 0.3s linear;
}

.contact-page-item:hover
{
    box-shadow:      inset 0 0px 40px 4px rgba(255, 255, 255, 0.1), 0 0px 40px 1px rgba(33, 8, 12, 0.7);
    backdrop-filter: blur(5px);
}

.contact-page-item:hover .selector
{

    opacity:   100%;
    transform: translate3D(-100%, -50%, 0);

}

.contact-page-text
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    /*outline:         dashed black 2px;*/
    height:          100%;
    min-height:      0;
    padding-left:    3rem;
    font-size:       2rem;
    letter-spacing:  3rem;
    text-align:      center;

}

.contact-page-text a
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          100%;
    /*outline:         dashed black 2px;*/
    text-align:      center;
}

#single
{
    /*outline:         dashed black 2px;*/
    padding-left:   0rem;
    font-size:      2rem;
    letter-spacing: normal;
    text-align:     center;

}