@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@900&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

:root
{
    --box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    --orange:rgb(231, 192, 17);
/*
    --red:rgb(255, 0, 0);
*/
    --red:rgb(255, 99, 71);
    --lightorange:rgb(240, 216, 111);
    --darkorange:rgb(207, 133, 23);
    --darkblue: #2c3e50;
    --white:#fff;
    --border: 1rem solid rgba(0,0,0,.1);
    --grey: #eee;
    --lightgrey: rgb(207, 206, 203);
    --llightgrey:#f5f5f5;
    --background: rgb(255, 248, 213);
    --lightblue:#007BFF;
    --blue:rgb(31, 51, 236);
}

body
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav
{
    background-color: var(--lightorange);
    height: 80px;
    width: 100%;
    box-shadow: var(--box-shadow);
}

nav .logo
{
    font-family: 'Lobster', cursive;
    font-size: 28px;
    color: var(--white);
    margin-top: 20px;
    float: left;
    padding: 0 5px;
}

nav img
{
    float: left;
    width: 60px;
    max-width:100%;
    height:auto;
    padding-top: 7px;
}

nav div
{
    margin-left: 50px;
}

nav ul
{
    float:right;
    margin-right: 20px;
    margin-bottom: 0px !IMPORTANT;
}

nav ul li
{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a
{
    color:var(--white);
    font-family: 'Poppins', sans-serif ;
    font-size: 17px;
    padding: 7px 10px;
    border-radius: 3px;
}

a, a.active, a.logout, a:hover
{
	text-decoration: none !IMPORTANT;
}

a.active, a:hover
{
    background: var(--orange);
    transition:.5s;
}

a.logout, a.logout:hover
{
    background: var(--red);
    transition:.5s;
}

a.disabled
{
	opacity: .65;
	pointer-events: none;
}

.checkbutton
{
    font-size:30px;
    color:var(--white);
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}

#check
{
    display: none;
}

.hidden
{
	display: none;
}

form .required
{
	color: red;
	margin-top: 10px;
	margin-bottom: 10px;
}

form .responsemessagered
{
	color: red;
	border: 2px solid red;
	padding: 5px;
	background: var(--lightgrey);
	margin-bottom: 10px;
}

form .responsemessagegreen
{
	color: green;
	border: 2px solid green;
	padding: 5px;
	background: var(--lightgrey);
	margin-bottom: 10px;
}

form .responsemessageblue
{
	color: blue;
	border: 2px solid blue;
	padding: 5px;
	background: var(--lightgrey);
	margin-bottom: 10px;
}

/* Nem található feliratú üzenet */
main .error-message {
    background-color: #f2dede; 
    border: 1px solid #ebccd1; 
    color: #a94442; 
    padding: 10px;
    margin: 20px auto; 
    width: 50%; 
    text-align: center; 
    font-size: 18px; 
}

/* Fejlesztés alatt feliratú üzenet */
main .under_construction-message {
    background-color: #f2e7de; 
    border: 1px solid #ebdccc; 
    color: #a97242; 
    padding: 10px;
    margin: 20px auto; 
    width: 50%; 
    text-align: center; 
    font-size: 18px; 
}

/* A főoldalra való átirányítás */
main .redirect-message {
    color: #31708f; 
    font-size: 14px; 
    margin-top: 10px; 
}

/*Main*/
main
{
    padding-bottom: 13px;
}

/*Footer*/
footer
{
    background-color: var(--darkblue);
    width: 100%;
    padding: 13px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
}

footer p
{
    color: var(--white);
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
    margin-bottom: 0 !IMPORTANT;
}

footer p a, footer p a.active, footer p a:hover
{
    color: var(--white);
    transition:0s;
    background: none !IMPORTANT;
}

/*Media queries*/
@media (max-width:952px)
{
    nav.logo
    {
        font-size: 30px;
        padding-left: 50px;
    }
    
    nav ul li a
    {
        font-size: 16px;
    }
}

@media (max-width:920px)
{
    .checkbutton
    {
        display: block;
    }
    
    ul
    {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: var(--darkblue);
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
    }
    
    nav ul li
    {
        display: block;
        margin: 50px 0;
        line-height: 40px;
    }
    
    nav ul li a
    {
        font-size: 20px;
    }
    
    a:hover, a.active
    {
        background: none;
        color:var(--orange);
    }
    
    #check:checked ~ ul
    {
        left: 0;
    }
}

@media (max-width:830px)
{
    main #main .content span
    {
        font-size: 37px;
    }
    
    main #main .content h3
    {
        font-size: 42px;
    }
    
    main #main .content p
    {
        font-size: 16px;
    }
}

@media (max-width:700px)
{
    main #main .content span
    {
        font-size: 23px;
    }
    
    main #main .content h3
    {
        padding-right: 100px;
    }
    
    main #main .content p
    {
        padding-right: 100px;
    }
}