body{background-color: #9B71B3;
    margin:0px;
    padding:0px;
}

header{
    background-color: #3A1C36;
    height: 12vh;
    font-size: 7vh;
    color: #DFC7E1;
    width: 100vw;
}

nav{
    background-color: #3A1C36;
    height:8vh;
    font-size: 3vh;
}

main{
    background-color: #9B71B3;
    height: 80vh;
    overflow: auto;
}

footer{
    background-color: #3A1C36;
    height: 10vh;
    font-size: 12px;
    color: #DFC7E1;
    padding: 10px;
    width: 100vw;
}



/*
#3A1C36;  dark purple
#9B71B3;  amethyst purple
#E4D0EB;  light purple
#6C6D10;  olive green
#374126;  dark green

text colors
#DFC7E1;  for dark purple
#DDC0EC;  for amethyst purple
#3D203E;  for light purple
#32212B;  for olive green
#E7DDE8;  for dark green
*/


img{
    height: 45vh;
    justify-content: center;
    padding: 20px;
  
}





nav > a:nth-of-type(1){background-color: #6C6D10;}
      a:nth-of-type(2){background-color: #6C6D10;}
      a:nth-of-type(3){background-color: #6C6D10;}
      a:nth-of-type(4){background-color: #6C6D10;}

nav > a{
    text-decoration:solid;
    color: #32212B;
    border-left: #E4D0EB 0.5vw solid;
    padding-left: 2vw;
    padding-right: 2vw;
    justify-content: flex-start; /*?????????????*/
}




@media(min-width:481px){
    .kontajner{
        display: flex;
        flex-direction: column;
    }


    nav{
        height: 10vh;
        box-sizing: border-box;
    }

    main{
        height: 85vh;
        box-sizing: border-box;
        flex-grow: 1;
    }
}



.firstrow{

    display:flex;
    flex-direction: row;
    height: 50vh;
    gap: 10px;

p:nth-of-type(1){
    background-color: #6C6D10;
    flex: 1;
}

p:nth-of-type(2){
    background-color: #374126;
    flex: 3;
    color: #E7DDE8;
}


p{
    overflow: auto;
    text-align: justify;
    padding: 4px 8px; /*vnutorny okraj*/
    margin: 12px; /*vonkajsi okraj*/
}

}

.secondrow{

    display:flex;
    flex-direction: row;
    height: 35vh;
    gap: 10px;

p:nth-of-type(1){
    background-color: #374126;
    flex: 2;
    color: #E7DDE8;
}

p:nth-of-type(2){
    border: #E4D0EB solid 3px;
    flex: 2;
    color: #E7DDE8;
}

p:nth-of-type(3){
    flex: 1;
    background-color: #6C6D10;
    color: #32212B;
}

p{
    overflow: auto;
    text-align: justify;
    padding: 4px 8px; /*vnutorny okraj*/
    margin: 12px; /*vonkajsi okraj*/
}

}

.langskills{

    display: flex;
    flex-direction: row;
    background-color: #374126;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #E7DDE8;


}


.technicalskills{
 
    display: flex;
    flex-direction: row;
    background-color: #374126;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #E7DDE8;

}


h1{
    color: #32212B;
}



.Hobby1{

    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
 
}

.Hobby2{

    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
 
}
.Hobby3{

    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
 
}




.kontakt{

    background-color: #3A1C36;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #DFC7E1;

}



.Gal1{
    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
    height: 20vh;
}

.Gal2{
    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
    height: 20vh;
}

.Gal3{
    display: flex;
    flex-direction: row;
    background-color:#6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
    height: 20vh;
}

.Gal4{
    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
    height: 20vh;
}

.Gal5{
    display: flex;
    flex-direction: row;
    background-color: #6C6D10;
    padding: 10px;
    border: #9B71B3 solid 20px;
    color: #32212B;
    height: 20vh;
}



.uk1{
    display: flex;
    justify-content: center;
    border: #9B71B3 solid 10px;
    color: #DFC7E1;
    height: 60vh;
    text-align: center;

    p:nth-of-type(1){
       flex: 1;
    }
    p:nth-of-type(2){
        flex: 2;
        background-color: #3A1C36;
    }
    p:nth-of-type(3){
        flex: 1;
    }
}

.uk2{
    display: flex;
    justify-content: center;
    border: #9B71B3 solid 10px;
    color: #DFC7E1;
    height: 60vh;
    text-align: center;
 

    p:nth-of-type(1){
       flex: 1;
    }
    p:nth-of-type(2){
        flex: 2;
        background-color: #3A1C36;
    }
    p:nth-of-type(3){
        flex: 1;
    }
}

.uk3{
    display: flex;
    justify-content: center;
    border: #9B71B3 solid 10px;
    color: #DFC7E1;
    height: 60vh;
    text-align: center;
 

    p:nth-of-type(1){
       flex: 1;
    }
    p:nth-of-type(2){
        flex: 2;
        background-color: #3A1C36;
    }
    p:nth-of-type(3){
        flex: 1;
    }
}

.uk4{
    display: flex;
    justify-content: center;
    border: #9B71B3 solid 10px;
    color: #DFC7E1;
    height: 60vh;
    text-align: center;
 

    p:nth-of-type(1){
       flex: 1;
    }
    p:nth-of-type(2){
        flex: 2;
        background-color: #3A1C36;
    }
    p:nth-of-type(3){
        flex: 1;
    }
}

.uk5{
    display: flex;
    justify-content: center;
    border: #9B71B3 solid 10px;
    color: #DFC7E1;
    height: 60vh;
    text-align: center;
 

    p:nth-of-type(1){
       flex: 1;
    }
    p:nth-of-type(2){
        flex: 2;
        background-color: #3A1C36;
    }
    p:nth-of-type(3){
        flex: 1;
    }
}