/* Created on : 2 nov. 2024, 10:34:48
    Author     : Anders Persson (perssonandersper@gmail.com) */

@container myuniverse (width < 500px) {
    .content  {
        height:                 97%;

        margin:auto;
        padding-top: 1.2vw;
        padding-left: 1.4vw;

    }
    iframe {
        width:                  98%;
    }
    #subjects, #person {

        z-index: 2;
        opacity:                0.95;

        font-size:              smaller;
        font-weight:            400;
    }
    #subjects {
        top:                    120px;
        right:                  -10vw;
        width:                  13vw;
        min-width:              100px;
    }
    #person {
        top:                    350px;
        right:                  -10vw;
        width:                  13vw;
        min-width:              100px;
    }
    #subjects:hover, #person:hover {
        right:                  0vw;
        width:                  20vw;
    }
    .left {
        left:                   -30px;
    }
    .right {
        left:                   -30px;
    }
}

@container myuniverse (width >= 500px) {
    .content {

        height:                 97%;
        width:                  63%;
        /*    border:             5px double lightgray;*/
        opacity:                0.98;

        margin:auto;
        padding-top: 1.2vw;
        padding-left: 1.4vw;
    }
    .content:hover {
        opacity:                1;
        box-shadow:             0px 12px 20px 0px rgba(0,0,0,0.6);
        transition:             box-shadow 0.5s;
    }
    #subjects, #person {
        z-index: 2;

        opacity:                0.95;

        font-size:              medium;
        font-weight:            800;
    }
    #subjects {
        top:                    105px;
        left:                   3vw;
        width:                  15vw;
        min-width:              130px;
    }
    #person {
        top:                    200px;
        right:                  4vw;
        width:                  14vw;
        min-width:              120px;
    }
    .left {
        right:                  -30px;
    }
    .right {
        left:                   -60px;
    }
}

.universe {
    container-name:         myuniverse;
    container-type:         inline-size;
    height:                 82%;
}

html {
    height:                 100vh;

    font-family:            "Times New Roman", serif;
}
body {
    height:                 92vh;

    background-image:       url("../img/EulerPhi2400.png");
    background-position:    center;
    background-size:        cover;

    margin:                 2vh;
    padding:                2vh;
}

footer, header {
    display:                block;
    height:                 35px;
    width:                  90vw;

    background:             #5991bd;
    color:                  whitesmoke;

    padding:                10px;
    padding-right:          5%;

    line-height:            75%;
    text-align:             right;
}
footer a:visited, header a:visited, a {
    color:                  white;
}

#subjects, #person {
    z-index: 2;
    
    border:                 2px double #b4dcf84d;

    color:                  whitesmoke;
    background-color:       #2b5c83;
}

div.fixed {
    position:               fixed;
}
div.fixed:hover {
    box-shadow:             0px 12px 20px 0px rgba(0,0,0,0.6);
    transition:             box-shadow 0.5s;
}

menu {
    list-style-type:        none;
    margin:                 0px;
    padding:                0px;
    text-align:             left;
}
li {
    display:                block;
    /*    border:                 2px dotted red;*/
    margin:                 0px;
    padding:                0px;
    text-align:             left;
}
li a, .dropbtn {
    display:                inline-block;

    /*border:                 2px dotted yellow;*/

    color:                  whitesmoke;
    opacity:                1;
    padding:                5px 10px 5px;
    margin:                 1px 1px 1px;

    text-align:             center;
    text-decoration:        none;
}
li a:hover, .dropdownlist:hover .dropbtn {

    color:                  white;
    background-color:       #376a93;
    opacity:                0.9;
    transition:             background-color 3s;
}

.dropdown-content {
    z-index:                1;
    display:                none;
    position:               relative;

    top:                    -6px;

    background-color:       #34668e;
    opacity:                0.9;

}
.dropdown-content a {
    display:                block;

    padding:                5px 10px 5px;
    margin:                 1px 1px 1px;

    text-decoration:        none;
    text-align:             left;

    opacity:                0.7;
    color:                  whitesmoke;
}
.dropdown-content a:hover {
    display:                block;

    background-color:       #467eaa;
    transition:             background-color 1s;

    opacity:                0.9;
    color:                  white;
}
.dropdownlist:hover .dropdown-content {

    display:                block;
    width:                  16vw;
    min-width:              105px;

    box-shadow:             0px 12px 20px 0px rgba(0,0,0,0.3);
    transition:             box-shadow 0.5s;

    opacity:                0.95;
    transition:             opacity 1s;
}

iframe {
    z-index:                3;

    overflow:               hidden;
    width:                  97%;
    height:                 97%;

    color:                  white; /* does not take effect - main.css */
    background-color:       #3e75a1;

    margin:                 px;
}

.dimmed {
    color:               #1b5482;
}