html{
scroll-behavior: smooth;
margin:0;
padding:0;
}
body::-webkit-scrollbar{
height: 6px;
width: 10px;
background: rgb(0, 0, 0);
display: flex;
}
body::-webkit-scrollbar-thumb{
background: rgb(2,255,78);
background: linear-gradient(90deg, rgba(2,255,78,1) 0%, rgba(154,212,214,1) 100%);
border-radius: 1px;
}
.mysideNav::-webkit-scrollbar{
display: none;
}
body{
color:rgb(255, 255, 255);
background:#000000;
font-family: 'Raleway', sans-serif;
overflow-x:hidden;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
}
a{
text-decoration: none;
color:black;
}
.mysideNav a{
font-size:4.6vh;
text-decoration:none;
text-decoration: none;
display: block;
padding: 8vh;
text-align: center;
background:#000;
color: rgba(255,255,255,0.5 );
transition:0.3s ease-out;
}
.mysideNav{
display:block;
z-index: 1;
transition: 0.5s;
overflow-x: hidden;
width: 0px;
top: 0;
left: 0;
position: fixed;
height: 100vh;
}
.heading{
text-align:center;
font-size: 10vh;
width:max-content;
margin-left: 40%;
margin-top: -8vh;
}
#sideNav{
position: fixed;
}
.mysideNav a:hover{
color: white;
transition: 0.5s;
}
#main{
transition:0.5s;
margin:0;
padding:0;
width:100%;
}
#load{
border:rgb(255, 0, 0) 10px solid;
border-top:10px transparent solid;
border-radius: 50%;
height: 100px;
width: 100px;
z-index: 1;
display: flex;
animation:spin 1s linear infinite;
}
@keyframes spin{
100%{
transform:rotate(360deg);
}
}
.center{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#main{
transition:0.5s;
margin:0;
padding:0;
width:100%;
}
.card-container{
overflow-x: scroll;
width:100%;
display:inline-flex;
margin:1vh;
/* border:0.5px solid black; */
}
.card-container::-webkit-scrollbar{
display:none;
}
.card{
margin:2vh;
width:42vw;
position: relative;
}
.card img{
/* border:0.5px solid black; */
height:65vh;
padding:1rem;
}
.text{
position: absolute;
top: 50%;
left:50%;
color:white;
transform: translate(-50%, -50%);
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:rgba(0, 0, 0, 0.7);
opacity: 0;
transition: 0.5s ease;
}
.card:hover .overlay{
opacity: 1;
}
#a-1{
background: rgb(250,121,156);
background: linear-gradient(90deg, rgba(250,121,156,1) 0%, rgba(207,115,115,1) 100%);
}
#a-2{
background: rgb(138,234,146);
background: linear-gradient(90deg, rgba(138,234,146,1) 0%, rgba(128,173,160,1) 100%);
}
#a-3{
background: rgb(255,253,254);
background: linear-gradient(90deg, rgba(255,253,254,1) 0%, rgba(85,214,194,1) 100%);
}
#a-4{
background: rgb(213,213,213);
background: linear-gradient(90deg, rgba(213,213,213,1) 0%, rgba(82,146,176,1) 100%);
}
#a-5{
background: rgb(213,213,213);
background: linear-gradient(90deg, rgb(255, 73, 73) 0%, rgba(247,92,3,1) 100%);
}
#a-6{
background: rgb(241,196,15);
background: linear-gradient(90deg, rgb(255, 0, 136) 0%, rgb(255, 33, 63) 100%);
}
#a-7{
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(48,99,142,1) 90%);
}
#a-8{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(58,29,105,1) 100%);
}
#a-9{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(65,2,23,1) 100%);
}
#a-10{
background: rgb(103,0,116);
background: linear-gradient(90deg, rgba(103,0,116,1) 0%, rgba(66,210,218,1) 100%);
}
#a-11{
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgb(53, 122, 115) 100%);
}
#a-12{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(132,59,98,1) 100%);
}
i{
font-size: 3vh;
cursor:pointer;
margin:1vh;
}
footer{
color:rgb(0, 0, 0);
column-count: 2;
background:rgb(235, 231, 231);
height:14%;
display:flex;
}
footer ul{
font-size: 1.5rem;
font-weight: 900;
}
#ul-list{
width:60%;
display:flex;
}
footer ul li{
margin:18px;
}
.list-item a{
font-size:1.1rem;
color:#585858;
letter-spacing: 2px;
padding:8px;
transition:0.5s ease-in-out;
}
.ul-list-header{
font-size:2rem;
letter-spacing: 2px;
}
footer .ul-list-header a{
color:rgb(0, 0, 0);
}
.list-item a:hover{
color:rgb(0, 0, 0);
transition:0.5s;
border:0.5px solid rgb(0, 0, 0);
}
.ul-list-header a:hover{
text-decoration:underline;
}
/* .icons-maps{
width:30%;
} */
#list-1{
width:50%;
}
#list-2{
width:50%;
}
.icon-container{
display:flex-end;
align-items: right;
justify-content: right;
text-align: right;
align-self: right;
justify-self:right;
width:650px;
}
.icon-container i{
color:gray;
font-size: 2.5rem;
transition:0.3s ease-in-out;
}
.icon-container i:hover{
color:rgb(0, 0, 0);
transition:0.3s;
}
#location-map{
height:82%;
overflow:hidden;
margin-top:2%;
}
@media screen and (max-width:576px){
body{
background:rgb(0, 0, 0);
max-width: 576px;
overflow-x: hidden;
}
.heading{
font-size: 5vh;
margin: 0;
padding-left: 15vh;
width: max-content;
margin-top: -5vh;
}
.card-container{
max-width: 95%;
display: flex;
}
.card{
width:110vw;
}
.card img{
height: 52vh;
}
#list-1 ul li img{
width:80vw;
}
#list-2{
margin-left:-5%;
}
footer{
width:100%;
height:25%;
overflow:hidden;
}
#list-1, #list-2{
width:60vw;
height:max-content;
margin-left:-8%;
z-index: 9999;
}
footer i{
margin-top:100%;
}
.icon-container{
width:100vw;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
justify-self:center;
margin-left:-60%;
}
#location-map{
margin-left:-60%;
width:99vw;
}
.ul-list-header{
font-size:1.2rem;
}
.backTop {
margin-top:42vh;
margin-left:-40%;
}
}