@media screen and (max-width: 765px) {

    body {
        
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

}

body {

    animation: fadeInDown 1.0s linear;
}

@keyframes fadeInDown {

from {

    opacity: 0;
    transform: translateY(-100px);
}

to {

    opacity: 1;
    transform: translateY(0px);
}

}

html {

  overflow-y: scroll;
}

.logo {

background-color: grey;
display: flex;
position: relative;
  
}

.logo h1 {

font-size: 30px;
position: absolute;
justify-content: center;
left: 150px;
border: 3px solid blue;
background-color: lightblue;

}

.logo img {

width: 150px;
height: 150px;



}

.social-media {

background-color: #657985;

}

.social-media img {


display: inline;
margin-left: 100px;
cursor: pointer;

}



.meni {

	
width: 100%;
height: auto;
background-color: black;
cursor: pointer;
border: 1px solid black;

}

.meni summary {

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}



.meni summary:hover b {
    color: #00bfff;
    opacity: 1;
}

.meni summary:hover .levi-meni div
 {
    background-color: #00bfff;
    opacity: 1;
}




.meni summary:hover .desni-meni div {
    background-color: #00bfff;
    opacity: 1;
}

.meni summary:hover img {
    color: #00bfff;
    opacity: 0.5;
}



.levi-meni{


	display: flex;
	flex-direction: column;
	justify-content: flex-start;
  

}

.levi-meni div {

	width: 50px;
	height: 1px;
	padding: 5px;
	background: white;
	border-radius: 50px;

}

.meni img {


    width: 200px;
    height: 120px;
	  justify-content: center;
}

.desni-meni {

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	

}

.desni-meni div {

	width: 50px;
	height: 1px;
	padding: 5px;
	background: white;
	border-radius: 50px;
}

.levi-meni b {

	font-size: 30px;
	text-align: center;
	color: white;
}




.desni-meni b {

	font-size: 30px;
	text-align: center;
	color: white;
}



.list li {
	
	width: fit-content;
}

.meni ul {
 display: none;
  }

.meni[open] ul { 
	display: block; 
}

.list li:hover a {
    color: #00bfff;
    background-color: rgba(0, 191, 255, 0.5);
}

li a {

	color: white;
    font-size: 30px;
    text-decoration: none;
   
}


section {


  text-align: center;
  margin-left: 100px;
  margin-right: 100px;
  border: 5px solid black;
  background-color: #FFD580;
  font-size: 20px;
  color: black;
}

section img {

  width: 150px;
  height: 200px;
  text-align: center;
  
}

a {

  text-align: center;
  padding: 5px;
  font-size: 20px;
  color: black;
}

footer {

  text-align: left;
  padding: 5px;
  font-size: 15px;
  background-color: darkkhaki;
  color: black;
}