/* Box Model*/
* {
     box-sizing: border-box;
}

/* Clear fix */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES

resource: http://www.fifi.org/doc/wwwcount/Count2.5/rgb.txt.html

/*******************************************/

:root {
     --color-primary: 238, 0, 0;
     --color-secondary: 0, 0, 128;
     --color-tertiary: 0, 206, 209;
     --color-light: 255, 255, 255; 
     --color-dark: 23, 23, 23;
     --color-neutral: 211, 211, 211;
     --font-default: sans-serif;
     --font-code: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
}

.code {
     font-family: var(--font-code);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bkg: rgb(var(--color-dark));
		--color-top: rgb(var(--color-light));
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--color-bkg: rgb(var(--color-light));
		--color-top: rgb(var(--color-dark));
	}
}

html {
     scroll-snap-align: start;
     scroll-behavior: smooth;
}

body {
     font-family: var(--font-default);
     background: var(--color-bkg);
     color: var(--color-top);
}

ul {
     list-style: none;
     display: flex;
     align-items: baseline;
}

li {
     margin-right: 2rem;
     text-transform: uppercase;
     font-size: smaller;
     letter-spacing: 0.1em;
     line-height: 1.3rem;
}
li span {
     font-weight: bold;
     padding: 0.2em;
     border: 1px solid var(--color-top);
}

select {
     border: 0;
     border-radius: 0.2rem;
     padding: 0.5rem;
     background: var(--color-top);
     color: var(--color-bkg);
}

/******************************************
/* MODULES
/*******************************************/

.container__toplevel {
     width: 100%;
     height: 45rem;
     padding: 2rem;
     /* border: 1px solid rgb(var(--color-neutral)); */

     display:flex;
     flex-direction: column;
     align-items: center;
}

.container__code {
     width: 100%;
}

summary {
     margin-bottom: 0.5rem;
}

.container__code {
     padding: 1rem;
     background: rgba(var(--color-neutral), 0.7);
     color: var(--color-top);
     font-family: var(--font-code);
}
/* .container__code_inner {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
} */
.container__code .label {
     font-weight: bold;
     margin: 0.5rem 0;
}

.container__feat {
     width: 100%;
     height: 100vh;
     padding: 5%;
     display: flex;
     position: relative;
     border: 1px solid rgb(var(--color-neutral));
}

.container__graphic {
     width: 50rem;
}

.container__graphic_frame {
     position: relative;
     top: -12rem;
}

.container__desc {
     width: 100%;
     padding: 1rem;
}

/******************************************
/* SNIPS
/*******************************************/

/********************************************/
/* snip-venn-diag */

[data-id="snip-venn-diag"] .container__feat {
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
}

[data-id="snip-venn-diag"] .circle {
     position: absolute;
     width: 15rem;
     height: 15rem;
     border-radius: 50%;

     /* text in element */
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.1em;

     /* interaction */
     transition: all 0.4s ease-in 0s;
}

/* indicators */ 
[data-id="snip-venn-diag"] .circle:hover {
     cursor: pointer;
     color: rgb(var(--color-light));
}
/* interactions */
.hide {
     opacity: 0;
}


[data-id="snip-venn-diag"] .circle.prim {
     background: rgba(var(--color-primary), 0.5); 
     right: 35%;
     bottom: 5%;
}
[data-id="snip-venn-diag"] .circle.prim:is(:hover, :active, :focus) {
     border: 1px solid rgb(var(--color-primary));
     background: rgba(var(--color-primary), 0.7); 
}

[data-id="snip-venn-diag"] .circle.sec {
     background: rgba(var(--color-secondary), 0.5);
     right: 47%;
     top: -6rem;
}
[data-id="snip-venn-diag"] .circle.sec:is(:hover, :active, :focus) {
     border: 1px solid rgb(var(--color-secondary));
     background: rgba(var(--color-secondary), 0.7); 
}

[data-id="snip-venn-diag"] .circle.tert {
     background: rgba(var(--color-tertiary), 0.5);
     right: 23%;
     top: -6rem;
}
[data-id="snip-venn-diag"] .circle.tert:is(:hover, :active, :focus) {
     border: 1px solid rgb(var(--color-tertiary));
     background: rgba(var(--color-tertiary), 0.7); 
}

[data-id="snip-venn-diag"] .container__desc {
     width: 100%;
     display: flex;
     justify-content: space-between;
}

[data-id="snip-venn-diag"] .container__desc > div:nth-of-type(2) {
     padding: 0 1rem;
}

[data-id="snip-venn-diag"] .container__desc .prim::before {
     content:"";
     display: block;
     margin-bottom: 1rem;
     width: 4rem;
     height: 0.2rem;
     background: rgb(var(--color-primary));
}
[data-id="snip-venn-diag"] .container__desc .sec::before {
     content:"";
     display: block;
     margin-bottom: 1rem;
     width: 4rem;
     height: 0.2rem;
     background: rgb(var(--color-secondary));
}
[data-id="snip-venn-diag"] .container__desc .tert::before {
     content:"";
     display: block;
     margin-bottom: 1rem;
     width: 4rem;
     height: 0.2rem;
     background: rgb(var(--color-tertiary));
}

@media screen and (max-width:720px){
     [data-id="snip-venn-diag"] .container__feat {
          min-height: 40rem;
     }
     
     [data-id="snip-venn-diag"] .container__desc > div:nth-of-type(2) {
          padding: 0;
     }

     [data-id="snip-venn-diag"] .container__desc {
          flex-direction: column;
     }
     
     [data-id="snip-venn-diag"] .container__desc > div {
          margin-bottom: 1rem;
     }
}

/********************************************/
/* snip-pie-growth */
[data-id="snip-pie-growth"] .container__feat {
     justify-content: space-between;
     align-items: center;
}

[data-id="snip-pie-growth"] .container__desc {
     z-index: 2;
     border-left: 0.2rem solid rgb(var(--color-secondary));
     padding: 0.5rem 1rem;
     background-color: rgba(var(--color-light), 0.5);
}

[data-id="snip-pie-growth"] .desc span {
     font-weight: bold;
}

[data-id="snip-pie-growth"] .container__graphic {
     width: 50rem;
     display: flex;
     justify-content: center;
}

[data-id="snip-pie-growth"] .container__graphic_frame {
     top: 0rem;
     width: 100%;
     height: 30rem;
}

[data-id="snip-pie-growth"] .callout {
     width: 15rem;
     height: 15rem;
     border-radius: 50%;
     /* background: rgb(var(--color-bkg)); */

     position: absolute;
     left: 35%;
     top: 7.5rem;

     /* text in element */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: rgb(var(--color-light));
}

/* text in callout */
[data-id="snip-pie-growth"] .callout > span {
     font-weight: bold;
     font-size: 3rem;
}
[data-id="snip-pie-growth"] .callout > p {
     margin: 0;
}


[data-id="snip-pie-growth"] .semi-top {
     left: 35%;
     top:7.5rem;
     background: rgb(var(--color-primary));
     border-radius: 7.5rem 7.5rem 0 0;
     height: 7.5rem;
     width: 15rem;
     
     position: absolute;
     left: 35%;
     top: 7.5rem;
}

[data-id="snip-pie-growth"] .semi-top_2 {
     left: 35%;
     top:7.5rem;
     background: rgb(var(--color-primary));
     border-radius: 7.5rem 7.5rem 0 0;
     height: 7.5rem;
     width: 15rem;
     
     position: absolute;
     left: 35%;
     top: 7.5rem;

     opacity: 0;
     animation: 6s linear 0s infinite normal forwards running appear;

}

[data-id="snip-pie-growth"] .mask {
     background: var(--color-bkg);
     height: 7.5rem;
     width: 15rem;

     position: absolute;
     left: 35%;
     top: 7.5rem;

     transform-origin: bottom center;
     animation: 6s linear 0s infinite normal forwards running rotate-topmask;
}

[data-id="snip-pie-growth"] .semi-bottom {
     background: rgb(var(--color-primary));
     border-radius: 0 0 7.5rem 7.5rem;
     height: 7.5rem;
     width: 15rem;
     
     position: absolute;
     left: 35%;
     top: 15rem;

     opacity: 0;
     animation: 6s linear 0s infinite normal forwards running appear;
}

@keyframes rotate-topmask {
     0% {
         transform:rotate(0)
     }

     25% {
         transform: rotate(0.25turn)
     }
     50% {
         transform:rotate(0.5turn) 
     }
     75% {
          transform:rotate(0.75turn)
     }
     100% {
          transform: rotate(1turn)
     }
}

@keyframes appear {
     0% {
         opacity: 0
     }

     49.9% {
          opacity:0
     }

     50% {
         opacity: 1
     }

     100% {
         opacity: 1
     }
}

@media screen and (max-width:680px){
     [data-id="snip-pie-growth"] .container__feat {
          flex-direction: column;
     }
}

/******************************************
/* LAYOUT
/*******************************************/

/* navigation */


header {

}

footer {

}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/