@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800&family=Varela+Round&display=swap');
/* magenta = #FF003D hover = #ff436f, secondary-color = #102030, lightgray = #ECECEC */

*{
    font-family:'M plus rounded 1c';
    color:#102030;
}

html{
    scroll-behavior: smooth;
}

body{
    margin:0;
    min-height:100vh;
}

/* different screen layouts */

/*smaller Desktop PC screens*/
@media screen and (max-width:970px){
    .sec1, .sec2, .sec3, .sec5, .sec6, .sec7{
        flex-direction:column;
    }

    .sec1 .leftPanel{
        padding-right:40px;
        padding-left:40px;
        margin-bottom:40px;
    }

    .sec1 .rightPanel{
        margin:0 !important;
    }

    .sec2 .leftPanel{
        margin-bottom:40px;
    }

    .sec2 .rightPanel{
        margin-left:0 !important;
    }

    .sec3 .leftPanel{
        margin-right:0 !important;
        margin-bottom:40px;
    }

    .sec5 .leftPanel{
        margin-right:0 !important;
        border-bottom:1px solid #FF003D;
        margin-bottom:40px;
    }

    .sec5 .rightPanel{
        margin-bottom:40px;
    }

    .sec7 .rightPanel{
        margin-left:0 !important;
        padding-left:40px;
        padding-right:40px;
    }

    .sec7 .rightPanel p{
        margin-bottom:0 !important;
    }
}

@media screen and (max-width:820px){
    .header a img{
        height:40px;
    }
}

@media screen and (max-width:640px){
    .header{
        flex-direction:column;
    }

    .header .menu .menuItems{
        margin-top:0;
    }
}

/*mobile screens*/

@media screen and (max-width:510px){
    /* headers */
    .header .menu .menuItems,
    .sec1 .leftPanel h1,
    .sec1 .leftPanel #pobarajPbutton,
    #pobarajP legend,
    .sec2 .rightPanel h1,
    .sec3 .leftPanel h1,
    .sec3 .leftPanel button,
    .sec5 .rightPanel h1,
    .sec6 #contact legend,
    .sec7 .rightPanel h1,
    .footer .menu .menuItems{
        font-size:20px !important;
    }

    /* regular p's */
    .sec1 .leftPanel h2,
    #pobarajP input,
    #pobarajP #kontaktLabel,
    #pobarajP #textarea,
    .sec2 .rightPanel h3,
    .sec3 .leftPanel h3,
    .sec5 .rightPanel h3,
    .sec6 #contact input,
    .sec6 #contact #kontaktLabel,
    .sec6 #contact #textarea,
    .sec7 .rightPanel p{
        font-size:16px !important;
    }

    /* images */

    .sec7 .leftPanel{
        display:none;
    }
    .sec7 .leftPanel img{
        /*height:280px;*/
    }

    .sec5 .rightPanel .hoodienmug img{
        height:100px !important;
    }

    .sec1 .rightPanel img{
        z-index:-1;
        height:350px;
    }

    .sec3 .rightPanel img{
        height:260px;
    }

    .sec5 .leftPanel{
        display:none !important;
    }

    .footer img{
        height:40px;
    }

    /* else */

    textarea, select{
        border:none !important;
        outline:none !important;
    }

    button, .header .menu p, .footerContent .menu p{
        -webkit-highlight-color:transparent;
    }

    .footer hr{
        display:none !important;
    }

    .footer .footerContent .menu{
        background:#FF003D;
        min-width:100% !important;
        justify-content:center;
    }

    .footer .footerContent .menu p{
        text-decoration:none !important;
        color:white !important;
    }

    .footer .footerContent .menu p:active{
        text-decoration:underline !important;
        text-underline-offset:7px !important;
    }

    .header .menu{
        background:#FF003D;
        min-width:100% !important;
        padding:10px 0 10px 0;
        justify-content:space-around;
    }

    .header .menu p{
        text-decoration:none !important;
        margin-bottom:0 !important;
        background-color:transparent !important;
        color:#fff !important;
        padding:0 !important;
    }

    .header .menu p:active{
        text-decoration:underline !important;
        text-underline-offset: 7px !important;
        opacity: 70%;
    }

    .sec2{
        flex-direction:column-reverse;
        padding-bottom:0 !important;
        background:white !important;
        box-shadow:none !important;
        padding-top:0 !important;
    }

    .sec2 .rightPanel{
        margin-bottom:0;
        padding-bottom:20px;
        border-bottom:1px solid #FF003D;
        display:none;
    }

    .footer .footerContent{
        margin-top:0 !important;
        min-width:100% !important;
    }

    .sec7 .rightPanel{
        padding-right:40px;
        padding-left:40px;
    }

    .sec6{
        padding-top:0 !important;
    }

    .sec2 .leftPanel{
        min-width:100% !important;
        margin-bottom:0 !important;
    }

    #pobarajP, #contact{
        min-width:calc(100% - 50px) !important;
        max-width:calc(100vw - 50px) !important;
        border-radius:0 !important;
        background-color:#FF003D !important;
        box-shadow:none !important;
    }

    #pobarajP legend, #pobarajP input, #pobarajP input::placeholder, #pobarajP span{
        color:white !important;
    }

    #pobarajP input{
        border-color:white !important;
    }

    #contact legend, #contact input, #contact input::placeholder, #contact span{
        color:white !important;
    }

    #contact input{
        border-color:white !important;
    }

    #pobarajP input[type="submit"], #contact input[type="submit"]{
        max-width:fit-content !important;
        padding-left:20px !important;
        padding-right:20px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        font-size:20px !important;
        background-color:white !important;
        color:#FF003D !important;
    }

    .sec6{
        padding-bottom:0 !important;
    }

    .sec1 .leftPanel #pobarajPbutton, .sec3 .leftPanel #kontaktButton{
        min-width:100%;
    }
}

@media screen and (max-width:350px){
    .header .menu{
        display:none !important;
    }
    .container{
        margin-top:90px !important;
    }
    .footer .menu .menuItems{
        font-size:12px !important;
    }
    .footer .footerContent{
        margin-top:20px !important;
    }
}

/*header*/

.header{
    position:fixed;
    top:0;
    background-color:rgba(255, 255, 255);
    display:flex;
    justify-content:space-around;
    align-items:center;
    min-width:100%;
    box-shadow:0 0 10px;
}

@keyframes scrollUp{
    from {margin-top:-60px;}
    to {margin-top:0;}
}

@keyframes scrollDown{
    from {display:flex;margin-top:0;}
    to {margin-top:-60px;}
}

.unscrolledHeader{
    display:flex;
    justify-content:center;
    align-items:center;
    animation:scrollUp 0.3s;
}

.scrolledHeader{
    display:none;
    animation:scrollDown 0.3s;
}

.header img{
    margin:10px 0 10px 0;
    cursor:pointer;
}

.header .menu{
    display:flex;
    gap:14px;
    margin-right:0;
}

.header .menu p{
    font-size:25px;
    font-weight:500;
    color:#FF003D;
    text-decoration:underline;
    cursor:pointer;
    text-underline-offset:9px;
    transition:all 0.1s linear;
}

.header .menu p:hover{
    color:#ff436f;
    text-underline-offset:7px;
}

/* container */

.container{
    margin-top:150px;
}

/*section 1 */

.sec1{
    display:flex;
    align-items:center;
    justify-content:center;
}

.sec1 h1{
    margin-top:0;
    font-size:37px;
    animation:pullinleft 1s;
}

.sec1 h2{
    font-size:33px;
    font-weight:500;
    animation:pullinleft 1s;
}

.sec1 button{
    color:white;
    font-weight:500;
    background-color:#FF003D;
    font-size:31px;
    border:none;
    padding:5px 20px 5px 20px;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.1s linear;
    animation:pullinleft 1s;
}

.sec1 button:hover{
    background-color:#ff436f;
}

@keyframes pullinright{
    from {transform:translateX(500px)}
    to {transform:none;}
}

@keyframes pullinleft{
    from {transform:translateX(-500px)}
    to {transform:none;}
}

.sec1 .rightPanel{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:70px;
    animation:pullinright 1s;
}

/*section 2*/
.sec2{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0 40px 0;
    background-color:rgb(245,245,245);
}

.sec2 h1{
    margin-top:0;
}

.sec2 #pobarajP{
    border-radius:20px;
    background-color:white;
    padding:25px;
    font-size:30px;
    display:flex;
    flex-direction:column;
    max-width:370px;
    min-width:370px;
    box-shadow:3px 3px 5px #00000054;
}

#pobarajP legend{
    font-weight:600;
    text-align:center;
    margin-bottom:20px;
}

#pobarajP input{
    font-size:26px;
    
    font-weight:500;
    border:none;
    border-bottom:2px solid #102030;
    margin-bottom:15px;
    background-color:transparent;
}

#pobarajP input:focus{
    outline:none;
}

#pobarajP #kontaktLabel{
    font-size:26px;
    
    margin-bottom:10px;
}

#pobarajP #selectKontakt{
    margin-bottom:20px;
    max-width:fit-content;
    padding:5px;
}

#pobarajP textarea{
    padding:10px;
    resize:none;
    
    border-radius:5px;
    border:1px solid #102030;
    font-size:17px;
    margin-bottom:20px;
}

#pobarajP textarea:focus{
    outline:none;
}

#pobarajP input[type="submit"]{
    border-bottom:none;
    color:white;
    font-weight:500;
    background-color:#FF003D;
    font-size:26px;
    border:none;
    padding:5px 0 5px 0;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.1s linear;
    margin-bottom:0;
}

#pobarajP input[type="submit"]:hover{
    background-color:#ff436f;
}

.sec2 .rightPanel{
    margin-left:70px;
}

.sec2 .rightPanel h1{
    font-size:37px;
    margin-top:0;
    color:#FF003D;
    margin-bottom:10px;
}

.sec2 .rightPanel h3{
    font-size:26px;
    font-weight:500;
    margin-top:0;
    margin-bottom:0;
}

/*section 3*/

.sec3{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0 50px 0;
}

.sec3 .leftPanel{
    margin-right:110px;
}

.sec3 .leftPanel h1{
    font-size:37px;
    margin-top:0;
    color:#FF003D;
    margin-bottom:10px;
}

.sec3 .leftPanel h3{
    font-size:26px;
    font-weight:500;
    margin-top:0;
    margin-bottom:0;
}

.sec3 .leftPanel button{
    color:white;
    font-weight:500;
    background-color:#FF003D;
    font-size:31px;
    border:none;
    padding:5px 20px 5px 20px;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.1s linear;
    margin-top:20px;
}

.sec3 .leftPanel button:hover{
    background-color:#ff436f;
}

/*section 5*/

.sec5{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 0 0 0;
}

.sec5 .rightPanel h1{
    font-size:37px;
    margin-top:0;
    color:#FF003D;
    margin-bottom:10px;
}

.sec5 .rightPanel h3{
    font-size:26px;
    font-weight:500;
    margin-top:0;
    margin-bottom:0;
}

.sec5 .rightPanel .hoodienmug{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-top:30px;
}

.sec5 .leftPanel{
    margin-right:140px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*section 6*/

.sec6{
    background-color:rgb(245,245,245);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0 40px 0;
}

.sec6 #contact{
    border-radius:20px;
    background-color:white;
    padding:25px;
    font-size:30px;
    display:flex;
    flex-direction:column;
    max-width:370px;
    min-width:370px;
    box-shadow:3px 3px 5px #00000054;
}

.sec6 #contact legend{
    font-weight:600;
    text-align:center;
    margin-bottom:20px;
}

.sec6 #contact input{
    font-size:26px;
    
    font-weight:500;
    border:none;
    border-bottom:2px solid #102030;
    margin-bottom:15px;
    background-color:transparent;
}

.sec6 #contact input:focus{
    outline:none;
}

.sec6 #kontaktLabel{
    font-size:26px;
    
    margin-bottom:10px;
}

.sec6 #selectKontakt{
    margin-bottom:20px;
    max-width:fit-content;
    padding:5px;
}

.sec6 #contact textarea{
    padding:10px;
    resize:none;
    
    border-radius:5px;
    border:1px solid #102030;
    font-size:17px;
    margin-bottom:20px;
}

.sec6 #contact textarea:focus{
    outline:none;
}

.sec6 #contact input[type="submit"]{
    border-bottom:none;
    color:white;
    font-weight:500;
    background-color:#FF003D;
    font-size:26px;
    border:none;
    padding:5px 0 5px 0;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.1s linear;
    margin-bottom:0;
}

.sec6 #contact input[type="submit"]:hover{
    background-color:#ff436f;
}

/*section 7 */

.sec7{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0 40px 0;
}

.sec7 .rightPanel{
    margin-left:40px;
}

.sec7 .rightPanel h1{
    font-size:37px;
    margin-top:0;
    color:#FF003D;
    margin-bottom:10px;
}

.sec7 .rightPanel p{
    font-size:18px;
    font-weight:500;
    margin-bottom:40px;
    margin-top:0;
}

/* the horisontal line */
#hr{
    margin:0;
    border:none;
    border-bottom:1px solid #FF003D;
    width:90%;
    margin-right:auto;
    margin-left:auto;
}

/*footer*/

.footer{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

.footer .footerContent{
    margin-top:40px;
    margin-bottom:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.footerContent .menu{
    display:flex;
    margin-bottom:20px;
    gap:14px;
}

.footerContent .menu p{
    font-size:25px;
    font-weight:500;
    color:#FF003D;
    text-decoration:underline;
    cursor:pointer;
    text-underline-offset:9px;
    transition:all 0.1s linear;
}

.footerContent .menu p:hover{
    color:#ff436f;
    text-underline-offset:7px;
}

.footerContent a{
    display:flex;
    align-items:center;
    justify-content:center;
}