/*BASIC SETTINGS*/
/*@import url('https://fonts.googleapis.com/css?family=Josefin%20Sans:700|Roboto:400');*/

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto.ttf');
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('/fonts/JosefinSans.ttf');
}

:root{
    --text: #eaeaea;
    --background: #141414;
    --primary: #4d4d4d;
    --accent: hsl(29, 25%, 30%);
}
.accent{
    color: var(--accent);
}
.primary{
    color: var(--accent);
}

body {
    font-family: 'Roboto';
    font-weight: 400;
    margin: 0;

}

h1, h2, h3, h4, h5 {
    font-family: 'Josefin Sans';
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

html {font-size: 100%; background-color: var(--background); padding: 0;} /* 16px */

h1 {font-size: 4.210rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}

p,span,input{
    color: var(--text);
}



/*SECTION SETTIGNS*/

/*Header*/
header{
    display: flex;
    justify-content: space-between;
    padding: 12px 5%;
    align-items: center;
    border-bottom: solid #4d4d4d 2px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-color: var(--background);
    width: 100%;
    box-sizing: border-box;
}
main{
    margin-top: 80px;
}
header img.logo-pc{
    height: 50px;
}
header img.logo-m{
    height: 50px;
}
header img.m-menu{
    height: 50px;
    display: none;
    cursor: pointer;
}
header nav.pc{
    display: flex;
    gap:24px;
}
header nav.pc a{
    color: var(--text);
    text-decoration: none;
    border-bottom: none;
    transition: border-bottom 50ms ease;
}
header nav.pc a:hover{
    border-bottom: solid var(--text) 2px;
}
header nav.pc a.active{
    border-bottom: solid var(--text) 2px;
}
header img.logo-m{
    display: none;
}
.inactive{
    display: none;
}
.active{
    display: flex;
}
header  nav.m{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 78px;
    left: 0px;
    z-index: 101;
    background-color: var(--background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
header  nav.m div{
    height: 2px;
    width: 50vw;
    background-color: var(--text);
}
header  nav.m a{
    color: var(--text);
    text-decoration: none;
    border-bottom: none;
    transition: border-bottom 50ms ease;
    font-size: 1.777rem;
}

@media(max-width:600px){
    header nav.pc{
        display: none;  
    }
    header img.logo-pc{
        display: none;
        }
    header img.logo-m{
        display: initial;
    }
    header img.m-menu{
        display: block;
    }
}

/*footer*/

footer{
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:48px;
    padding: 5%;
}

footer img{
    display: none;
}
footer a{
    display: block;
    text-decoration: none;
    color: var(--text);
    margin: 0;
}
footer p{
    margin: 0;
}
footer>div,footer>nav{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width:800px) {
    footer{
        flex-direction: row;
        justify-content: space-between;
        
    }
    footer img{
        display: block;
        max-width: 10vw;
    }
}

/*text+img*/

section.text-image{
    display: flex;
    justify-content: space-evenly;
    padding: 5%;
    flex-direction: column;
    align-self: center;
    gap: 5vw;
}
section.text-image>div>h2{
    text-align: center;
    margin-bottom: 48px;
}
section.text-image>div{
    align-self: center;
}
@media(min-width:850px){
    section.text-image{
        flex-direction: row;
    }
    section.text-image img{
        max-width: 40vw;
    }
}


/*3 photos*/
section.photo-3{
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
gap: 48px;
}
section.photo-3 h2{
    text-align: center;
}
section.photo-3 div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
section.photo-3 div img{
    max-width: 80%;
}
@media(min-width:800px){
    section.photo-3 div{
        flex-direction: row;
        height: 25vw;
        justify-content: space-between;
    }
    section.photo-3 div img{

        height:inherit;
        width:auto;
    }
}

/*.button*/
.button{
    background-color: var(--accent);
    color: var(--text);
    padding: 12px;
    text-decoration: none;
    transition: 0.2s ease-in;
}
.button:hover{
    background-color: var(--primary);
}

/*contact*/
section.contact{
    display: flex;
    padding: 5%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 48px;
}
section.contact img{
    width: 80%;
}
section.contact>div{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
section.contact a{
    color: var(--text);
    text-decoration: none;
    font-size: 1.333rem;
    transition: 0.2s ease-in;
}
section.contact a:hover{
    color: var(--primary);
}
section.contact h2{
    color: var(--accent);
}
@media(min-width:800px){
    section.contact img{
        display:block;
        width: 30%;
    }
    section.contact{
        flex-direction: row;
        justify-content: space-evenly;
        
    }
    section.contact>div{
        align-self: center;
        align-items: center;
    }
}