/*Definitions*/
@font-face {
    font-family: Freindly;
    src: url("../Autumn in November.ttf");
}

@keyframes bar\ move {
    from{height: var(--progress-start-pos);}
    to{height: var(--progress-pos);}
}

@keyframes open\ details {
    from{opacity: 0;}
    to{opacity: 1;}
}

:root {
    --file-index: none;
    --amount-of-files: none;
  
    --progress-start-pos: none;
    --progress-pos: calc(100% / var(--amount-of-files) * (var(--file-index)));

    --text-margin: min(6%, 60px);

    --portrait: 100%;
    --landscape: min(22%, 400px);
    --current-orientation: var(--landscape);
    --sidebar-width: var(--current-orientation);
    --progress-bar-width: 4%;

    --light-main: #fff;
    --light-contrast: #000;
    --light-outline: #f0f0f0;

    --dark-main: #181818;
    --dark-contrast: #ffffff;
    --dark-outline: #202020;

    --main-theme: none;
    --contrast-theme: none;
    --outline-theme: none;

    --transition-time: none;
}

@media (orientation: portrait) {
    :root {
        --current-orientation: var(--portrait);
    }   
}


/*tags*/
body {
    width: 100%;
    height: 100%;

    background-color: var(--main-theme);
    color: var(--contrast-theme);
    transition: all var(--transition-time);
}

/*IDs*/

/*title*/
#title {
    margin: var(--text-margin);
    margin-bottom: 150px;
    position: relative;
    top: 25px;
    font-family: Freindly;
    font-size: 4.3vw;
}

/*next button*/
#next {
    position: relative;
    left: 100%;
    transform: translateX(-200%);

    margin-top: 200px;
    margin-bottom: 100px;

    width: 10%;
    height: 3%;

    text-align: center;
    transition: all var(--transition-time);

    border: solid 5px var(--contrast-theme);
    border-radius: 8px;

    background-color: #00b500;
    color: var(--contrast-theme);

    text-decoration: none;
    color: #fff;
    display: block;
}

/*main*/
#main {
    position: fixed;
    right: 0%;
    top: 0%;

    overflow: auto;

    width: calc(100% - var(--sidebar-width));
    height: 100%;

    text-align: left;
    font-size: clamp(22px ,1.3vw, 25px);
    font-family: verdana, sans-serif;
    line-height: 200%;
}


/*main tags*/
#main p {
    margin: var(--text-margin);
}

#main ul, ol {
    margin-left: calc(var(--text-margin) * 1.4);
}

#main h2, h3, h4 {
    margin-left: var(--text-margin);
}

#main details {
    margin: var(--text-margin);

    height: 20%;
    width: 50%;
}

/*details*/
#main details .code {
    position: relative;
    left: 100%;
    transform: translateX(-60%);

    height: 100%;
    width: 100%;
}

#main details[open] .code {
    animation-name: open\ details;
    animation-duration: 0.4s;
    
}

#main details {
    color: var(--contrast-theme);
    margin: var(--text-margin);
    height: 1%;
    transition: all var(--transition-time);
}

#main details[open] {
    margin: var(--text-margin);
    height: 20%;
}



/*main other*/
#main video, img {
    border: 8px solid var(--outline-theme);
    border-radius: 2%;
    width: min(50%, 735px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    transition: all var(--transition-time);
}

#main .isFunc {
    background-color: var(--outline-theme);
    font-family: 'Courier New', monospace;
    font-style: italic;
    color: #e101ad;
    padding: 2px;
    border-radius: 4px;
    transition: all var(--transition-time);
}

/*parts of python code that can be copied*/
#main .code {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    color: var(--contrast-theme);
    text-align: left;
    font-family: 'Courier New', monospace;
    line-height: normal;

    border-radius: 15px;
    border: solid 1px var(--contrast-theme);

    transition: all var(--transition-time);
    background-color: var(--main-theme);

    overflow: scroll;

    height: 20%;
    width: 50%;
}

#main .code .copyText {
    position: relative;
    top: 10%;

    margin: 0;
    padding-left: 30px;
}

#main .code .copyButton {
    position: fixed;
    bottom: 2%;
    right: 2%;

    color: var(--contrast-theme);
    font-family: verdana, sans-serif;
    font-style: normal;

    transition: color var(--transition-time);

    border-radius: 15%;
}

#main .code .copyButton:hover {
    background-color: var(--outline-theme);
}

/*sidebar*/
#sidebar {
    position: fixed;
    top: 0%;
    left: 0%;

    z-index: 1;

    width: var(--sidebar-width);
    height: 100%;

    font-size: clamp(15px ,1.6vw, 30px);
    font-family: sans-serif;

    overflow: scroll;

    background-color: var(--outline-theme);
    transition: all var(--transition-time);
}

#sidebar a {
    display: block;
    padding-top: clamp(7px, 4%, 20px);
    padding-bottom: clamp(7px, 4%, 20px);
    padding-left: 18%;

    text-decoration: none;
    color: var(--contrast-theme);  
    transition: all var(--transition-time);  
}

#sidebar .lessons {
    transition: all 0.4s;
}

#current {
    background-color: #6eca04;
    transition: background-color 0.2s;
}

#current:hover {
    background-color: #77df00;
}

#sidebar .lessons:hover {
    border-right: solid 10px var(--contrast-theme);
    background-color: var(--main-theme);
}

@media (orientation: portrait) {
    #sidebar {
        font-size: clamp(25px ,3vw, 40px);
    }
}


/*progress bar*/
#progress {
    position: absolute;
    top: 0%;
    left: 6%;

    height: 100%;
    width: var(--progress-bar-width);

    background-color: #fff;
}

#bar {
    position: absolute;
    top: 0%;
    left: 0%;

    height: var(--progress-pos);
    width: 100%;

    transition: all var(--transition-time);

    background-color: #00b500;
    animation-name: bar\ move;
    animation-duration: 1s;
}

/*dark/light mode toggle*/
.toggle {
    position: fixed;
    right: 2%;
    top: 2%;

    z-index: 1;

    --width: 60px;
    width: var(--width);
    --height: calc(var(--width) / 2.3);
    height: var(--height);
    border-radius: calc(var(--width) / 2);

    background-color: var(--contrast-theme);
    border: solid 3px var(--contrast-theme);
    transition: all var(--transition-time);

    display: inline-block;
}

.toggleIndicator {
    position: absolute;
    top: 0%;
    left: 100%;

    width: var(--height);
    height: var(--height);
    border-radius: calc(var(--height) / 2);

    background-color: var(--main-theme);
    transition: ease-in-out all var(--transition-time);

    display: inline-block;
}

#menuButton {
    position: sticky;
    top: 2%;
    left: 2%;

    z-index: 1;

    height: clamp(20px, 6%, 30px);
    width: clamp(25px, 8%, 35px);
}

#menuButton div {
    background-color: var(--contrast-theme);
    margin: 15%;

    width: 100%;
    height: 15%;

    transition: all var(--transition-time);
}