@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");*{box-sizing:border-box;margin:0;padding:0}h1{font-family:"Open Sans", sans-serif;font-size:3em;padding:25px 0;text-align:center;color:white}header{padding-bottom:70px}header h2{font-family:"Raleway", sans-serif;font-size:40px;padding:20px 0;text-align:center}header h3{font-size:30px;padding:15px 0;text-align:center}h2{font-family:"Raleway", sans-serif;font-size:40px;padding:30px 10px}h3{font-size:30px;padding:15px 0}p{margin:12px;padding:12px;font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
 "Lucida Sans Unicode", Geneva, Verdana, sans-serif}a:first-child img{width:30px;height:30px}a:last-child img{width:30px;height:30px}#AboutMe button img{padding-left:4px;width:20px;height:20px}#MyProject a img{width:200px;max-height:180px}#MyProject a img:hover{opacity:0.7}form{margin:30px auto;width:90%}form input{display:block;margin:10px;padding:15px;width:80%}form textarea{display:block;margin:10px;padding-left:15px;padding-top:10px;width:80%}form button{margin:10px;border:none;background-color:gray;padding:10px;color:white;text-transform:uppercase}form button:hover{color:black}nav{overflow:hidden;position:relative;width:100%}nav img{float:left;height:950px;width:50%}nav div{background-image:linear-gradient(45deg, #76a7cd, #254d70);float:left;height:950px;width:50%}nav div img{position:absolute;top:5px;right:5px;background-color:black;padding:5px;width:30px;height:30px}nav div img:hover{background-color:white;cursor:pointer}nav div a{display:block;text-transform:uppercase;text-decoration:none;text-align:center;margin:200px 0;font-size:40px;font-weight:900;color:#b4b1b1}nav div a:hover{color:white}footer{position:relative;margin-top:20px;background-color:grey;display:block}footer #arrow{display:none}footer #button-footer{border:1px solid #4e4c4c;position:relative;left:80%;top:30px;transition:background-color 2s}footer #button-footer:hover{background-color:#474545}footer #button-footer a{display:block;width:160px;height:40px;text-decoration:none;text-transform:uppercase;font-weight:500;color:grey;line-height:40px}footer #bottom-immage{margin:0px 50%;width:200px;padding-bottom:30px}footer #bottom-immage img{opacity:0.7}footer #bottom-immage img:hover{opacity:1}article button{height:50px;line-height:50px}article button img{width:40px;height:40px}#AboutMe div{display:inline-block;width:90%}#AboutMe button{display:block}#AboutMe button a{text-decoration:none;color:white}#MyProject li{background-color:#f9f6f6}#MyProject li a{color:#5ca1d2}#MyProject li a:hover{color:#3b607a}#MyProject #jsonn{margin:15px 0}#MyProject .card{position:relative}#MyProject .card a{letter-spacing:2px;display:inline-block;border:1px solid white;text-decoration:none;padding:5px 20px;margin:10px;font-style:oblique;color:white;font-size:22px;font-weight:900;background-color:#9b9999;text-shadow:1px 1px white}#MyProject .card a:hover{background-color:#3e3b3b}#MyProject .card img{max-height:450px}#MyProject .card img:hover{cursor:pointer;opacity:0.8}#MyProject .card .close{width:30px;height:30px;float:right;margin:10px;opacity:1}#MyProject h3{margin-left:20px}#MyProject #quiz-modal{position:absolute;top:0;z-index:10;background-color:gray;color:white;border:1px solid;box-shadow:5px 5px 10px 15px #929290;margin-right:5%}#MyProject #quiz-modal img{outline:3px solid;background-color:white}#MyProject #quiz-modal img:hover{cursor:pointer;opacity:0.8;-webkit-transition:background 2s ease-in;-moz-transition:background 2s ease-in;-ms-transition:background 2s ease-in;-o-transition:background 2s ease-in;transition:background 2s ease-in}#MyProject #quiz-modal .try{color:#1878bd}#MyProject #quiz-modal .try:hover{-webkit-transition:background 2s ease-out;-moz-transition:background 2s ease-out;-ms-transition:background 2s ease-out;-o-transition:background 2s ease-out;transition:background 2s ease-out;-moz-transform:scale(1.2) translateX(4px) translateY(4px);-webkit-transform:scale(1.2) translateX(4px) translateY(4px);-o-transform:scale(1.2) translateX(4px) translateY(4px);-ms-transform:scale(1.2) translateX(4px) translateY(4px);transform:scale(1.2) translateX(4px) translateY(4px)}header{position:relative;background-image:url(https://cdn.pixabay.com/photo/2016/11/22/22/20/trees-1850902_960_720.jpg);background-repeat:no-repeat;background-position:center;background-attachment:fixed;background-size:cover}header div #backgroun{margin:auto;width:50%;background-color:white;opacity:0.5}header #x1{opacity:1;position:absolute;top:10px;right:10px;background-color:#c9c3c3;width:35px;height:35px}header #x1:hover{background-color:white;cursor:pointer}header #x1 div{opacity:1;width:26px;height:6px;background-color:#1878bd;margin:4px 4px}section div{width:90%;margin:0 0 10%;background-color:#f9f6f6}section div img:nth-child(2){width:30px;height:auto}section div img:nth-child(1){width:50px;height:auto}section div a{font-size:medium;color:black;display:block;text-decoration:none;padding:12px 22px;transition:color 1s}section div a:hover{color:#5ca1d2}section div a:nth-child(1){display:inline;padding:0}div.aside{position:sticky;top:0}div.aside img{width:40%;height:auto;opacity:0.8;float:left}.right{margin-left:45%}@media screen and (max-width: 500px){nav img:first-child{display:none}nav div{padding:50% 0;width:100%;float:none;height:100vh}nav div a{margin:10%}nav a:first-child{margin:0}header{background-image:none;padding-bottom:0}header #desktop{display:none}header #mobile{width:100%;width:100%;display:block;margin:5px}header #mobile h3{color:#1878bd;animation-name:ime;animation-duration:3s}@keyframes ime{from{margin-right:-180px;font-style:italic}to{font-style:normal}}header #mobile h4,header #mobile h5{font-weight:400;font-size:medium;text-align:center;animation-name:naslov;animation-duration:6s}@keyframes naslov{from{opacity:0.2}to{opacity:1}}header #mobile img{width:200px;opacity:0.8;display:block;margin:0 auto}div.aside{display:none}.right{margin:5%}.right h2{text-align:center}#AboutMe p{background-color:#1878bd;color:white}#AboutMe div{width:100%;display:block}#AboutMe button{margin:0 auto}#MyProject{margin:10%;width:80%}#MyProject #quiz-modal{width:inherit;background-color:#1878bd;border:none}#Contact input,#Contact textarea{width:90%;margin:5% auto}#Contact img{width:25px;height:25px}#Contact #mail{width:18px;height:18px}footer #button-footer{display:none}footer #arrow{display:block;float:right;margin:30px 60px}footer #bottom-immage{padding:30px;margin-left:30px}}@media screen and (min-width: 501px) and (max-width: 800px){header{padding-bottom:0;background-image:none}header #desktop{display:none}header #mobile{width:100%;width:100%;display:block;margin:5px}header #mobile h3{color:#1878bd}header #mobile h4,header #mobile h5{font-weight:600;font-size:large;text-align:center}header #mobile img{width:200px;opacity:0.8;display:block;margin:5% auto}nav img:first-child{display:none}nav div{padding:50% 0;width:100%;float:none;height:100vh}nav div a{margin:10%}nav a:first-child{margin:0}div.aside{display:none}.right{margin:10%}.right h2{text-align:center}#AboutMe div{width:100%;display:block}#AboutMe button{margin:0 auto}#MyProject{margin:10%;width:80%}#MyProject #quiz-modal{width:inherit}#Contact input,#Contact textarea{width:90%}footer #button-footer{display:none}footer #arrow{display:block;float:right;margin:30px 60px}footer #bottom-immage{padding:30px;margin-left:180px}}@media screen and (min-width: 801px) and (max-width: 999px){#mobile{display:none}nav img:first-child{display:none}nav div{width:100%;float:none;height:100vh}nav a:first-child{margin:0}}@media screen and (min-width: 1000px){#mobile{display:none}.aside img{width:40%}#x1{top:20px;right:20px}.right h2{margin-left:5%}.right #AboutMe button{margin-left:0 auto}.right #MyProject .card{width:35%;float:left;margin:2%}.right #Contact{clear:both}.right #Contact input{width:80%}.right #Contact textarea{width:80%}}@media screen and (min-width: 1500px){#mobile{display:none}h1{font-size:60px}h2{font-size:40px}p{font-size:24px}#button-footer{display:block}}