.container-mobile{
    display: none;
    visibility: hidden;
}
.container-pc{
    display: flex;
    visibility: visible;
}
*{
/* border: 1px solid black; */
margin:0;
padding:0;
}

html{
scroll-behavior: smooth;
max-height: 100vh;
max-width: 100vw;
}
body {
color: #2F61D6;
font-family: 'Roboto Mono', monospace;
background-color: white;
font-size: 1.2em;
min-width: 500px;
word-wrap: break-word;
}
a{
color:#2F61D6;

}
.details>a{
color: white;
}
img{
max-width: 100%;
}
.icon{
width: 1.3em;
height: 1.3em;
margin-right: 20px;
background-repeat: no-repeat;
background-position: center;

}
.phone{
background: url(./pic/phone.svg) no-repeat center;
filter: invert(1);
}
.language{
background: url(./pic/language.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;

}
.sport{
background: url(./pic/dumbbell.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;
}
.bulb{
background: url(./pic/lightbulb-on.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;
}
.soft{
background: url(./pic/head-side-heart.svg) no-repeat center;
filter: invert(1);
}
.profile{
background: url(./pic/circle-user.svg);
}
.tech{
background: url(./pic/screwdriver-wrench.svg);
}
.exp{
background: url(./pic/suitcase.svg);
}
.edu{
background: url(./pic/graduation-cap.svg) no-repeat center;
}
p.name{
font-size: 25px;
}
.bottom-bordered{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 2px solid white;
padding: 10px;
padding-left: 30px;
}
.blue{
border-color: #2F61D6;
}
.image{
background: url(./pic/pas.png);
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: min(350px,28vh);
width: min(350px,28vh);
background-position: center;
}
.container-pc{
display: flex;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
flex: 1 0 auto;

}
.flex-row{
padding:40px;
display: flex;
flex-direction: column;
}
.left{
width: 33%;
/* min-width: 363px; */
background-color: #2F61D6;
color:white;
}
.right{
width:max(66%,36vw,200px);
/* min-width: 726px; */
background-color: white;
color:#2F61D6;
}
.item-left{
border: 2px solid white;
margin-bottom: 20px;
}
.item-right{
border: 2px solid #2F61D6;
margin-bottom: 20px;

}
.padded{
padding: 20px;
}
.listed{
margin-left: 20px;
}
.padded>h4{
padding: 10px 0;
}
.in-column{
display: flex;
flex-direction: row;
justify-content: space-between;

}
.in-column-close{
align-items: center;
display: flex;
flex-direction: row;
}


@media only screen and (max-width: 950px) {
.container-pc{
    display: none;
    visibility: hidden;
}
.container-mobile{
    display: grid;
    visibility: visible;
}
*{
/* border: 1px solid black; */
margin:0;
padding:0;
}

html{
scroll-behavior: smooth;
max-height: 100vh;
max-width: 100vw;
}
body {
color: #2F61D6;
font-family: 'Roboto Mono', monospace;
background-color: white;
/* background-color: silver; */
font-size: 1.2em;
min-width: 500px;
word-wrap: break-word;
}
a{
color:#2F61D6;

}
.details>a{
color: white;
}
img{
max-width: 100%;
}
.icon{
width: 1.3em;
height: 1.3em;
margin-right: 20px;
background-repeat: no-repeat;
background-position: center;

}
.phone-icon{
background: url(./pic/phone.svg) no-repeat center;
filter: invert(1);
}
.language-icon{
background: url(./pic/language.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;

}
.sport-icon{
background: url(./pic/dumbbell.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;
}
.bulb-icon{
background: url(./pic/lightbulb-on.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center;
}
.soft-icon{
background: url(./pic/head-side-heart.svg) no-repeat center;
filter: invert(1);
}
.profile-icon{
background: url(./pic/circle-user.svg);
}
.tech-icon{
background: url(./pic/screwdriver-wrench.svg);
}
.exp-icon{
background: url(./pic/suitcase.svg);
}
.edu-icon{
background: url(./pic/graduation-cap.svg) no-repeat center;
}

.phone{
background: none;
}
.language{
background: none;
}
.sport{
background: none;
}
.bulb{
background: none;
}
.soft{
background: none;
filter: none;
}
.profile{
background: none;
}
.tech{
background: none;

}
.exp{
background: none;
}
.edu{
background: none;

}
.item-left{
margin: 5px 0px;
}
.item-right{
margin: 5px 0px;

}
p.name{
font-size: 25px;
}
.bottom-bordered{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 2px solid white;
padding: 10px;
padding-left: 30px;
}
.blue{
border-color: #2F61D6;
}
.image{
background: url(./pic/pas.png);
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: min(350px,28vh);
width: min(350px,28vh);
background-position: center;
margin: 0 auto;
}
.container{
display: flex;
flex-direction: row;
max-width: 1100px;
margin: 0 auto;
flex: 1 0 auto;

}
.flex-row{
padding:40px;
display: flex;
flex-direction: column;
}
.item-left{
border: 2px solid white;
/* margin-bottom: 20px; */
/* width: 33%; */
/* min-width: 363px; */
background-color: #2F61D6;
color:white;
/* height: min(350px,32vh); */
}
.item-right{
border: 2px solid royalblue;
/* margin-bottom: 20px; */
/* width:max(66%,36vw,200px); */
/* min-width: 726px; */
background-color: white;
color:#2F61D6;

}
.padded{
padding: 20px;
}
.listed{
margin-left: 20px;
}
.padded>h4{
padding: 10px 0;
}
.in-column{
display: flex;
flex-direction: row;
justify-content: space-between;

}
.in-column-close{
align-items: center;
display: flex;
flex-direction: row;
}

.photo { grid-area: photo;
margin-bottom: 0;
/* border: none; */
}
.profile { grid-area: profile; }
.contact { grid-area: contact; }
.tech { grid-area: tech; }
.soft { grid-area: soft; }
.projects { grid-area: projects; }
.lang { grid-area: lang; }
.education { grid-area: education; }
.extra { grid-area: extra; }
.hobbies { grid-area: hobbies; }

.blue-padded{
    padding: 10px 30px;
    background-color: #2F61D6;
}
.white-padded{
    padding: 10px 30px;
    background-color: white;
}

.image{
    background: url(./pic/pas.png) no-repeat cover;
    height: max(250px,50vw);
    width: max(250px,50vw);
}
.in-column{
    flex-direction: column;
}
.in-column-close{
    flex-direction: column;
}
.stays{
    flex-direction: row;
}
.listed{
    /* margin:0; */
    margin-right: 20px;
}
/* ul{
    list-style-type: none;
} */
.container-mobile {
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        "photo"
        "profile"
        "contact"
        "tech"
        "soft"
        "projects"
        "lang"
        "education"
        "extra"
        "hobbies"; 
    }
.flex-row{
    padding:10px;
    width: 100vw;
}
.right,.left{
    width:100%;
}
.blue-padded{
padding: 10px;
background-color: #2F61D6;
}
.white-padded{
    padding: 10px;
    background-color: white;
}
body{
    min-width: 200px;
    background-color: #2F61D6;
}
}