/* ======== Rules ========

• Positions
• Margins
• Dimensions
• Displays
• Borders & Colors
• Fonts

==========================
*/

:root {
    --main: #161616;
    --secondary:rgba(255,255,255,0.16);
    --acent: #3DFE96;
    --light:#D9D9D9;
    --writing:white;
    --font:'Poppins', sans-serif;
    --designer:linear-gradient(#FAE490 0%, #ED8064 100%);
    --dev:linear-gradient(#62D4FA 0%,#61C2F9 50%, #8A84FA 100%);
    --circle:linear-gradient(180deg, #62D4FA 0%, #61C2F9 42.2%, #8BACFF 84.38%);;
    --switchTransition:.6s ease-in-out;


}

body {
    margin:0;
    padding:0;
    max-width: 100vw;
    max-height: 100vh;
    width:100vw;
    height:100vh;
    overflow-x: hidden;
    background-color: var(--main);
    color:var(--writing);
    font-family: var(--font);
}

h1 {
    margin:0;
    font-size: 4rem;
    font-weight: 500;
}

h2 {
    margin:0;
    font-weight: 600;
    font-size: 2rem;
}

h4 {
    margin:0;
    font-weight: 500;
    font-size: 1rem;
}

p {
    margin:0;
}

button {
    cursor: pointer;
}

#home {
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    align-items:center;
}

.shape {
    position:absolute;
    top:0;
    z-index:-10;
    width:15vw;
    height:15vw;
    background:linear-gradient(var(--gradient));
    border-radius:var(--radius);
}

.shape:nth-child(even) {
    animation: shapeEven 1.5s ease-in-out infinite alternate;
}

.shape:nth-child(odd) {
    animation: shapeOdd 1.5s ease-in-out infinite alternate;
}

#sunset {
    --gradient: 180deg, #5492BF 0%, #3A5794 16.67%, #633279 32.81%, #A24275 49.48%, #D05D77 66.15%, #DA847E 83.85%, #EAB889 100%;
    --radius:100px;
    top:2vh;
    left:8vw;
    height:54vh;
}

#sun {
    --gradient: 180.25deg, #FF8C20 0.22%, #F2FF47 149.56%;
    --radius:100px 100px 0 0px;
    top:15vh;
    left:31vw;
    height:28vh;
}

#sky {
    --gradient: 180deg, #62D4FA 0%, #61C2F9 42.2%, #8BACFF 84.38%;
    top:25vh;
    left:54vw;
    --radius:2px;
    height:30vh;
}

#night {
    --gradient:180.12deg, #D399FF 0.1%, #B56C98 98.09%;
    --radius:50%;
    top:22vh;
    left:77vw;
}

@keyframes shapeEven {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes shapeOdd {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(20px);
    }
}

#home p {
    margin-top:5vh;
    font-size:1.5rem;
    text-transform: uppercase;
}

#home img {
    cursor:pointer;
    margin-top:1.5vh;
    padding-bottom:5vh;
    width:3vw;
    transition:.4s ease-in-out;
}

#home img:hover {
    filter:drop-shadow(0px 0px 10px #ffffff);
}

#main {
    margin-top:20vh;
    padding-top:2.7vh;
    padding-left:3.9vw;
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}

#ordinatesValues p {
    display:block;
    font-size:1rem;
    font-weight: 500;
}

#ordinatesTitle {
    margin-top:3.5vh;
    font-size:.9rem;
    font-weight: 500;
    transition:var(--switchTransition);
}

#graphZone {
    margin-top:1vw;
    display:flex;
    align-items:flex-end;
    height: 66vh;
}

#ordinatesValues {
    height: 100%;
    margin-right:.7vw;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: right;
    transition:var(--switchTransition);
}

.exitOrdinates {
    position:absolute;
    top:126vh;
    left:-10vw;
}

.graphContainer {
    width: 80%;
    height: 100%;
    display:flex;
    align-items: flex-end;
    border-left:1px solid var(--light);
    border-width:0.75px;
    transition:var(--switchTransition);
}

.minutesBar {
    cursor: pointer;
    margin: 0 .7%;
    width:1.65%;
    height: 70%;
    background-color: var(--light);
    border-radius: 18px;
    transition:var(--switchTransition);
}

.selectedBar {
    filter:brightness(140%);
    box-shadow: 0px 0px 10px #959595;
}

.exitMinutesBar {
    height:0px !important;
}

.minutesBar:hover {
    filter:brightness(140%);
}

.Designer {
    background:var(--designer);
}

.Dev {
    background:var(--dev);
}

.toggleTags {
    margin-top:1%;
    display: flex;
    justify-content: baseline;
    font-size:1.25rem;
    font-weight: 400;
}

.tag, .addionalTag {
    cursor:pointer;
    margin-right:1.3vw;
    padding: 0.3% 1.5%;
    background-color: var(--secondary);
    border:1px solid var(--secondary);
    border-radius:23px;
    font-size: 1rem;
    transition:.3s ease-in-out;
}

.tag:hover, .addionalTag:hover {
    background-color:var(--main);
    color:var(--acent);
    border-color: var(--acent);
}

.activeTag, .activeAddTag {
    background-color: var(--acent);
    border: 1px solid var(--acent);
    color:var(--main);
}

.activeTag:hover, .activeAddTag:hover {
    background-color: var(--acent);
    color:var(--main);
}

#card {
    top:126vh;
    right:-40vw;
    position:absolute;
    z-index: 100;
    padding:25px 15px 25px 15px;
    width: 22vw;
    height: auto;
    background: rgb(42,42,42);
    background: linear-gradient(rgba(50, 50, 50, 1) 0%, rgba(44, 44, 44, 0.49) 48%, rgba(42, 42, 42, 0) 100%);
    border-radius:8px;
    transition:.7s ease-in-out;
}

#card button {
    color:var(--light);
    background:transparent;
    border:none;
    font-size:20px;
    transition:.3s ease-in-out;
}

#card button:hover {
    color:white;
}

#card hr {
    margin-top:4vh;
    width:95%;
    border: 1px solid #FFFFFF;
    border-radius:3px;
}

.identity {
    margin-top:3vh;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.identity h3 {
    margin:0;
    font-size:1.25rem;
}

.cardTag {
    display:inline-block;
    padding:2% 5%;
    font-size:0.875rem;
    font-weight: 400;
    border-radius: 9px;
    background-color:rgba(35, 131, 243, 0.15);
    text-shadow: 0px 0px 5px #9a9a9a;
}

.minutesPerso {
    margin-top:8px;
    color:var(--acent);
    font-size: 1.4rem;
    font-weight: 600;
}

.row {
    margin-bottom:3vh;
}

.wrap {
    margin-top:1.4vh;
    width: 100%; 
    height: 80px;
    padding: 0; 
    overflow: hidden;
}

iframe {
    width: 100%; 
    height: 100%;
    zoom: 0.75; 
    -moz-transform: scale(0.75); 
    -moz-transform-origin: 0 0;
}

.row p {
    color:var(--acent);
    font-size: 1.25rem;
}

.signature {
    margin:0;
    width:95%;
    display: flex;
    justify-content:flex-end;
}

/* ======= GENRES ======= */
#circleGraphZone {
    margin-top:5vh;
    width:100vw;
    height:70vh;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#allCircles {
    position:absolute;
    top:140vh;
    z-index:-1;
    width: 65vw;
    display:inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#halo {
    top:140vh;
    left: 0; 
    right: 0; 
    margin: auto; 
    position: absolute;
    z-index: -1;
    width:50Vw;
    height:35Vw;
    background-color:rgba(124, 189, 225, 0.24);
    border-radius:50%;
    filter: blur(27.5px);
    transition:var(--switchTransition);
}

.exitHalo {
    width:0px !important;
    height:0px !important;
}

.circle {
    width:15Vw;
    height:15Vw;
    background:var(--circle);
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color:var(--light);
    font-size:130%;
    transition:var(--switchTransition);
}

.exitCircle {
    width:0vw !important;
    height:0vw !important;
    font-size:0px !important;
}

.circle:nth-child(1) {
    margin-top:-10vh;
}

.circle:nth-child(2) {
    margin-top:-20vh;
}

.circle:nth-child(3) {
    margin-top:10vh;
    margin-left:-1vw;
}

.circle:nth-child(4) {
    margin-top:-10vh;
}

.circle:nth-child(5) {
    margin-top:30vh;
    margin-left:-3vw;
}

.circle:nth-child(6) {
    margin-top:-7vh;
    margin-left:-10vh;
}

.circle:nth-child(7) {
    margin-top:-7vh;
    margin-left:20vh;
}

.circle p {
    filter:drop-shadow(0px 0px 5px #a8a8a8);
}

.titleText {
    font-size:150%;
}

#footer {
    margin-top:5vh;
    padding-bottom:5vh;
    width:100vw;
    height: 100vh;
    display:flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items: center;
}

#footer img {
    width:50%;
    margin-bottom:30vh;
    animation:codeAnimation alternate 1.5s infinite ease-in-out;
}

@keyframes codeAnimation {
    0% {
        filter:brightness(100%);
    }
    100% {
        filter:brightness(125%);
    }
}

#footer p {
    opacity:.7;
    font-size:.6rem;
    letter-spacing:1px;
}