@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap";:root {
    --bg-color: #1e415d;
    --bg-light-color: #366e9d;
    --p1-text-color: #ffdc53;
    --text-color: #ffdc53;
    --p2-text-color: #6bdd36
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Open Sans,sans-serif;
    color: #e0e4e6;
    background-color: var(--bg-color);
    min-height: 100vh
}
.főgomb{
    width: 150px;
    height: 25px;
    background-color: black;
    border-radius: 5px;
    display: block;
    margin: auto;
}
a {
    text-decoration: none;
    color: var(--text-color)
}

.menu-title {
    background-color: var(--bg-light-color);
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    padding: 15px 50px;
    margin-top: 20px;
    margin-bottom: 20px
}

.submenu-title {
    background-color: var(--bg-light-color);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    padding: 12px 50px;
    margin-top: 20px;
    margin-bottom: 20px
}

.content {
    padding: 0 20px
}

.hl {
    background-color: #738080;
    border-radius: 5px;
    padding: 1px 5px;
    color: #1e415d;
    font-weight: 700
}

.text a {
    color: var(--primary-dark-color);
    font-weight: 700
}

hr {
    border-color: #ebf2f22e!important
}

@media screen and (max-width: 600px) {
    .menu-title,.submenu-title {
        padding:15px
    }
}

.tabcontent {
    margin-top: 20px;
    padding: 20px
}

.tabcontent ul {
    margin-top: 0
}

.language-python {
    font-size: 16px!important
}

@media screen and (max-width: 600px) {
    .content {
        padding:0
    }

    .tabcontent {
        padding: 5px
    }
}

iframe {
    border-radius: 5px
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.embed-responsive:before {
    display: block;
    content: ""
}

.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-16by9:before {
    padding-top: 56.25%
}

.embed-responsive-4by3:before {
    padding-top: 75%
}

#ytube {
    display: flex;
    justify-content: center
}

.navigator {
    color: var(--primary-dark-color)
}

.navigator:hover {
    cursor: pointer
}

.youtube-video {
    margin-top: 30px
}

.subtitle {
    margin-top: 20px;
    display: flex;
    justify-content: center
}

.subtitle-txt {
    width: 560px;
    text-align: center
}

.capture-footer {
    margin-top: 20px;
    color: var(--bg-light-color);
    text-align: center
}

@media screen and (min-width: 600px) {
    .capture {
        margin:50px auto 0;
        width: 70%;
        padding: 20px;
        border: 1px solid var(--bg-light-color);
        border-radius: 10px;
        line-height: 30px
    }
}

.try-it {
    display: flex;
    justify-content: flex-end
}

.try-it a button {
    background-color: #1e415d;
    border: #ffd243 1px solid;
    border-radius: 5px;
    box-shadow: #4e4e4e 0 3px 5px inset;
    color: #ffd243;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-family: Open Sans,sans-serif;
    font-size: .8rem
}

.try-it a button:hover,.try-it a button:active {
    background-color: #366e9d;
    cursor: pointer
}

.office-title {
    background-color: #95b1c0;
    color: #1e415d;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    padding: 15px 50px;
    margin-top: 20px;
    margin-bottom: 20px
}

.office-box {
    padding: 0 20px;
    color: #95b1c0
}

@media screen and (max-width: 600px) {
    .office-box {
        padding:0
    }
}

span.py {
    color: #80cbce;
    font-family: Inconsolata,monospace;
    font-size: 18px
}

.test {
    font-weight: 400;
    color: #c7c7c7
}

.link-icon {
    height: 10px;
    margin-left: 10px
}

div.code-toolbar {
    position: relative
}

div.code-toolbar>.toolbar {
    position: absolute;
    z-index: 10;
    top: .3em;
    right: .2em;
    transition: opacity .3s ease-in-out;
    opacity: 0
}

div.code-toolbar:hover>.toolbar {
    opacity: 1
}

div.code-toolbar:focus-within>.toolbar {
    opacity: 1
}

div.code-toolbar>.toolbar>.toolbar-item {
    display: inline-block
}

div.code-toolbar>.toolbar>.toolbar-item>a {
    cursor: pointer
}

div.code-toolbar>.toolbar>.toolbar-item>button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span {
    color: #bbb;
    font-size: .8em;
    padding: 0 .5em;
    background: #f5f2f0;
    background: rgba(224,224,224,.2);
    box-shadow: 0 2px #0003;
    border-radius: .5em
}

div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus {
    color: inherit;
    text-decoration: none
}

pre[class*=language-],code[class*=language-] {
    color: #d4d4d4;
    font-size: 13px;
    text-shadow: none;
    font-family: Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    tab-size: 4;
    -webkit-hyphens: none;
    hyphens: none
}

pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection {
    text-shadow: none;
    background: #264F78
}

@media print {
    pre[class*=language-],code[class*=language-] {
        text-shadow: none
    }
}

pre[class*=language-] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    background: #1e1e1e
}

:not(pre)>code[class*=language-] {
    padding: .1em .3em;
    border-radius: .3em;
    color: #db4c69;
    background: #1e1e1e
}

.namespace {
    opacity: .7
}

.token.doctype .token.doctype-tag {
    color: #569cd6
}

.token.doctype .token.name {
    color: #9cdcfe
}

.token.comment,.token.prolog {
    color: #6a9955
}

.token.punctuation,.language-html .language-css .token.punctuation,.language-html .language-javascript .token.punctuation {
    color: #d4d4d4
}

.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit {
    color: #80e845
}

.token.selector,.token.attr-name,.token.char,.token.builtin,.token.deleted {
    color: #ce9178
}

.token.string {
    color: #d3d389
}

.language-css .token.string.url {
    text-decoration: underline
}

.token.operator,.token.entity {
    color: #d4d4d4
}

.token.operator.arrow {
    color: #569cd6
}

.token.atrule {
    color: #ce9178
}

.token.atrule .token.rule {
    color: #c586c0
}

.token.atrule .token.url {
    color: #9cdcfe
}

.token.atrule .token.url .token.function {
    color: #dcdcaa
}

.token.atrule .token.url .token.punctuation {
    color: #d4d4d4
}

.token.keyword {
    color: #569cd6
}

.token.keyword.module,.token.keyword.control-flow {
    color: #c586c0
}

.token.function,.token.function .token.maybe-class-name {
    color: #dcdcaa
}

.token.regex {
    color: #d16969
}

.token.important {
    color: #569cd6
}

.token.italic {
    font-style: italic
}

.token.constant {
    color: #9cdcfe
}

.token.class-name,.token.maybe-class-name {
    color: #4ec9b0
}

.token.console,.token.parameter,.token.interpolation {
    color: #9cdcfe
}

.token.punctuation.interpolation-punctuation,.token.boolean {
    color: #569cd6
}

.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name {
    color: #9cdcfe
}

.token.selector,.token.escape {
    color: #d7ba7d
}

.token.tag {
    color: #569cd6
}

.token.tag .token.punctuation,.token.cdata {
    color: gray
}

.token.attr-name {
    color: #9cdcfe
}

.token.attr-value,.token.attr-value .token.punctuation {
    color: #ce9178
}

.token.attr-value .token.punctuation.attr-equals {
    color: #d4d4d4
}

.token.entity {
    color: #569cd6
}

.token.namespace {
    color: #4ec9b0
}

pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx] {
    color: #9cdcfe
}

pre[class*=language-css],code[class*=language-css] {
    color: #ce9178
}

pre[class*=language-html],code[class*=language-html] {
    color: #d4d4d4
}

.language-regex .token.anchor {
    color: #dcdcaa
}

.language-html .token.punctuation {
    color: gray
}

pre[class*=language-]>code[class*=language-] {
    position: relative;
    z-index: 1
}

.line-highlight.line-highlight {
    background: #f7ebc6;
    box-shadow: inset 5px 0 #f7d87c;
    z-index: 0
}
feladat_01.css
feladat_01.html megjelenítése.