@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=Josefin+Sans&family=Lato:ital,wght@0,300;1,300&family=Nunito:wght@300&family=Roboto:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=Josefin+Sans&family=Lato:ital,wght@0,300;1,300&family=Nunito:wght@300&family=Pacifico&family=Roboto:wght@100;300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=Josefin+Sans&family=Lato:ital,wght@0,300;1,300&family=Nunito:wght@300&family=Pacifico&family=Permanent+Marker&family=Roboto:wght@100;300;400;700&display=swap');
*{

    box-sizing:border-box;
}

body{
    padding:0;
    margin:0;
    background-color: white;
    font-family: 'Roboto';
    overflow-x: hidden;
}

html{
    font-size:62.5%;
}

.header{
    width:100%;
    height:10vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
   margin-bottom: 2rem;
   top:0;
   z-index:500;
}
.header.on{
background-color:black;	
}
.nav.on{
background-color:black;	
}
.header #light{
    position:absolute;
    left:2.5rem;
    font-size:3rem;
    transition:.2s ease;
}
.header #light.fa-toggle-on{
    color:white
}

.header span{
    color:rgb(29, 110, 240);
    margin-left: .5rem;
    font-size:4rem;
    font-family:'Permanent Marker', cursive;
    font-size:bold;
}
.cookie{
    width:100%;
    height:100vh;
    background-color: rgba(0,0,0,.99);
    position:fixed;
    z-index:2000;
    font-size: 2.5rem;
    display:flex;
    align-items:center;
    justify-content: center;
    color: black;
}
.cookie .box{
    width:50%;
    min-height:30rem;
    border-radius:2rem;
    background-color: white;
    border: .5rem solid rgb(0,0,0);
    padding:4rem;
    text-align: center;
    display:flex;
    align-items: center;
    flex-direction: column;
    animation: AAA 1s ;
}
.wrapper{
    width:80%;
    min-height:100vh;
    padding:2rem;
}
.wrapper h1{
    font-size: 5rem;
    text-align: center;
    color:black;
}
.wrapper .box{
    width: 60%;
    margin-left: 20%;
    padding:4rem;
    background-color: rgba(0,0,0,.9);
    color:rgba(255,255,255,.8);
    border-radius:1rem;
}
.home{
    background-image: url('bg.jpg');
    min-height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
   
}

.cookie .box h3{
    font-size: 4rem;
    color:black;

}
.cookie .box .cse{
    padding: 2rem 4rem;
    border:none;
    color:black;
    text-decoration: none;
    transition: all .2s;
}
.cookie .box .policy{
    padding: 2rem 4rem;
    border:none;
    color:black;
    text-decoration: none;
    transition: all .2s;
}
.cookie .box .policy:hover{
    color: rgb(29, 110, 240);
   letter-spacing: .1rem;
   transition: all .2s;
}
.cookie .box .cse:hover{
   color:green;
   letter-spacing: .1rem;
   transition: all .2s;
}
.cookie.active{
    display:none;
}
.cookie .close{
    color:white;
    position:absolute;
    right:0;
    margin:2rem;
   top:0;
}
.nav{
    width:20%;
    height:80%;
    position:absolute;
    right:0;
    background-color: black;
    display:flex;
    flex-direction: column;
    text-align:center;
    transform:translateX(500px);
    left:1000rem;
    transition:all .2s ease;
    visibility: hidden;
    display:none;
align-items: center;
}
.href:hover{
	cursor:pointer;
}
.header #menu{
    position:absolute;
    right:2.5rem;
    font-size:3rem;
    transform:rotate(360deg);
    transition:.2s;
}
.header #menu:hover{
    cursor:pointer;
}
.nav a{
    display:inline-block;
    margin-top:2.5rem;
    padding:1rem 2rem;
    font-size: 2.5rem;
    text-decoration: none;
    color:black;
    width:100%;
    border: .1rem rgba(0,0,0,.2);
    border-radius:.5rem;
    border-left: .5rem rgb(29, 110, 240);
}
.nav.active{
opacity:1;
    position:fixed;
    transform:translateX(0px);
    transition:all .2s ease;
    visibility: visible;
    background-color: black;
    border-radius:.5rem;
    display:block;
    z-index:1000;
}
.nav.active a{
    border:.1rem rgba(0,0,0,.3);
    border-radius: .5rem;
    border-left: 5rem rgb(29, 110, 240);
    border: .1rem solid #333;
    color:white;
    padding:2rem;
    margin:.5rem;
    
}
.nav.active a:hover{
    color: rgb(29, 110, 240);
    transition:.2s ease;
}
.bg{
    width:100%;
    min-height:100vh;
    background-color: white;
    display:flex;
    align-items:center;
    padding-top: 5rem;

}

.bg.active{
     margin-top: -2rem;
    background-color: black;
}

.bg .box-container{
    margin:0;
    width:80%;
    margin-left:10%;
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    margin-bottom: 2rem;
}

.bg .box-container .box{
    flex:1 1 45rem;
    padding: 1rem 2rem;
    border: .1rem solid black;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.4);
    border-radius:.5rem;
    margin:2rem;
    text-align:center;
    
   
}
.bg .box-container .box{
    font-size: 1rem
    
   
}
.bg .box-container .box.act{
    
    border: .1rem solid white;
    box-shadow: 0 .5rem 1rem rgba(255,255,255,.8);
    color:white;
   
}
.bg .box-container .box a{
    text-decoration: none;
    color:black;
    font-size: 3rem;
    font-weight: bold;
    width:100%;
	height:auto;
}
#menu{
	
	opacity:0;
}
.bg .box-container .box a:hover{
    color: rgba(0,0,0,.8);
    transition: color .2s;
}
.bg .box-container .box.act a:hover{
    
   
    color:rgba(255,255,255,.8)
    
   
}

.bg .box-container .box.act a{
    
   
    color:white;
    
   
}
.bg .box-container .box:hover{
transform:translateY(-.5rem);
transition: transform .2s;
}
::-webkit-scrollbar{
 
    background-color: black;
}
::-webkit-scrollbar-thumb{
    background-color:rgb(29, 110, 240);

}


.bg .box-container .box h3:hover{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.4);
    transition: .5s;
    border-radius:.5rem;
    cursor:pointer;
}
.bg .box-container .box img{
    width:100%;
    height:30vh;
    object-fit:cover;
    background-position: center;
    border-radius:.5rem;
    margin-top:.5rem;
    margin-bottom:1rem;
}

.footer{
    width:100%;
    min-height:2rem;
    text-align: center;
    display:flex;
    align-items: center;
    z-index:500;
    justify-content: center;
    background-color: #333;
}
.footer h3{
    font-size: 2rem;
    line-height: 1;
}
.footer img{
    width:2rem;
    height:2rem;
margin-left: 1rem;
margin-right: 1rem;

}
.arrow{
    font-size: 6rem;
    position:absolute;
    right:0;
    top:0;
    margin:2rem;
    color:black;
    transition: .2s ease;
}
.arrow:hover{
    color:rgba(0,0,0,.9);
    transition: .2s ease;
}

.container{
	width: 50%;
	position:fixed;
	background-color: black;
	top:1000rem;
	left:25%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70vh;
	
}

.container .box{
	width:60%;
	font-size:2rem;
	text-align: center;
}

.container .box .inp{
	width:100%;
	padding: .5rem 1rem;
	font-size:2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.container .box .btn{
	margin-top:2rem;
	margin-bottom: 2rem;
	padding: 1.5rem 3rem;
	font-size: 2.5rem;
}

.container #new_content{
	display:flex;
	align-items:center;
	flex-direction: column;
}
.container .exit{
		position: absolute;
		top:2rem;right:2rem;
		font-size:4rem;
		color: white;
		text-decoration: none;
}
.container.active{
	top:10rem;
	z-index:1000;
}
@media(max-width:1000px){
	#menu{
	right:0;
	visibility: visable;
	opacity:1;
}
    .nav a{
    font-size:2rem;
    margin-top:1rem;
    
    }
	.nav{
		left:0;
	}
	.container .box .inp{
	width:100%;
	padding: .5rem 1rem;
	font-size:1.2rem;
	
}
.container .box .btn{
	
	font-size: 1.5rem;
}
.container.active {
	width:100%;
	left:0;
	padding-bottom: 500rem;
	overflow-y: scroll;
	align-items: baseline;
	height:50vh;
	overflow-x: hidden;
}
 
    .nav.active{
      width:100%;
      height:100vh;
      position:absolute;
      top:10vh
    }
    .cookie{
       
        font-size: 2rem;
        
    }
    .cookie .box{
        width:90%
    }
    .cookie .box h3{
        font-size: 3rem;
        color: black;
    }
    .wrapper .box h3{
        font-size: 2rem;
    }
    .wrapper .box{
        width: 100%;
        background-color: rgba(0,0,0,.8);
        color:rgba(255,255,255,.8);
        border-radius:1rem;
        margin:0;
        padding:2rem
    }
    .wrapper .box ol{
        margin:0;
        margin-left: 1rem;
        
    }
    .wrapper .box .list.active{
        margin:0;
        margin-left: 1rem;
        font-size: 1.3rem;
    }
    .wrapper{
        width:100%;
    }
    .home{
        background-position: cover;
    }
}