/* @font-face {
    font-family: beroga;
    src: url(../);
} */


:root {
    --col1: white;
    --col2:black;
    --txt-col:black;

    --deg1:linear-gradient(to left,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2), var(--col1) ,var(--col2));
    --deg2:linear-gradient(to left,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1));

    /* 
    radial-gradient(var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1), var(--col2) ,var(--col1));
    linear-gradient(to left,var(--col2), var(--col1) ,var(--col2));
    linear-gradient(to left,var(--col1), var(--col2) ,var(--col1));
    radial-gradient(red, green,var(--col2)); 
    var(--txt-col)*/
  }
  

body{
    font-size: 20px;
    height: min-content;
    width: 100vw;
    overflow: hidden;
    
}

#disc{
    height: 100vh;
    width: 100vw;
    flex-shrink: none;
    image-resolution: 10dpi;
    overflow: hidden;
}


h1{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: bolder;
}

#hi{
    text-transform:uppercase;
    position: absolute;
    left: 1cm;
    top: 1cm;
    font-size: 10px;
    color: white;
    display: none;
}

#bye{
    text-transform:uppercase;
    position: absolute;
    right: 1cm;
    top: 1cm;
    font-size: 10px;
    color: black;
    display: none;
}

#label{
    text-transform:uppercase;
    position: absolute;
    text-align: center;
    font-size: 100px;
    color: black;
    width: 100%;
    display: none;
}

#album{
    top:15px;
    left:15px;
    position: fixed;
    color: black;
}

#agcook{
    top:15px;
    right:15px;
    position: fixed;
    z-index: 300;
    color: black;
}

h2{
    color:black;
    position: fixed;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: lowercase;
}

/* h2:hover{
    color:blue;
    position: fixed;
    text-decoration: underline;
    cursor:pointer;
} */

#listen{
    bottom:15px;
    left:15px;
    position: fixed;
}

#download{
    bottom: 15px;
    right:15px;
    position: fixed; 
}

.paire{
    transform: scale(1.2);
    display:inline-block;
    background: var(--deg1);
    overflow: hidden;
}

.impaire{
    transform: scale(1.2);
    display:inline-block;
    background: var(--deg2);
    overflow: hidden;
    
}


.impaire:hover{
    background: var(--deg1);
}


.paire:hover{
    background: var(--deg2);
}
#n0 {
    width: 3.5vw;
    height: 7vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n1 {
    width: 7vw;
    height: 14vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n2 {
    width: 10vw;
    height: 20vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n3 {
    width: 13vw;
    height: 26vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n4 {
    width: 16vw;
    height: 32vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n5 {
    width: 18vw;
    height: 36vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n6 {
    width: 21vw;
    height: 42vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n7 {
    width: 24vw;
    height: 48vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n8 {
    width: 28vw;
    height: 56vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n9 {
    width: 31vw;
    height: 62vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n10 {
    width: 34vw;
    height: 68vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n11 {
    width: 37vw;
    height: 74vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n12 {
    width: 40vw;
    height: 80vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n13 {
    width: 43vw;
    height: 86vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n14 {
    width: 46vw;
    height: 92vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n15 {
    width: 49vw;
    height: 98vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n16 {
    width: 52vw;
    height: 104vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n17 {
    width: 55vw;
    height: 110vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n18 {
    width: 58vw;
    height: 116vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n19 {
    width: 61vw;
    height: 122vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n20 {
    width: 64vw;
    height: 128vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n21 {
    width: 67vw;
    height: 134vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n22 {
    width: 70vw;
    height: 140vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n23 {
    width: 73vw;
    height: 146vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n24 {
    width: 76vw;
    height: 152vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n25 {
    width: 79vw;
    height: 158vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n26 {
    width: 82vw;
    height: 164vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n27 {
    width: 85vw;
    height: 170vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n28 {
    width: 88vw;
    height: 176vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n29 {
    width: 91vw;
    height: 182vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

#n30 {
    width: 94vw;
    height: 188vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray;
}

#n31 {
    width: 105vw;
    height: 210vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray;
}

/* 
#n32{
    height: 1600px;
    width: 1575px;
    display:inline-block;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray ;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#n33{
    height: 1650px;
    width: 1625px;
    display:inline-block;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray ;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#n34{
    height: 1700px;
    width: 1675px;
    display:inline-block;
    border-radius: 75%;
    box-shadow: 0px 0px 20px lightgray ;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#n35{
    height: 1750px;
    width: 1925px;
    display:inline-block;
    border-radius: 50%;
    box-shadow: 0px 0px 20px lightgray ;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
} */

@media print{

    #listen{
        display: none;
    }
    
    #download{
        display: none;
}

#album{
    display: none;
}

#agcook{
    display: none;
}

#hi{
    text-transform:uppercase;
    position: absolute;
    left: 1cm;
    top: 1cm;
    font-size: 10px;
    display: inline-block;
    color: var(--txt-col);
    /* mix-blend-mode: difference; */
}

#label{
    text-transform:lowercase;
    position: absolute;
    top: 11.7cm;
    font-size: 10px;
    text-align: center;
    
    display: inline-block;
    font-weight: normal;
    color: var(--txt-col);
    /* mix-blend-mode: difference; */
}

#bye{
    text-transform:uppercase;
    position: absolute;
    right: 1cm;
    top: 1cm;
    font-size: 10px;
    color:var(--txt-col);
    display: inline-block;
    /* mix-blend-mode: difference; */
}



}

@media only screen
 and (min-device-width : 100px)   /* entre 320px et 480px de large ça change */
   and (max-device-width : 600px){

    h2{
        display: none;
    }

    #agcook{
        top:auto;
        right:0;
        position: fixed;
        z-index: 300;
        color: black;
        text-align: center;
        width: 100%;
        bottom:10px;
    }

    #album{
        
        right:0;
        position: fixed;
        z-index: 300;
        color: black;
        text-align: center;
        width: 100%;
        bottom:10px;
    }


    
    

    body{
    height: auto;
    width:auto;
    }

    @media (max-width: 768px) { /* Pour un écran de téléphone en mode portrait */
        #n0, #n1, #n2, #n3, #n4, #n5, #n6, #n7, #n8, #n9, #n10,
        #n11, #n12, #n13, #n14, #n15, #n16, #n17, #n18, #n19, #n20,
        #n21, #n22, #n23, #n24, #n25, #n26, #n27, #n28, #n29, #n30, #n31 {
            position: absolute;
            margin: auto;
            box-shadow: 0px 0px 20px lightgray;
        }
    
        /* Réduction des tailles initiales */
        #n0 { width: 20vw; height: 20vh; border-radius: 50%; }
        #n1 { width: 25vw; height: 25vh; border-radius: 50%; }
        #n2 { width: 30vw; height: 30vh; border-radius: 50%; }
        #n3 { width: 35vw; height: 35vh; border-radius: 50%; }
        #n4 { width: 40vw; height: 40vh; border-radius: 50%; }
        #n5 { width: 45vw; height: 45vh; border-radius: 50%; }
        #n6 { width: 50vw; height: 50vh; border-radius: 50%; }
        #n7 { width: 55vw; height: 55vh; border-radius: 50%; }
        #n8 { width: 60vw; height: 60vh; border-radius: 50%; }
        #n9 { width: 65vw; height: 65vh; border-radius: 50%; }
        #n10 { width: 70vw; height: 70vh; border-radius: 50%; }
        #n11 { width: 75vw; height: 75vh; border-radius: 50%; }
        #n12 { width: 80vw; height: 80vh; border-radius: 50%; }
        #n13 { width: 85vw; height: 85vh; border-radius: 50%; }
        #n14 { width: 90vw; height: 90vh; border-radius: 50%; }
        #n15 { width: 95vw; height: 95vh; border-radius: 50%; }
        #n16 { width: 100vw; height: 100vh; border-radius: 50%; }
        #n17 { width: 105vw; height: 105vh; border-radius: 50%; }
        #n18 { width: 110vw; height: 110vh; border-radius: 50%; }
        #n19 { width: 115vw; height: 115vh; border-radius: 50%; }
        #n20 { width: 120vw; height: 120vh; border-radius: 50%; }
        #n21 { width: 125vw; height: 125vh; border-radius: 50%; }
        #n22 { width: 130vw; height: 130vh; border-radius: 50%; }
        #n23 { width: 135vw; height: 135vh; border-radius: 50%; }
        #n24 { width: 140vw; height: 140vh; border-radius: 50%; }
        #n25 { width: 145vw; height: 145vh; border-radius: 50%; }
        #n26 { width: 150vw; height: 150vh; border-radius: 50%; }
        #n27 { width: 155vw; height: 155vh; border-radius: 50%; }
        #n28 { width: 160vw; height: 160vh; border-radius: 50%; }
        #n29 { width: 165vw; height: 165vh; border-radius: 50%; }
        #n30 { width: 170vw; height: 170vh; border-radius: 50%; }
        #n31 { width: 180vw; height: 180vh; border-radius: 50%; }
    
        /* Pour s'assurer que les n restent concentriques */
        #n0, #n1, #n2, #n3, #n4, #n5, #n6, #n7, #n8, #n9, #n10,
        #n11, #n12, #n13, #n14, #n15, #n16, #n17, #n18, #n19, #n20,
        #n21, #n22, #n23, #n24, #n25, #n26, #n27, #n28, #n29, #n30, #n31 {
            position: absolute;
            box-shadow: 0px 0px 20px lightgray;
        }
    }
       }