@import url('https://fonts.cdnfonts.com/css/valorant');

body {
    background-color: white;
}

img.background {
    position: absolute;
    background-repeat: repeat;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-filter: blur(4px); 
    filter: blur(4px);
}

img.background:hover {
    background-repeat: repeat;
    -webkit-filter: blur(0px); 
    filter: blur(0px);
}


.navbar {
	list-style: none;
	background-color: #d23f4f;
}   

.navbargallery {
	list-style: none;
	background-color: rgb(202, 202, 170);
    width: 100%;

    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
} 

.navbar1{
    display: flex;
	justify-content: center;
}

.navbar1 a {
	text-decoration: none;
	padding: 15px;
	color: white;
    font-size: 45px;
    font-family: 'VALORANT', sans-serif;    
}

.navbar1 a:hover{
	background-color: #65e7da;
    
}

.searchbox {
    margin: auto;
    background-color: #d23f4f;
    width: 70%;

}

.search  {
    display: flex;
    justify-content: center;

}

.search button {
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #65e7da;
    font-size: 20px;
    border: none;
    cursor: pointer;
    font-family: fantasy;
    color: #d23f4f;
}

.search button:hover {
    background: white;
  }

input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 20px;
    border: none;
    color: #d23f4f;
    font-family: fantasy;
}

.searchbox p {
    font-size: 18px;
    font-family: 'VALORANT', sans-serif;
    margin-left: 2%;
    margin-right: 2%;
}

#header1 {
    font-family: 'VALORANT', sans-serif;
    font-size: 30px;
}

#header2 {
    font-family: 'VALORANT',sans-serif;
    font-size: 24px;
}

#name {
    display: inline;
}

#name h2 {
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 1.5%;
}

#name h3 {
    display: inline;
    font-family: 'VALORANT', sans-serif;
    font-size: 23px;
    color: white;
}


#description h2 {
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 1.5%;
}

#description h3{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}

#img1 {
    position: relative;
}
#img{
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
}

#role {
    display: inline;
}

#role h2 {
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
}

#role h3{
    display: inline;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}


#ability1 h2{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
    font-size: 26px;
}

#ability1 h3{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability1 h4{
    display: inline;
    font-family: 'VALORANT',sans-serif;
    margin-left: 1.5%;
    font-size: 23px;
    color: white;
}

#ability1 h5{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability1 h6{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}


#ability2 h2{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
    font-size: 26px;
}

#ability2 h3{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability2 h4{
    display: inline;
    font-family: 'VALORANT',sans-serif;
    margin-left: 1.5%;
    font-size: 23px;
    color: white;
}

#ability2 h5{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability2 h6{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}


#ability3 h2{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
    font-size: 26px;
}

#ability3 h3{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability3 h4{
    display: inline;
    font-family: 'VALORANT',sans-serif;
    margin-left: 1.5%;
    font-size: 23px;
    color: white;
}

#ability3 h5{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability3 h6{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}


#ability4 h2{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    margin-right: 2%;
    font-size: 26px;
}

#ability4 h3{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability4 h4{
    display: inline;
    font-family: 'VALORANT',sans-serif;
    margin-left: 1.5%;
    font-size: 23px;
    color: white;
}

#ability4 h5{
    display: inline;
    font-family: 'VALORANT', sans-serif;
    margin-left: 8%;
    font-size: 23px;
}

#ability4 h6{
    margin-left: 8%;
    margin-right: 8%;
    font-family: 'VALORANT',sans-serif;
    font-size: 23px;
    color: white;
}

.info {
    margin: auto;
    background-color: #d23f4f;
    width: 70%;
}