:root {
    --black: #242424;
    --blue: #0800FF;
    --dark-black: #333;
    --gray: #AAA;
    --white: #FFF;
    --aesthetic-blue: #6FCEFF;
    --aesthetic-pink: #FF00FF;
    --aesthetic-white: #F0F0F0;
}


html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100%;
}

.yr-root {
    display: grid;
    min-height: 100vh;
}

.yr-header {
    display: grid;
    justify-items: center;
    align-items: center;
    min-width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0em;
    background-image: url("ra.jpg");
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.yr-header > h1 {
    margin: 0px;
    padding: clamp(0.5em, 0.5em, 2em);
    font-family: Poppins Bold;
    font-size: clamp(48px, 56px, 96px);
    color: var(--white);
    opacity: 100%;
    animation-name: RiseUp;
    animation-duration: 4s;
}

.yr-header > .yr-menu {
    justify-content: space-around;
    align-items: center;
    padding: clamp(1em, 1em, 2em);
}

.yr-header > .yr-menu > a {
    margin: 0em 1em 0em 0em;
    font-family: Poppins Regular;
    font-size: clamp(24px, 24px, 48px);
    color: var(--white);
    text-decoration: none;
    opacity: 56%;
}

.yr-header > .yr-menu > a::after {
    content: "|";
    margin: 0em 0em 0em 1em;
}

.yr-header > .yr-menu > a:active {
    font-size: clamp(24px, 48px, 48px);
    opacity: 100%;
    animation-name: SizeUp;
    animation-duration: 0.5s;
}

.yr-header > .yr-menu > a:cursor {
    font-size: clamp(24px, 48px, 48px);
    opacity: 100%;
    animation-name: SizeUp;
    animation-duration: 0.5s;
}

.yr-header > .yr-menu > a:focus {
   font-size: clamp(24px, 48px, 48px);
   opacity: 100%;
   animation-name: SizeUp;
   animation-duration: 0.5s;
}

.yr-header > .yr-menu > a:hover {
    font-size: clamp(24px, 48px, 48px);
    opacity: 100%;
    animation-name: SizeUp;
    animation-duration: 0.5s;
}

.yr-header > h3 {
    font-family: Poppins Thin;
    font-size: clamp(12px, 12px, 24px);
    color: var(--white);
    opacity: 100%;
}

.yr-content {
    display: grid;
    margin: 1440px 0px 0px 0px;
    padding: 0em;
    box-sizing: border-box;
    filter: drop-shadow(24px 8px 16px #333);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 1;
    background-color: var(--aesthetic-white);
}

.yr-content > .yr-holder {
    display: flex;
    justify-self: center;
    align-items: center;
    margin: 35px;
    border-radius: 100px;
    width: 96px;
    height: 12px;
    background-color: var(--gray);
}

.yr-content > .yr-body {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: wheat;
}

.yr-content > .yr-body > h1 {
    font-family: Poppins Bold;
    font-size: clamp(12px, 48px, 64px);
    color: var(--black);
    margin: 0.5em;
}

.yr-content > .yr-body > p {
    width: 80vw;
    font-family: Poppins Italic;
    font-size: clamp(24px, 24px, 48px);
    text-indent: clamp(12px, 24px, 24px);
} 

.yr-content > .yr-body > .yr-section-label {
    display: flex;
    justify-content: center;
    align-content: center;
    min-width: 50vw;
    margin: 1em;
    padding: 1em;
}

.yr-content > .yr-body > .yr-section-label::before {
    content: "";
    justify-self: center;
    align-self: center;
    border-radius: 24px;
    width: clamp(24%, 45%, 50%);
    height: 0.5px;
    background-color: var(--gray);
}

.yr-content > .yr-body > .yr-section-label::after {
    content: "";
    justify-self: center;
    align-self: center;
    border-radius: 24px;
    width: clamp(24%, 45%, 50%);
    height: 0.5px;
    background-color: var(--gray);
}

.yr-content > .yr-body > .yr-section-label > small {
    font-family: Poppins Thin;
    font-size: clamp(24px, 24px, 36px);
    color: var(--gray);
    padding: clamp(1em, 1em, 1em);
}

.yr-content > .yr-body > .yr-info-panel {
    display: grid;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    min-width: 50vw;
    margin: 2em;
    padding: 1em;
}

.yr-content > .yr-body > .yr-info-panel > p {
    font-family: Poppins Bold;
    font-size: clamp(24px, 24px, 48px);
    color: var(--blue);
}

.yr-content > .yr-body > .yr-info-panel > p > span {
    font-family: Poppins Semi Bold;
    color: var(--black);
}

.yr-content > .yr-body > .yr-info-panel > p > a {
    color: var(--black);
    text-decoration: none;
}

.yr-content > .yr-body > .yr-info-panel > p > a:active {
    padding: clamp(0.5em, 1em, 1em);
    border-radius: 12px;
    background-color: var(--blue);
    color: var(--white);
    animation-name: GlideToRight;
    animation-duration: 1s;	
}

.yr-content > .yr-body > .yr-info-panel > p > a:cursor {
    Padding: clamp(0.5em, 1em, 1em);
    border-radius: 12px;
    background-color: var(--blue);
    color: var(--white);
    animation-name: GlideToRight;
    animation-duration: 1s;	
}

.yr-content > .yr-body > .yr-info-panel > p > a:focus {
    padding: clamp(0.5em, 1em, 1em);
    border-radius: 12px;
    background-color: var(--blue);
    color: var(--white);
    animation-name: GlideToRight;
    animation-duration: 1s;	
}

.yr-content > .yr-body > .yr-info-panel > p > a:hover {
    padding: clamp(0.5em, 1em, 1em);
    border-radius: 12px;
    background-color: var(--blue);
    color: var(--white);
    animation-name: GlideToRight;
    animation-duration: 1s;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar {
    display: flex;
    justify-self: left;
    height: 8px;
    border-radius: 24px;
    animation-name: AestheticAmbient;
    animation-duration: 9s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #max2d {
    min-width: 49vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #html {
    min-width: 48vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #bash {
	min-width: 47vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #css {
    min-width: 44vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #javascript {
    min-width: 35vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #jx {
    min-width: 19vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #pascal {
    min-width: 15vw;
}

.yr-content > .yr-body > .yr-info-panel > .yr-bar, #python {
    min-width: 9vw;
}

.yr-content > .yr-body > small {
    padding: clamp(0.5em, 0.5em, 0.5em);
    font-family: Poppins Regular;
    font-size: clamp(12px, 12px, 12px);
    color: var(--black);	
}

.yr-content > .yr-body > small > a {
    font-family: Poppins Bold;
    text-decoration: none;
    color: var(--blue);
}

.yr-content > .yr-holder:active {
    animation-name: AestheticAmbient;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

.yr-content > .yr-holder:cursor {
    animation-name: AestheticAmbient;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.yr-content > .yr-holder:focus {
    animation-name: AestheticAmbient;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.yr-content > .yr-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(10vh, 10vh, 10vh);
    background-color: var(--blue);
}

.yr-content > .yr-footer::before {
    content: "";
    justify-self: center;
    align-self: center;
    border-radius: 24px;
    width: clamp(24%, 30%, 50%);
    height: 2px;
    background-color: var(--white);
    animation-name: AestheticPinkFadeBack;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.yr-content > .yr-footer::after {
    content: "";
    justify-self: center;
    align-self: center;
    border-radius: 24px;
    width: clamp(24%, 30%, 50%);
    height: 2px;
    background-color: var(--white);
    animation-name: AestheticPinkFadeBack;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


.yr-content > .yr-footer > small {
    padding: clamp(1em, 1em, 1em);
    font-family: Poppins Light;
    font-size: clamp(8px, 24px, 24px);
    color: var(--white);
    animation-name: AestheticPinkFade;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}