body
{
    padding: 0;
    margin: 0;
    
    font-family: sans-serif;
    overflow-x: hidden;
}

div.major
{
    height: 70vw;
    width: auto;
    position: relative;
    
    padding-left: 3vw;
}

div.major h1, div.major h2
{
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-align: center;
}

div.major h2
{
    margin-bottom: 2rem;
}

div.pic
{
    position: relative;
    
    width: 56vw;
    height: 56vw;
    
    background-image: url(elemental_alignment_chart_1.png);
    background-size: cover;
    
    float: left;
}

div.knob
{
    position: absolute;
    width: 7%;
    height: 7%;
    text-align: center;
    
    border-radius: 2rem;
    
    border: 1.5px #bfbfbf solid;
    background-color: #bd5ad100;
    color: white;
    font-size: 0.9rem;
    
    user-select: none;
    opacity: 0.2;
}

div.knob:hover
{
    border: 1.5px #a0a0a0 solid;
    opacity: 1.0;
}

#fire{left: 21%; top: 14%}
#electricity{left: 40%; top: 19%}
#light{left: 48%; top: 22%}
#life-plantae{left: 57%; top: 24%}
#sound{left: 72%; top: 33%}
#earth{left: 41%; top: 38%}
#steam{left: 58%; top: 37%}
#celestial{left: 69%; top: 40%}
#life-animalia{left: 15%; top: 43%}
#water{left: 48%; top: 43%}
#psychic{left: 78%; top: 51%}
#ice{left: 57%; top: 54%}
#time{left: 64%; top: 56%}
#metal{left: 20%; top: 61%}
#gravity{left: 49%; top: 59%}
#dream{left: 70%; top: 60%}
#wind{left: 53%; top: 64%}
#poison{left: 42%; top: 68%}
#darkness{left: 49%; top: 85%}

div.explain
{
    float: left;
    margin-left: 1vw;
    line-height: 1.5;
    
    height: 56vw;
    width: 36vw;
    overflow-y: scroll;
}

div.explain a
{
    visibility: collapse;
}

/* media section for phones with portrait mode */
@media screen and (max-width: 768px), (orientation: portrait)
{
    div.major
    {
        height: auto;
    }
    
    div.pic-contain
    {
        width: 94vw;
        overflow-x: scroll;
    }
    
    div.pic
    {
        float: none;
        width: 95vh;
        height: 95vh;
    }
    
    div.explain
    {
        float: none;
        width: 94vw;
        height: auto;
    }
    
    div.explain a
    {
        visibility: visible;
    }
}