/*------------------------------------------------------------------------------

GLOBAL

------------------------------------------------------------------------------*/



.first-column li:hover,

.third-column li:hover {

    background-color: magenta;

    color: white;

}



em.desc {

    font-size: small;

}



a {

    color: darkmagenta;

}



table, th, td {

    border: 1px solid black;

}



table {

    width: 100%;

}



th, td {

    padding: 5px;

}



table img {

    max-width: 100px;

}



.clippy {

    position: absolute;

    width: 200px;

    top: -50px;

    right: -50%;

    z-index: 100;

}



/*------------------------------------------------------------------------------

MAIN PARTS

------------------------------------------------------------------------------*/



body {

    background: black;

    background: url("../img/memory.gif");

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;



    color: white;

}



header {

    width: 80vw;

    margin: 50px auto 30px auto;

    padding: 10px 0;

}



.header-title {

    display: inline-block;

}



header .header-title h1 {

    text-transform: lowercase;

    font-family: Arial, Helvetica, sans-serif;

}



footer {

    width: 80vw;

    margin: 30px auto 30px auto;

    padding: 20px 0;



    border: 2px dotted #e6c333;

    box-shadow: 4px 4px lime;

    background: black;



    text-align: center;

}



.footer-2 {

    width: 80vw;

    margin: 30px auto 30px auto;



    text-align: center;

}



main {

    position: relative;

}



/*------------------------------------------------------------------------------

WINDOWS

------------------------------------------------------------------------------*/



.windows {

    width: 80vw;

    margin: auto;

}



.row {

    width: 100%;

}



.column {

    display: block;

    float: left;

}



.first-column {

    width: calc(20% - 20px);

    margin-right: 10px;

}



.second-column {

    width: calc(60% - 20px);

    margin-left: 10px;

    margin-right: 10px;



}



.third-column {

    width: calc(20% - 20px);

    margin-left: 10px;

    position: relative;

}



.row:after {

    content: "";

    display: table;

    clear: both;

}



.window {

    min-height: 600px;



    border-width: 3px;

    border-style: solid;

    border-top-color: #dfdfdf;

    border-left-color: #dfdfdf;

    border-bottom-color: black;

    border-right-color: black;



    background-color: silver;

}



.window .header {

    position: relative;



    background: linear-gradient(90deg, navy, #1084d0);

    width: auto;

    height: 20px;



    margin: 3px;

    padding: 5px;



    font-weight: bold;

    color: white;

}



.window .header.page-title {

    letter-spacing: 0.75em;

    text-transform: uppercase;

}



.window .header::before {

    float: left;

    margin-right: 10px;

    vertical-align: bottom;



    content: "";

    width: 20px;

    height: 20px;



    background-color: transparent;

    background-size: contain;

    background-position: center center;

}



.first-column .header::before {

    background-image: url("../img/Notepad.ico");

}



.second-column .header.hlavni::before {

    background-image: url("../img/earth.ico");

}



.second-column .header.zajmy::before {

    background-image: url("../img/Desktop.ico");

}



.second-column .header.top::before {

    background-image: url("../img/List.ico");

}



.second-column .header.funfacty::before {

    background-image: url("../img/Dialog.ico");

}



.second-column .header.portfolio::before {

    background-image: url("../img/Painting.ico");

}



.second-column .header.film::before {

    background-image: url("../img/Cine-film.ico");

}



.second-column .header.acting::before {

    background-image: url("../img/Star.ico");

}



.second-column .header.zpevnik::before {

    background-image: url("../img/Music Disc.ico");

}



.second-column .content {

    max-height: 600px;

    overflow-y: scroll;

}





.third-column .header::before {

    background-image: url("../img/Certificate 2.ico");

}



.window .header::after {

    float: right;



    content: "";

    width: 15px;

    height: 15px;



    border-width: 2px;

    border-style: solid;

    border-top-color: #dfdfdf;

    border-left-color: #dfdfdf;

    border-bottom-color: black;

    border-right-color: black;



    background-color: silver;

    background-image: url("../img/max.png");

    background-size: contain;

    background-position: center center;



    color: black;

}



.first-column .header {

    background: linear-gradient(90deg, #c190e9 0%, #35e3ec 90%);

}



.third-column .header {

    background: linear-gradient(90deg, rgb(239 0 255) 0%, rgb(231 196 52) 90%);

}



.window .content {

    background-color: aliceblue;

    color: black;

    margin: 3px;

    min-height: 600px;

    padding: 20px;



    overflow-y: scroll;

}



.window:not(.first-column) .content h2 {

    text-align: left;

    margin: 10px 0 0 0;

    font-size: 15pt;

    text-transform: lowercase;

    font-family: Arial, Helvetica, sans-serif;

}



.about {

    width: 100%;

}



/*------------------------------------------------------------------------------

MENU

------------------------------------------------------------------------------*/



.topnav .menu-bars {

    display: none;

}



.menu {

    display: visible;

}



.first-column .content {

    padding: 20px 10px;

}



.first-column ul {

    padding-inline-start: 0px;

    margin: 0;

}



.first-column ul li {

    padding: 5px 0px;

    list-style: none;

    border-bottom: 1px solid #dfdfdf;

}



.first-column h3 {

    margin: 20px 0 5px;

    padding: 5px;



    text-align: center;

    font-size: 1em;

    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0.75em;

    text-transform: lowercase;



    text-shadow: 1px 1px 3px rgb(239 0 255);

    background: linear-gradient(90deg, #c190e9 0%, #35e3ec 90%);

}



.menu-icon {

    height: 20px;

    vertical-align: bottom;

    margin-right: 5px;

}



.coa {

    width: 100%;

}



div.button {

    text-align: center;

    padding: 10px;

    margin: 15px;



    background-color: black;

    border: 2px dashed yellow;

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);



    animation-name: button-spin;

    animation-duration: 1s;

    animation-iteration-count: infinite;

    animation-timing-function: ease;

}



/* The animation code */

@keyframes button-spin {

    0% {

        transform: rotate(-5deg);

    }

    50% {

        transform: rotate(5deg);

    }

    100% {

        transform: rotate(-5deg);

    }

}





a.button {

    color: yellow !important;

}



/*------------------------------------------------------------------------------

INDEX

------------------------------------------------------------------------------*/

.wordart {

    text-align: center;

}



.wordart img {

    max-width: 50%;

    text-align: center;

}



.welcome {

    text-align: center;

}



.welcome img {

    margin: 30px;

    width: 175px;

    height: 175px;

    object-fit: cover;

    text-align: center;

}



/*------------------------------------------------------------------------------

ZÁJMY

------------------------------------------------------------------------------*/



.icon {

    display: inline-block;

    vertical-align: top;

    border: 1px solid transparent;

    text-align: center;



    margin: 10px 0;

    padding: 10px;

    width: 75px;

    height: 85px;

    position: relative;

}



.icon:hover {

    background-color: #87cefa30;

    border: 1px dotted gray;

}



.icon img {

    width: 45px;

    margin-bottom: 5px;



}



.icon:after {

    content: "";

    position: absolute;

    bottom: 42%;

    left: 22%;

    width: 17px;

    height: 17px;

    background: url("/img/Shortcut (big).ico");

    background-size: contain;

    background-repeat: no-repeat;

}



.icon h3 {

    color: #000;

    font-size: 9pt;

    margin: 0px 5px;

}



/*------------------------------------------------------------------------------

film

------------------------------------------------------------------------------*/

.content .film {

    display: inline-block;

    margin: 10px;

    padding: 10px;

    width: 25%;

    text-align: center !important;



    border: 1px solid transparent;

}



.content .film:hover {

    background-color: #87cefa30;

    border: 1px dotted gray;

}





.content .film h3 {

    text-align: center;

    margin-bottom: 1px;

}



.content .film img {

    width: 100%;

}



.film-link {

    text-decoration: none;

    color: black;

}



/*------------------------------------------------------------------------------

acting

------------------------------------------------------------------------------*/

table h3 {

    font-size: 12pt;

    margin: 0 0 5px 0;

}



/*------------------------------------------------------------------------------

top

------------------------------------------------------------------------------*/

.content .top {

    display: inline-block;

    margin: 10px;

    width: 15%;

    text-align: center !important;



    border: 1px solid transparent;



    vertical-align: top;

}



.content .top img {

    width: 100%;

    object-fit: contain;

}



.content .top h3 {

    font-size: 10pt;

    font-weight: 400;

    font-style: italic;

}



/*------------------------------------------------------------------------------

PORTFOLIO

------------------------------------------------------------------------------*/

.image {

    display: inline-block;

    vertical-align: top;

    border: 1px solid transparent;

    text-align: center;



    margin: 10px 0;

    padding: 10px;

    width: 100px;

    height: 100px;

}



.pf-a {

    text-decoration: none;

    color: black;

}



.image:hover {

    background-color: #87cefa30;

    border: 1px dotted gray;

}



.image .portfolio-item {

    width: 100px;

    height: 100px;

    object-fit: cover;

}





/*------------------------------------------------------------------------------

ABOUT

------------------------------------------------------------------------------*/



.third-column .content {

    padding: 20px 10px;

}



.third-column ul {

    padding-inline-start: 0px;

    margin: 0;

}



.third-column ul li {

    padding: 5px 0px;

    list-style: none;

    border-bottom: 1px solid #dfdfdf;

}



.third-column h3 {

    margin: 20px 0 5px;

    padding: 5px;



    text-align: center;

    font-size: 1em;

    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0.75em;

    text-transform: lowercase;



    text-shadow: 1px 1px 3px white;



    background: linear-gradient(90deg, rgb(239 0 255) 0%, rgb(231 196 52) 90%);

}



.third-column p {

    margin: 0;

}



.third-column h4 {

    margin: 10px 0 0px;

}