/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
 *  HTML content. To learn how to do something, just try searching Google for questions like
 *  "how to change link color." */

body {
    background-image: url(background1080.png);
    color: #CFF6FF;
    font-family: Verdana;
}

a {
    color: #FFD8CF;
    text-decoration-line: none;
}

/* remove underline on links */

h1 {
    color: #CFDEFF;
    text-align: center;
}

h3 {
    text-align: center;
}

.club-albums {
    margin-left: auto;
    margin-right: auto;
}

.album-cover {
    width: 17vw;
}

/* index.html */

.iabcbwm {
    font-size: 1.7vw;
    text-align: center;
}

.music-note {
    font-size: 4vw;
    text-align: center;
}

.blinky88x31 {
    width: calc( calc(88 / 1920) * 100vw);
}

div.box {
    --s:23vw;  /*Size of the circle */
    --p:0.7vw;  /* padding */
    top: calc(50vh - 11.5vw);
    left: calc(50vw - 11.5vw);
    height: var(--s);
    width:  var(--s);
    border-radius: 50%;
    background: #80b3ffff;
    color: black;
    margin:1.5vw auto;
    font-size: 1.2vw;
    text-align: justify;
    position: fixed;
}

.box i,
.box::before {
    content: '';
    float: left;
    height:100%;
    width: 50%;
    shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}

.box i {
    float: right;
    shape-outside: radial-gradient(farthest-side at left,  transparent calc(100% - var(--p)), #fff 0);
}

div.box-small {
    --s:10.4vw;  /*Size of the circle */
    --p:0.6vw;  /* padding */

    height: var(--s);
    width:  var(--s);
    border-radius: 50%;
    background: #80b3ffff;
    color: black;
    margin: 1.5vw auto;
    font-size: 1vw;
    text-align: center;
}
.box-small i,
.box-small::before {
    content: '';
    float: left;
    height:100%;
    width: 50%;
    shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}
.box-small i {
    float: right;
    shape-outside: radial-gradient(farthest-side at left,  transparent calc(100% - var(--p)), #fff 0);
}

.menu-item {
    position: fixed;
    padding: 6px;
    color: black;
    text-decoration: none;
}

.menu-left .menu-item:nth-child(1) { top: 3vh; left: 37vw; }
.menu-left .menu-item:nth-child(2) { top: 15vh; left: 23vw; }
.menu-left .menu-item:nth-child(3) { top: 60vh; left: 25vw; }

.menu-right .menu-item:nth-child(1) { top: 70vh; right: 30vw; }
.menu-right .menu-item:nth-child(2) { top: 25vh; right: 20vw; }
.menu-right .menu-item:nth-child(3) { top: 45vh; right: 25vw; }

/*Music*/

.artist-name {
    position: fixed;
    padding: 6px;
}

.artist-menu .artist-name:nth-child(1) { top: 50vh; left: 50vw; transform: translate(-50%, -50%); }
.artist-menu .artist-name:nth-child(2) { top: 20vh; left: 35vw}

.jack {
    font-size: 5vw;
    color: #0000c8;
    text-decoration: none;

}
.white {
    font-size: 5vw;
    color: white;
}

/* Test for the album reviews */
/* CONTAINER SETTINGS */
figure.blurfilter
{ margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    overflow: hidden; / }
    .figcaption img
    { width: 10px; }
    figure.blurfilter img
    { display: block;
        width: 17vw;
        height: auto;
        transition: all 0.4s 0.4s; }

        /* TEXT BOX */
        figure.blurfilter figcaption
        { position: absolute;
            display: block;
            /* TEXT BOX COSMETICS */
            text-align: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: justify;
            background: black;
            padding: 0.6vw;
            z-index: 100;
            width: 90%;
            height: 90%;
            overflow: auto;
            top: 5%;
            left: 5%;
            font-family: Arial;
            font-size: 0.83vw;
            opacity: 0;
            /* TEXT BOX ANIMATION CODE */
            -moz-transition: all 0.4s;
            -webkit-transition: all 0.4s;
            transition: all .4s; }
            figure.blurfilter figcaption h3
            { border-bottom: 1px solid red;
                text-align: left;
                width: 90%;
                margin: 0;
            }
            figure.blurfilter figcaption p
            { text-align: left;
                margin-top: 10px;
                line-height: 1.5;
            }
            figure.blurfilter figcaption a
            { text-decoration: none;
            }
            figure.blurfilter:hover img
            { -webkit-filter: blur(5px);
                filter: blur(5px);
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
                -moz-transition: all 0.4s;
                -webkit-transition: all 0.4s;
                transition: all 0.4s; } figure.blurfilter:hover figcaption{ opacity: 1;
                    -moz-transition: all .4s .4s;
                    -webkit-transition: all .4s .4s;
                    transition: all .4s .4s; }
                    figure.slideup figcaption
                    { -webkit-transform: translateY(100%);
                        transform: translateY(100%);
                    }
                    figure.slideup:hover figcaption
                    { -webkit-transform: translateY(0);
                        transform: translateY(0); }
                        .pixel
                        { width: 1em !important;
                            filter: none !important;
                            display: inline-block; }
                            figcaption { overflow-y: scroll; }