.myprojects-menu{
    text-decoration: none;
}

.main-txt{
    font-family: 'Inter';
    font-size: 32px;
    font-weight: 600;
    color: rgb(56, 56, 56);
}

.main{
    gap: 35px;
}

.top-blocks{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.main-button{
    min-width: 80px;
    height: 40px;
    border: 5px solid #DADADA;
    box-sizing: border-box;
    border-radius: 20px;
    background: #F3F3F3;
    transition: all 500ms;
}

.main-button-inside{
    width: 24px;
    height: 24px;
    background: #DADADA;
    border-radius: 50%;
    margin: 3px;
    margin-left: 43px;
    transition: all 500ms;
}

.main-moving-card-place{
    display: flex;
    justify-content: space-around;
}

.main-moving-card{
    width: 26vw;
    height: fit-content;
    background: #DADADA;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 6px -4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 6px -4px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 6px -4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.moving-card-1-flags-overflow{
    position: relative;
    width: 26vw;
    height: 180px;
    overflow: hidden;
}

.moving-card-1-flags-full{
    position: absolute;
    width: 52vw;
    display: grid;
    width: max-content;
    grid-auto-flow: column;
    height: 180px;
    transition: all 750ms cubic-bezier(0.215, 0.610, 0.355, 1);
}

.moving-card-1-flags-Ukraine{
    width: 26vw;
    background: url(../png/groups/Ukraine-2109x1406.jpg) center/cover;
}

.moving-card-1-flags-Poland{
    width: 26vw;
    background: url(../png/groups/Wroclaw1170.jpg) center/cover;
}

.moving-card-1-flags-gradient{
    position: relative;
    width: 26vw;
    height: 180px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(218,218,218,1) 100%);
}

.moving-card-1-flags-Ukraine-icon,
.moving-card-1-flags-Poland-icon{
    position: absolute;
    width: 60px;
    height: 30px;
    top: 5px;
    left: 0px;
    background: url(../png/Ukraine.png) center/cover;
}

.moving-card-1-flags-text{
    position: absolute;
    width: 130px;
    bottom: 5px;
    left: 5px;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;
    color: #31575c;
}

.moving-card-1-flags-Poland-icon{background: url(../png/Poland.png) center/cover;}

.main-moving-card input{
    display: none;
}

.moving-card-labels{
    height: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
}

.label-Ukraine,
.label-Poland{
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #808080;
    transition: color 500ms;
}

.label-back{
    width: 18vw;
    height: 2px;
    margin: 10px;
    border-radius: 5px;
    background: #808080;
}

.main-moving-card-txt{
    padding-left: 5px;
    margin: 15px 20px;
}

.main-moving-card-txt li{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 600;
    color: rgb(56, 56, 56);
    margin-bottom: 15px;
    transition: color 500ms;
}

.main-moving-card-txt li:hover{
    color: #40939E;
}

#input-Ukraine:checked ~ .moving-card-labels .label-Ukraine,
#input-Poland:checked ~ .moving-card-labels .label-Poland{color: rgb(56, 56, 56);}

.label-Ukraine:hover,
.label-Poland:hover{color: rgb(56, 56, 56);}

#input-Ukraine:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: 0px;}
#input-Poland:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: -26vw;}

.moving-card-2-top-block{
    display: flex;
}

.moving-card-2-image{
    margin: 10px 0px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url(../png/js_group/IMG_20191108_211653.jpg) center/cover;
    border: 5px solid #40939E;
    box-sizing: border-box;
}

.moving-card-2-icon-1,
.moving-card-2-icon-2{
    margin: auto;
    margin-top: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(../png/instagram.png) center/cover;
    border: 3px solid #40939E;
    box-sizing: border-box;
}

.moving-card-2-icon-2{background: url(../png/github.png) center/cover;}

.moving-card-2-txt{
    padding-left: 5px;
    margin: 15px 20px;
}

.moving-card-2-txt li{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 600;
    color: rgb(56, 56, 56);
    margin-bottom: 15px;
    transition: color 500ms;
}

.moving-card-2-txt li:hover{
    color: #40939E;
}

.moving-card-3-text{
    font-family: 'Inter';
    font-size: 24px;
    font-weight:bolder;
    color: rgb(56, 56, 56);
    margin: 10px;
}

.moving-card-3-blocks{
    display: flex;
    flex-direction: column;
    margin: 15px;
    gap: 5px;
}

.moving-card-3-block{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.moving-card-3-block-icon{
    width: 38px;
    height: 38px;
    margin-right: 4px;
}

.block-icon-1{background: url(../png/html.png)center/cover;}
.block-icon-2{background: url(../png/css3.png)center/cover;}
.block-icon-3{background: url(../png/javascript.png)center/cover;}
.block-icon-4{background: url(../png/c.png)center/cover;}
.block-icon-4{background: url(../png/c.png)center/cover;}
.block-icon-4-1{background: url(../png/arduino.png)center/cover;}
.block-icon-4-2{background: url(../png/pngwing.com.png)center/cover;}
.block-icon-5{background: url(../png/csharp.png)center/cover;}
.block-icon-5-1{background: url(../png/unity.png)center/cover;}
.block-icon-6{background: url(../png/python.png)center/cover;}
.block-icon-7{background: url(../png/angular.png)center/cover;}

.moving-card-3-block-txt{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: bold;
    color: rgb(56, 56, 56);
    transition: color 500ms;
}

.moving-card-3-block-txt:hover{color: #40939E;}

.main-arduino{
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 30px;
}

.main-arduino-picture{
    display: grid;
    grid-template-columns: 1fr 4px 1fr;
    height: 400px;
    -webkit-clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
    clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
    border: 4px solid #40939E;
    box-sizing: border-box;
}

.main-arduino-line{background: #40939E;}
.main-arduino-pic-1{background: url(../png/js_group/CPLUS_4) center/cover;}
.main-arduino-pic-2{background: url(../png/js_group/Arduino) center/cover;}

.main-arduino-downloads{
    display: grid;
    grid-template-rows: 1fr 120px;
}

.main-music-textblock,
.main-arduino-downloads-text{
    margin: auto;
    text-align: center;
    font-size: 18px;
    font-family: 'Inter';
    font-weight: 500;
}

.main-arduino-downloads-links{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.main-arduino-downloads-link{
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
}

.downloads-link-1{background: url(../png/photos.png) center/cover;}
.downloads-link-2{background: url(../png/microsoft-powerpoint.png) center/cover;}
.downloads-link-3{background: url(../png/microsoft-powerpoint.png) center/cover;}
.downloads-link-4{background: url(../png/microsoft-powerpoint.png) center/cover;}

.fa-download{
    position: absolute;
    font-size: 30px;
    bottom: 0px;
    right: 0px;
    color: rgb(56, 56, 56);
}

.main-html-css-project{
    display: grid;
    grid-template-columns: 55vw 1fr;
    gap: 30px;
    height: fit-content;
}

.main-html-css-project-picture-overflow{
    overflow: hidden;
    position: relative;
    height: 400px;
}

.main-html-css-project-picture-full{
    position: absolute;
    display: flex;
    flex-direction: row;
    width: auto;
    left: -55vw;
    transition: left 1s;
}

.main-html-css-project-picture{
    position: relative;
    float: left;
}

.html-css-picture-1{background: url(../png/groups/maxresdefault\ \(1\)\ 2.png) center/cover;}
.html-css-picture-2{background: url(../png/groups/montenegro-hero\ 1.png) center/cover;}
.html-css-picture-3{background: url(../png/groups/OO_PM_Drone_ChurchIsland_Twilight_0867_MASTER\ 1.png) center/cover;}
.html-css-picture-4{background: url(../png/groups/OO_PM_Drone_Local_Views_0016_MASTER\ 1.png) center/cover;}
.html-css-picture-5{background: url(../png/groups/Rovinj-15\ 1.png) center/cover;}

.main-html-css-project-picture-gradient{
    display: flex;
    width: 55vw;
    height: 400px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 14.37%, rgba(0, 0, 0, 0.8) 100%);
    align-items: center;
}

.main-html-css-project-btns{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: space-between;
}

.main-html-css-project-btn-2,
.main-html-css-project-btn-1{
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: none;
    outline: none;
    border: 3.5px solid white;
    margin: 10px;
    justify-content: space-around;
    padding: 0px;
    align-items: center;
}

.html-css-project-btn-left,
.html-css-project-btn-right{
    font-size: 30px;
    color: white;
}

.main-html-css-project input{
    display: none;
}

.main-html-css-project-btns-small{
    display: flex;
    width: 85px;
    margin-top: auto;
    margin-bottom: 10px;
    justify-content: space-between;
}

.btn-small{
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 50%;
    transition: background 500ms;
}

#html-css-project-radio-1:checked ~ .main-html-css-project-picture-overflow .main-html-css-project-btns label:nth-child(1),
#html-css-project-radio-2:checked ~ .main-html-css-project-picture-overflow .main-html-css-project-btns label:nth-child(2),
#html-css-project-radio-3:checked ~ .main-html-css-project-picture-overflow .main-html-css-project-btns label:nth-child(3),
#html-css-project-radio-4:checked ~ .main-html-css-project-picture-overflow .main-html-css-project-btns label:nth-child(4),
#html-css-project-radio-5:checked ~ .main-html-css-project-picture-overflow .main-html-css-project-btns label:nth-child(5){
    background: white;
}

.html-css-project-inside{
    display: flex;
    gap: 20px;
    flex-direction: column;
    margin: auto 100px;
}

.html-css-project-inside-txt-1{
    width: fit-content;
    font-size: 20px;
    font-family: sans-serif;
    color: white;
    border: 1px solid #FFFFFF;
    padding: 8px 20px;
}

.html-css-project-inside-txt-2{
    font-family: sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    max-width: 500px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.html-css-project-inside-btn{
    width: fit-content;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    padding: 15px 80px;
}

.main-html-css-project-block{
    display: grid;
    grid-template-rows: 1fr 120px;
}

.main-html-css-project-downloads{
    display: flex;
}

.main-html-css-project-download{
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
}

.html-css-project-download-1{background: url(../png/planet-earth.png) center/cover;}
.html-css-project-download-2{background: url(../png/github.png) center/cover;}
.html-css-project-download-4{background: url(../png/figma.png) center/cover;}
.html-css-project-download-3{background: url(../png/figma\ \(2\).png) center/cover;}

.main-music-center{
    display: grid;
    grid-template-columns: 5fr 5fr;
    height: 500px;
    gap: 30px;
}

.main-music-blocks{
    display: grid;
    justify-content: space-around;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: auto auto auto;
    padding: 10px;
    box-sizing: border-box;
}

.main-music-block-overflow{
    display: flex;
    overflow: hidden;
    align-items: center;
    position: relative;
}

.main-music-block-full{
    position: relative;
    width: 150px;
    height: 150px;
    transition: height 1s;
}

.main-music-block{
    width: 150px;
    height: 150px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    position: absolute;
    top: 0px;
    z-index: 1;
}

.music-block-1{background: url(../png/music/three-days-grace.jpg) center/cover;}
.music-block-2{background: url(../png/music/thirty-seconds-to-mars.jfif) center/cover;}
.music-block-3{background: url(../png/music/falling-in-reverse.jfif) center/cover;}
.music-block-4{background: url(../png/music/linkin-park.jpg) center/cover;}
.music-block-5{background: url(../png/music/thousand-foot-crutch.jfif) center/cover;}
.music-block-6{background: url(../png/music/seether.jpg) center/cover;}

.main-music-block-text{
    width: 150px;
    font-size: 26px;
    font-family:'Courier New', Courier, monospace;
    font-weight: 600;
    text-align: center;
    position: absolute;
    bottom: 0px;
    z-index: 0;
}

.main-music-textblock{
    padding: 10px;
    box-sizing: border-box;
}

@media screen and (max-width:1210px){
    .main-html-css-project{
        width: 80vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 400px 1fr;
        gap: 30px;
        height: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .main-html-css-project-picture-full{
        left: -80vw;
    }
    .main-html-css-project-picture,
    .main-html-css-project-picture-gradient{
        width:80vw;
    }
    .main-html-css-project-block{
        gap: 10px;
    }
    .main-music-center{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
        margin: 10px 0px;
        gap: 10px;
    }
    .main-music-blocks{
        display: grid;
        justify-content: space-around;
        grid-template-rows: 1fr;
        grid-template-columns: repeat(6, auto);
        padding: 10px;
        box-sizing: border-box;
    }
}

@media screen and (max-width:1100px){
    .main-music-blocks{
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(5, auto);
        gap: 20px;
    }
    .main-arduino{
        grid-template-columns: 1fr;
        grid-template-rows: 400px 1fr;
        gap: 30px;
    }
    .main-arduino-downloads{
        gap: 10px;
    }
}

@media screen and (max-width:1000px){
    .main-moving-card-place{
        justify-content: space-between;
    }
    .moving-card-1-flags-overflow,
    .moving-card-1-flags-full,
    .moving-card-1-flags-Ukraine,
    .moving-card-1-flags-gradient,
    .moving-card-1-flags-Poland,
    .main-moving-card{
        width: 260px;
    }
    #input-Poland:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: -260px;}
}

@media screen and (max-width:950px){
    .main-music-blocks{
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(4, auto);
        gap: 20px;
    }
}

@media screen and (max-width:920px){
    .main-moving-card-place {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .main-moving-card{
        width: 400px;
        max-width: 400px;
    }
    .moving-card-1-flags-overflow,
    .moving-card-1-flags-full,
    .moving-card-1-flags-Ukraine,
    .moving-card-1-flags-gradient,
    .moving-card-1-flags-Poland,
    .main-moving-card{
        width: 400px;
        max-width: 400px;
    }
    #input-Poland:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: -400px;}
}

@media screen and (max-width:470px){
    .main-moving-card{
        width: 85vw;
    }
    .moving-card-1-flags-overflow,
    .moving-card-1-flags-full,
    .moving-card-1-flags-Ukraine,
    .moving-card-1-flags-gradient,
    .moving-card-1-flags-Poland,
    .main-moving-card{
        width: 85vw;
    }
    #input-Poland:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: -85vw;}
}

@media screen and (max-width:800px){
    .main-music-blocks{
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(3, auto);
        gap: 20px;
    }
}

@media screen and (max-width:630px){
    .main-music-blocks{
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(2, auto);
        gap: 20px;
    }
}

@media screen and (max-width:560px){
    .main{
        align-items: center;
    }
}

@media screen and (max-width:600px){
    .main-html-css-project{
        width: 70vw;
    }
    .main-html-css-project-picture-full{
        left: -70vw;
    }
    .main-html-css-project-picture-overflow,
    .main-html-css-project-picture,
    .main-html-css-project-picture-gradient{
        width: 70vw;
    }
    .main-arduino{
        grid-template-rows: 500px 1fr;
    }
    .main-arduino-picture {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 4px 1fr;
        height: 500px;
        -webkit-clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
        clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
        border: 4px solid #40939E;
        box-sizing: border-box;
    }
}

@media screen and (max-width:550px){
    .main-arduino-downloads,
    .main-html-css-project-block{
        grid-template-rows: 1fr auto;
    }
    .main-music-blocks{
        grid-template-rows: repeat(6, auto);
        grid-template-columns: repeat(1, auto);
        gap: 20px;
    }
    .main-html-css-project-downloads{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 30px;
    }
    .main-arduino-downloads-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 30px;
    }
}

@media screen and (max-width:650px){
    .html-css-project-inside{
        margin-left: auto;
        margin-right: auto;
    }
    .html-css-project-inside-txt-2{
        width:354px;
    }
}

@media screen and (min-width:1656px){
    .main-arduino-downloads-text{
        width: 746px;
        margin: auto;
    }
    .main-arduino-downloads-text-1{
        width: 581.6px;
        margin: auto;
    }
    .main-music-textblock{
        width: 746px;
        margin: auto;
    }
}

@media screen and (min-width:2064px){
    .main-music-center {
        display: grid;
        grid-template-columns: 6fr 4fr;
        height: 260px;
        gap: 30px;
    }
    .main-music-blocks {
        display: grid;
        justify-content: space-around;
        grid-template-rows: 1fr;
        grid-template-columns: repeat(6, auto);
        padding: 10px;
        box-sizing: border-box;
    }
    .main-html-css-project-block {
        width: 770px;
        margin: 50px auto;
    }
    .main-arduino-downloads {
        width: 955.8px;
        margin: 50px auto;
    }
    .main-moving-card,
    .moving-card-1-flags-overflow,
    .moving-card-1-flags-full,
    .moving-card-1-flags-Ukraine,
    .moving-card-1-flags-gradient,
    .moving-card-1-flags-Poland,
    .main-moving-card{
        width: 537px;
    }
    #input-Poland:checked ~ .moving-card-1-flags-overflow .moving-card-1-flags-full{left: -537px;}
}