html{
scroll-behavior:smooth;
}

*{ 
margin: 0; 
padding: 0; 
}

body{
margin: 0px;
padding: 0px;
height: auto;
width: auto;
background-color: #F5F5F5;
overflow-x: hidden;
}

#logo{
width: 23%;
height: 1%;
overflow: visible;
margin-top: 0.5%;
}

#gridlines{
display: grid;
position: absolute;
column-gap: 40px;
background-color: rgba(255, 255, 255, 0.6);
grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
grid-template-rows: 2030px;
padding-left: 50px;
padding-right: 50px;
z-index: 1;
visibility: hidden;
}


#gridlines > div{
background-color: rgba(255, 0, 0, 0.2);
}

#navbar{
width: 56.2vw;
height: 7.2vh;
margin: auto;
display: inline-block;
position: relative;
left: 6.8%;
top: -3vh;
border-radius: 50px;
border: 1.2px solid #000;
background: rgba(217, 217, 217, 0.50);
background-color: transparent;
}

 #navItems{
 display: flex;
 flex-direction: row;
 position: relative;
 top: -8px;
 margin-top: auto;
 margin-bottom: auto;
 }

 #page{
 display: inline-block;
 position: relative;
 float: left;
 font-size: 3.5vh;
 padding: 2.4% 4%;
 color: #003049;
 font-family: sans-serif;
 font-style: normal;
 font-weight: 600;
 line-height: normal;
 text-decoration: none;
 z-index: 2;
 }


/*.home_label, .about_label, .activities_label, .shop_label, .resources_label{
padding-left: 1%;
padding-right: 1%;
 padding-top: 2.6%; 
 padding-bottom: 2.6;
 }*/

#dropdown_icon, #dropdown_icon2, #dropdown_icon3{
position: relative;
margin: auto;
right: 4.3%;
top: 0px;
min-width: 9px;
max-width: 12px;
}

#dropdown1, #dropdown2, #dropdown3{
background-color: #003049;
padding-left: 2.7%;
padding-right: 4%;
display: none;
flex-direction: column;
border-radius: 5px;
position: absolute;
top: 8.8vh;
box-shadow: 0px 5px 13px 1px rgba(0,0,0,0.37);
z-index: 2;
}

#dropdown1{
height: auto;  
padding-top: 3%;
padding-bottom: 2%;
left: 16.5%;
width: auto;
}

#dropdown2{
height: auto;
padding-top: 2.8%;
padding-bottom: 2%;
left: 55.5%;
width: auto;
}

#dropdown3{
height: auto;
padding-top: 2%;
padding-bottom: 2%;
left: 77.6%;
width: auto;
}

#droplist1, #droplist2, #droplist3{
list-style-type: none;
width: auto;
height: auto;
display: flex;
flex-direction: column;
position: relative;
gap: 6.5px;
align-self: center;
}

#droplist1{
top: 16%;
}

#droplist2{
top: 11%;
}

#droplist3{
top: 13%;
}

#droplist1 > li, #droplist2 > li, #droplist3 > li{
width: auto;
height: auto;
}

#subpage{
display: inline-block;
position: relative;
float: left;
font-size: 110%; 
color: #BABFCD;
font-family: sans-serif;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration: none;
}

#about_checkbox, #activities_checkbox, #resources_checkbox{
display: none;
}

#about_checkbox:checked ~ #dropdown1{
display: flex;
}

#about_checkbox:not(:checked) ~ #dropdown1{
display: none;
}

#about_checkbox:checked ~ #dropdown_icon{
transform: rotate(180deg);
transition: transform 0.3s;
transition-timing-function: ease-out;
}

#about_checkbox:not(:checked) ~ #dropdown_icon{
transform: rotate(0deg);
transition: transform 0.2s;
transition-timing-function: ease-out;
}


 #activities_checkbox:checked ~ #dropdown2{
  display: flex;
  }

  #activities_checkbox:not(:checked) ~ #dropdown2{
  display: none;
  }

  #activities_checkbox:checked ~ #dropdown_icon2{
  transform: rotate(180deg);
  transition: transform 0.3s;
  transition-timing-function: ease-out;
  }

  #activities_checkbox:not(:checked) ~ #dropdown_icon2{
  transform: rotate(0deg);
  transition: transform 0.2s;
  transition-timing-function: ease-out;
  }

#resources_checkbox:checked ~ #dropdown3{
display: flex;
}

#resources_checkbox:not(:checked) ~ #dropdown3{
display: none;
}

#resources_checkbox:checked ~ #dropdown_icon3{
transform: rotate(180deg);
transition: transform 0.3s;
transition-timing-function: ease-out;
}

#resources_checkbox:not(:checked) ~ #dropdown_icon3{
transform: rotate(0deg);
transition: transform 0.2s;
transition-timing-function: ease-out;
}

#carousel1_container{
width: 100%;
height: 99vh;
position: absolute;
z-index: -1;
/*background-image: linear-gradient(to bottom,  rgba(252,252,252,0.0) 58%,rgba(160,160,160,0.1) 60%,rgba(94,94,94,0.5) 84%,rgba(50,50,50,0.9) 100%), url('E:/The Pre-Medical Society Website/Simple Website/Assets/20241006_071712-0c23.jpg');*/
background-image: url('https://pre-medicalsocietyimages.s3.us-east-2.amazonaws.com/AWS+S3+Images/20241006_071712-0c23.jpg');
background-repeat: no-repeat;
background-size: cover;
}

#block_1{
width: 100%;
height: 80vh;
background-color: #003049;
position: absolute;
top: 95vh;
border-top: 0.8vh solid #002132;
}

#block_2{
width: 96.5%;
height: 80vh;
background-color: #D66E2D;
position: absolute;
top: 95vh;
border-top: 0.8vh solid #B24B0B;
border-top-left-radius: 2px;
display: flex;
flex-direction: row;
justify-content: space-around;
}

#block_2::after{
  content: "";
  position: absolute;
  width: 99vw;
  height: 40px;
  display: inline-block;
  top: 77vh;
  left: 0;
  right: 0;
  background-color: #F5F5F5;

  /* border-radius of pseudo element */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/*#round-rail{
  margin: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  top: vh;
  left: 0px;
  height: 40px;
  width: 40px;
  margin: 0;
  background: green;
  border: border-box;
  border-top-left-radius: 50%;
  z-index: 2;
}*/

.carousel{
width: 45%;
max-height: 60vh;
position: relative;
margin: auto;
align-self: center;
}


#welx_container{
width: 46.8%;
height: 62.5vh;
display: flex;
flex-direction: column;
align-self: center;
}

#larger_welcome{
font-size: 134.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
color: white;
position: relative;
top: 1.7vh;
}

#mobile_welcome{
display: none;
}

#block_text{
width: 100%;
height: 34.3%;
font-size: 130.3%;
word-wrap: break-word;
font-family: "Noto Sans Ethiopic", sans-serif;
line-height: 5.4vh;
color: black;
margin: auto;
}

#homepagebtns{
width: 96%;
height: auto;
display: flex;
flex-direction: row;
gap: 11.8%;
margin-top: auto;
margin-bottom: auto;
}

#homepagebtn1{
display: flex;
width: 42.7%;
height: 10vh;
font-size: 130.3%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
align-self: flex-start;
background-color: #003049;
z-index: 1;
border: 2px solid #003049;
text-decoration: none;
color: white;
text-align: center;
justify-content: center;
align-items: center;
}


#homepagebtn1link:hover{
color: #D66E2D;
}

#ButtonArrow1, #ButtonArrow2{
width: 10%;
position: relative;
left: 3%;  
}

#homepagebtn2{
display: flex;
width: 42.7%;
height: 10vh;
font-size: 130.3%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
background-color: #003049;
z-index: 1;
border: 2px solid #003049;
text-decoration: none;
color: white;
align-self: flex-end;
text-align: center;
justify-content: center;
align-items: center;
}

#homepagebtn2link:hover{
color: #D66E2D;
}

#events_container{
display: flex;  
flex-direction: column;
position: relative;
top: 170vh;
width: 250vw;
height: 80vh;
overflow-x: visible;
}

#events_container > span h1{
font-size: 5.6vh;
font-family: "Noto Sans Ethiopic", sans-serif;
color: #003049;
position: relative;
left: 3.67vw;
width: auto;
align-self: flex-start;
}

#events_mid_container{
width: 100vw;
height: 80vh;
position: relative;
top: 0vh;
display: flex;
overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#events_mid_container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#events_mid_container{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#cards_container{
position: relative;
top: 4vh;
left: 3.7vw;
width: auto;
height: 62vh;
flex-shrink: 0;
display: inline-block;
margin: 0;
}

#cards_container > ul{
list-style-type: none;
display: flex;
flex-direction: row;
gap: 1.8vw;
scroll-snap-type: x mandatory;
scroll-padding: 0 24px;
}

#card{
scroll-snap-align: start;
}

#card1{
position: relative;
float: left;
font-size: 3.5vh;
width: 20.4vw;
height: 62vh;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2vh;
text-align: left;
cursor: pointer;
box-shadow: -1px 7px 5px 0 #ECEDEE; 
}

#card2, #card3, #card4, #card5, #card6, #card7, #card8, #card9, #card10, #card11{
position: relative;
float: left;
font-size: 3.5vh; 
width: 20.4vw;
height: 62vh;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2vh;
cursor: pointer;
box-shadow: -1px 7px 5px 0 #ECEDEE;
}

#card12{
position: relative;
background-color: transparent;
width: 10px;
height: 62vh;
}

#card_img{
width: 100%;
height: 53%;
border-radius: 10px 10px 0px 0px;
background-image: url("https://pre-medicalsocietyimages.s3.us-east-2.amazonaws.com/AWS+S3+Images/20241006_071712-0c23.jpg");
background-repeat: no-repeat;
background-size: cover;
}

#card_headline{
/*background-color: cyan;*/
width: 94%;
height: 12%;
font-size: 1.5vw;
font-family: "Lato", sans-serif;
font-weight: 535;
margin-left: auto;
margin-right: auto;
}

#card_preview{
/*background-color: cyan;*/
width: 94%;
height: auto;
font-size: 1.18vw;
font-family: "Lato", sans-serif;
font-weight: 500;
color: #8C939A;
margin-left: auto;
margin-right: auto;
overflow: hidden; /*needed for uniform sizing*/
}

#tag_container{
width: 94%;
height: auto;
display: flex;
flex-direction: row; 
flex-wrap: nowrap;
position: absolute;
bottom: 2.5vh;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
}

#card_tag{
width: auto;
height: auto;
font-size: 1.04vw;
font-family: "Lato", sans-serif;
font-weight: 501;
color: #798189;
position: relative;
}

#card_tag2{
width: auto;
height: auto;
font-size: 1.04vw;
font-family: "Lato", sans-serif;
font-weight: 500;
color: #8C939A;
position: relative;
}

#membership_container{
width: 100%;
height: 137vh;
position: absolute;
top: 285vh;
display: flex;
flex-direction: column;
background-color: #EFEFEF;
}

#membership_container > span h1{
font-size: 211.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
color: #003049;
position: relative;
left: 3.75%;
top: 9vh;
}

#qn_container{
width: 100%;
height: 110vh;
position: relative;
left: 4%;
top: 13.5%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
}

#qn1_container, #qn2_container, #qn3_container{
width: 28.45%;
height: 90vh;
position: absolute;
top: 0;
display: flex;
flex-direction: column;
}

#qn2_container{
left: 31.8%;
}

#qn3_container{
left: 63.5%;
}

#clock, #rewards_and_medals, #teacher{
align-self: center;  
}


#qn1_heading, #qn2_heading, #qn3_heading{
font-size: 111.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
font-weight: 600;
text-align: center;
align-self: center;
}

#qn1_heading, #qn2_heading{
top: 2.5%;
}

#qn3_heading{
top: 4%;
}

#qn1_list, #qn2_list{
font-size: 111.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
left: 8%;
text-align: left;
list-style-type: disc;
}

li::marker{
 color: black; 
}

#qn1_list{
top: 3%;
}

#qn2_list{
top: 5%;
}

#qn1_paragraph1, #qn2_paragraph1, #qn3_paragraph1{
font-size: 111.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
text-align: left;
align-self: left;
}

#qn1_paragraph1{
top: 6%;
}

#qn2_paragraph1{
top: 3%;
}

#qn3_paragraph1{
top: 8%;
}

#qn1_paragraph2, #qn3_paragraph2{
font-size: 111.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
text-align: left;
align-self: left;
}

#qn1_paragraph2{
top: 8%;
}

#qn3_paragraph2{
top: 11%;
}

#qn1_paragraph2 > a, #qn2_paragraph1 > a{
text-decoration: underline;
color: #1391C9;
}

#footer_container{
width: 100%;
height: 90vh;
background-color: #003049;
position: relative;
top: 326vh;
display: flex;
flex-direction: row;
}

#footer_links{
width: 28.4%;
height: 45%;
position: relative;
left: 4%;
top: 17%;
}

#footer_links > ul{
list-style-type: none;
line-height: 10vh;
color: white;
font-size: 104.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
font-weight: 400;
text-align: left;
}

#footer_contact_container{
width: 28.49%;
height: 45%;
position: relative;
left: 7.8%;
top: 30%;
display: flex;
flex-direction: column;
}

#icons{
display: flex;
flex-direction: row;
width: 100%;
height: auto;
justify-content: space-evenly;
}

#org_name{
position: relative;
top: 23%;
width: 115%;  
font-size: 151.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
font-weight: 560;
text-align: center;
align-self: center;
color: white;
}

#org_email{
position: relative;
color: white;
top: 37%;
font-size: 111.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
position: relative;
font-weight: 500;
text-align: center;
align-self: center;
text-decoration: underline
;
}

#copyright{
width: 28.4%;
height: 10%;
position: relative;
left: 13.5%;
top: 17%;
}

#copyright_link{
line-height: 10vh;
color: #97A0A9;
font-size: 104.2%;
font-family: "Noto Sans Ethiopic", sans-serif;
font-weight: 400;
text-align: left;
}

#burger_container{
display: none;
}

#f_link{
text-decoration: none;
color: white;
font-family: "Noto Sans Ethiopic", sans-serif;
}