@import url('https://fonts.googleapis.com/css2?family=Playwrite+HR+Lijeva:wght@200&display=swap');

* {
    text-decoration: none;
    font-family: "Playwrite HR Lijeva", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

::selection { 
color: rgb(242, 242, 242);

    background: #1a3132;
}

#dropbtn {
    display: block;
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
    background-image: url("assets/dropdown.png") !important;
    background-size: 100%;
    height: 50px;
    width: 50px;
    margin-left: 1250px;
    margin-right: 1250px;
}




.h1, .h3, #about-me {
color: rgb(242, 242, 242);
}
#name-title {
    text-align: center;
    color: rgb(242, 242, 242)

}
#about-me {
    text-align: center;
}
body {
    background-color: #2b5154;
    /* background-image: linear-gradient(90deg, #bcdbdc, #79b7b9, #4f9496, #356364, #1a3132 ); */
    /*     animation: gradient 15s ease infinite; */
    /*     background-size: 400% 400%; */

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#abcdefu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
#infobox {
    width: 800px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-bottom: 2em;
    border-radius: 30px;
    background-color: #346265;
}


#name {
    color: #9ac8cb;

}

#contact {
    margin-top: 1em;
    text-align: center;
}

#contact a i {
    padding-left: 0.35em;
    padding-right: 0.35em;

    color: #9ac8cb !important;
    transition: transform .2s;
}



#nohello {
    color: #9ac8cb;
}

#nohello:hover {
    opacity: 0.7 !important;
}
#upper {display: flex}
#left {
flex: left; margin: auto; }
#right {flex: right; margin: auto; transition: transform .2s; }
@media (max-width: 1000px) {
#upper {
    flex-direction: column
}
#infobox {
    width: 75ch}
}
#right:hover {
transform: scale(1.1)}
#avatar {
    height: 180px;
    width: 180px;
    object-fit: cover;
    image-resolution: snap;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 50%;
    transition: transform .2s;

}

#avatar:hover {
    transform: scale(1.1)
}

#contact a i {
    color: rgb(64, 119, 124);
    font-size: 32px;
}

#contact a i:hover {
    opacity: 0.7;
    transform: scale(1.15);
}

#name:hover {
    opacity: 0.7;

}


.nav-button {
    float: right;
    display: inline-block;
    border: none;
    background-color: rgb(242, 242, 242);
    height: 55px;
    width: 80px;
    text-decoration: none;
    margin-right: 2%;
    font-size: medium;
    color:rgb(64, 119, 124);
    border-radius: 10%;
}




.divider {
    width:5px;
    height:auto;
    display:inline-block;
}


.nav-button:hover {
    opacity: 0.7;
    color:rgb(242, 242, 242);
    background-color:rgb(64, 119, 124);
}