/*
filename: Joanne, Alfi, Clarice, Crystal, WeeWee
Author: Joanne, Alfi, Clarice, Crystal, WeeWee
created: 01 March 2024
last modified:27 March 2024
description:Assignment 1 - Computing Technology Inquiry Project
*/

header{
  display: flex;
  justify-content: center;
  background-color: #c3b091;
}

/* Navigation bar & Sidebar */
nav {
  font-size: 18px;
  margin-top: 37px;
}

header img{
  float: left;
}

nav ul li{
  text-align: center;
}

.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Arial black", sans-serif;
  display: none;
}

#mySidenav a {
  position: absolute;
  left: -80px;
  transition: 0.3s;
  padding: 10px;
  width: 130px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#home {
  top: 0px;
  background-color: #ccb49a;
}

#services {
  top: 50px;
  background-color: #deaa88;
}

#activities {
  top: 100px;
  background-color: #c9c0b1;
}

#forms {
  top: 150px;
  background-color: #e3bc9a;
}

#members {
  top: 200px;
  background-color: #cfc8b8;
}

#registration {
  top: 250px;
  background-color: #dbc1aa;
}

@media screen and (min-width: 900px){
  .navbar{
    display: block;
  }

  .sidenav{
    display: none;
  }

  footer .bottomfoot{
    display: none;
  }

  article .PASTA{
    display: none;
  }

  article .oevents{
    display: none;
  }
  
}

@media screen and (max-width: 900px){
  footer .navVertical{
    display: none;
  }

  article .past_activities{
    display: none;
  }

  article .echarity{
    display: none;
  }

  header{
    background-color: #F3E7D3;
  }
}

footer #boomboomfoot{
  text-align: center;
}

#boomboomfoot a{
  text-decoration: none;
  padding: 0px 10px;
  color: black;
  font-weight: bold;
}

.navbar li {
  display: inline-block;
  position: relative; 
  margin-right: 20px;
}

.navbar a {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; 
  background-color: #e8d1ab;
  min-width: 160px;
  z-index: 1;
  border-radius: 30px;
}

.navbar li:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  padding-left: 0px;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #FFFEF2;
  border-radius: 30px;
}

/* Footer Styles */
#sf-footer {
  width: 100%;
  background-color: #c3b091;
  color: black;
  padding: 30px;
  text-align: right;
  position: relative;
}

body, footer {
  margin: 0;
  padding: 0;
}

.footer-text {
  position: relative;
  right: 0;
  margin: 0px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: right;
}

.copyrights{
  bottom: 0;
  margin-top: 15px;
  margin-bottom: 0px;
  text-align: center;
  font-style: italic;
}

.navVertical {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navVertical li {
  flex: 1;
  margin-bottom: 10px;
}

.navVertical a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  display: block;
  text-align: left;
}

/* Sub-level Navigation Styles */
.sub-level {
  list-style: none;
  padding: 25px 0;
  margin: 0;
}

.sub-level li {
  margin-left: 0;
}

.sub-level a {
  color: black;
  text-decoration: none;
  font-weight: normal;
  font-size: 15px;
}

#partner {
  align-items: center;
  display: inline-block;
}

#partner h3{
  margin-top: 0px;
  text-align: right;
}

#partner img {
  margin-right: 10px;
  
}

/* General Styles */
body{
	background-color: #F3E7D3;
	color: maroon;
}

h1{
	font: normal bold 66px "times new roman", sans-serif;
	text-align: center;
}

img{
	max-width: 100%;
	max-height: 100%;
}


/* Homepage */
cite{
  font-size: 20px;
}

#mainpagepicture{
  text-align: center;
  margin-bottom: 40px;
}

#mainpagepicture img {
  margin: 90px;
  margin-left: 30px;
  margin-right: 30px; 
}

#mainpagepicture iframe {
  margin-left: 80px;
  margin-right: 40px;
}

.row {
  display: flex;
  text-align: center;
  font-family: arial, sans-serif;
}

.column {
  flex: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

.row2 {
  display: flex;
}

.column2 {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 20px 50px;
  flex: 1;

}

.column2 p{
  font-size: 18px;
}

.content img {
  margin-right: 10px;
}

.column2 .content {
  display: flex;
  align-items: center;
}

.column2:hover .hovdisplay {
  display: block;
}

.hovdisplay {
  display: none;
  font-size: 18px;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.center{
  font-size: 20px;
  text-align: center;
}

.centertitle{
  margin-top: 100px;
  font-size: 40px;
  text-align: center;
}

figure{
  text-align: center;
}

li img{
  margin-bottom: 10px;
}

/*service pages*/
.serviceposter{
  float: left;
  margin-left: 100px;
  margin-right: 50px;
  margin-bottom: 20px;
}

.bimtable, .bimtable th, .bimtable td{
  border: 1px solid maroon;
  border-collapse: collapse;
  padding: 10px;
}

/*styling for picture on right side*/
.imgright {
  float : right;
  padding-left: 50px;
}

/*styling for picture on left side*/
.imgleft {
  float: left;
  padding-right: 50px;
}

.reco_text {
  line-height: 1.0;
  font-size: 20px;
  text-align: justify;
  text-justify: inter-word;
}

ul li,ol li{
  margin-bottom: 20px;
}

dd {
  margin-bottom: 20px;
}


.reco_book {
  overflow: hidden;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 50px;
  border-radius: 15px;
  background-color: #e8dac3;
  padding: 50px;
  width: 85%;
}

.reco_video{
  text-align: center;
  max-width: 100%;
  margin-top: 20px;
}

.reco_video iframe {
  width: 800px;
  height: 500px;
  border: 2px solid #ccc;
}

figcaption{
  font-family: arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  font-size: 16px;
}

/*Breadcrumb*/
ul.breadcrumb {
  text-align: center;
  padding: 10px 16px;
  list-style: none;
}

ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {
  color: black;
  text-decoration: none;
}

ul.breadcrumb li a:hover {
  color: red;
}

.endtext{
  text-align: center;
  font-family: arial , sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.centertext{
  margin: 0 100px;
  font-size: 20px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 120%;
}


/* Flipcard */
.flip-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; 
  gap: 20px;
  margin-bottom: 50px;
}

.flip-card {
  background-color: transparent;  
  height: 300px; 
  perspective: 1000px;
  margin: 20px;
}

/* Styles specific to members */
.style1 .flip-card {
  width: calc((80% - 60px) / 3); 
}

/* Styles specific to services */
.style2 .flip-card {
  width: calc((80% - 60px) / 4);
}

/* Styles specific to forms & activities */
.style3 .flip-card {
  width: calc((80% - 60px) / 2);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
}

.flip-card-front {
  background-color: #F5DEB3;
  color: black;
  display: flex;
  flex-direction: column; /* Updated to column layout */
  align-items: center;
  justify-content: center;
}

.flip-card-back {
  background-color: #F5DEB3;
  color: black;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-card-back a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  display: inline-block;
}

.flip-card-back a:hover {
  color: #2077b2;
}

.flip-card-back a::after {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.2s;
  visibility: hidden;
  white-space: nowrap;
}

.flip-card-back a:hover::after {
  opacity: 1;
  visibility: visible;
}

.image-container {
  border-radius: 20px 20px 0 0; /* Adjust border-radius for the top corners only */
  overflow: hidden;
}

.flip-card-back img{
  border-radius: 50%;
  width: 200px;
  margin-top: 5px;
}

/*Carwash table*/
.carwashtable {
  text-align: center;
  margin: auto;
  border-collapse: collapse;
}

.carwashtable td, .carwashtable th {
  border:1px solid black;
  padding: 10px;
}

.carwashtable-left{
  text-align: left;
}

#sponsored{
  font-style: italic;
  text-align: center;
}

#klenconame{
  font-weight: bold;
  font-size: 25px;
  text-align: center;
}

/* join volunteer */
.input_con, #state, .enquiry, #phonenum, #email, .age{
  padding: 10px 15px;
  margin: 10px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-sizing: border-box;
}

.input_con{
  width: 400px;
}

#state, .enquiry{
  width: 60%;
  cursor: pointer;
}

#phonenum,#email{
  width: 280px;
}

.age{
  width: 100px;
}

.cancel-button,.submit-button {
  width: 130px;
  background-color: white;
  color: black;
  padding: 18px 12px;
  margin:10px 30px;
  border: 0;
  border-color:grey;
  border-radius: 10px;
  cursor: pointer;
  transition:0.3s;
  text-align: center;
  font-size:20px;
  font-family: "times new roman", sans-serif;
}

.button-cell{
  text-align: center;
  margin-bottom: 50px;
}

.submit-button:hover{
  background-color:#4CAF50;
  color:white;
}

.cancel-button:hover{
  background-color:red;
  color:white;
}

.one{
  font-size:23px;
}

.three{
  padding-right: 20px;
  font-size:20px;
  color:black;
}

.detailss{
  text-align:center;
  font-size: 28px;
  color: black;
}

.volunteertable{
  padding:1% 3% 1% 5%;
}

.inside3{
  margin-left:auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding:30px 20px;
  border-radius:30px;
  width: 70%;
}

.container1{
  display:flex;
  flex-wrap:wrap;
}

.box1{
  padding-right:30px;
  
}

/*Enquiry Service*/
.datetime{
  width:270px;
  height:35px;
  border-radius:30px;
  padding :1px 15px;
}

#message11{
  border: 1px solid #ccc;
  border-radius: 20px;
  box-sizing: border-box;
  width: 100%;
  text-align:center;
  margin: 0;
}


/*Member container*/
.membercontainer{
  border-radius: 260px 260px 0px 0px; 
  padding: 20px; 
  background-color: #FEF9E7; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  max-width: 700px; 
  margin: 0 auto; 
}

/*Member table*/
.membertable{
  border: 2px solid #E59866;
  border-collapse: collapse;
  margin: auto;
  width: 90%;
  font-family: Arial, sans-serif;
  text-align: center;
  color: black;
}

.membertable tr:nth-child(odd) {
  background-color: #EEB078;
}

.memberphoto img{
  float: none;
  padding: 20px;
  display: block;
  margin: 20px auto;
  border-radius: 150px;
  border: 3px groove #E59866 ;
  overflow: hidden;
}

.membertable p{
  text-align: justify;
}

.membertable th{  
  width: 80px;
  text-align: right;
  padding: 10px;
}

.membertable td{
  padding: 10px;
}

.membertable th, .membertable td{
  border: 2px solid #E59866;
}

.member_ul{
  list-style-type: square;
  text-align: left;
}

.member_ul li{
  margin-bottom: 10px;
}

.studname{
  font-weight: bold;
  font-size: 200%;
  text-align: center;
}

.studcourse{
  color: rgb(0, 0, 0);
}

.button-container {
  text-align: center;
  margin-top: 20px;
}

.email-button {
  display: inline-block;
  width: 100px;
  background-color: white;
  color: black;
  padding: 12px 13px;
  border: 0;
  border-color:grey;
  border-radius: 10px;
  cursor: pointer;
  transition:0.3s;
  text-decoration: none;
  font-weight: bold;
}

.email-button:hover{
  background-color:#4CAF50;
  color:white;
}

/* Registration Page*/
.registration_page{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

.login{
  position: relative;
  width: 570px;
  height: 550px;
  padding: 10px 40px;
  background: #FFF;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.login_header{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20px 1px 0px;
}

#login_welcome{
  font-family: arial, sans-serif;
  color: #333;
  font-size: 30px;
  margin-bottom: 5px;
}

.login_header p{
  color: #555;
}

#regisemail,#password{
  font-size: 1em;
  color: #333;
  padding-left: 15px;
  margin-bottom: 25px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  width: 100%;
  height: 50px;
}

#regisemail:focus ,#password:focus{
  outline: 2px solid #8749f2;
}

#rmbme{
  color: #7931F5;
}

.forgot_password{
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.forgot_password a{
  text-decoration: none;
  color: #7931F5;
}

.submit_form{
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #fff;
  background: #7931F5;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 12px 13px;
  margin: 0;
  border-color:grey;
  border-radius: 10px;
  transition:0.3s;
}

.middle_text{
  position: relative;
  width: 100%;
  margin: 30px 0;
}

.middle_text p{
  font-family: arial, sans-serif;
  position: absolute;
  left: 235px;
  top: -15px;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #777;
  padding: 10px;
}

.socials_signin{
  display: flex;
  gap: 15px;
}

.socials_signin .button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  cursor: pointer; 
}

.google_signin{
  width: 90%;
  height: 50px;
  padding: 0 30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.google_signin img{
  position: relative;
  right: 15px;
  top: 0px;
  width: 25px;
}

.google_signin span{
  position: relative;
  left: 10px;
  bottom: 5px;
  font-family: arial, sans-serif;
  font-size: 15px;
  width: 90%;
}

.facebook_signin{
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.facebook_signin img{
  position: relative;
  right: 10px;
  top: 0px;
  width: 30px;
}

.facebook_signin span{
  position: relative;
  right: 5px;
  bottom: 8px;
  font-family: arial, sans-serif;
  font-size: 15px;
  width: 90%;
}

.google_signin:hover, .facebook_signin:hover,.submit_form:hover{
  opacity: 0.7;
} 

.signup{
  position: absolute;
  bottom:0px;
  right: 15px;
}

.signup p{
  font-size: 14px;
  color: #333;
}

.signup p>a{
  text-decoration: none;
}

.reco_text a{
  text-decoration: none;
  color: maroon;
  padding: 20px 0;
}

#acknowledgements{
  line-height: 1.6;
}

.enhancements-button {
  font: 16px sans-serif;
  display: inline-block;
  width: 120px;
  background-color: white;
  border-radius: 10px;
  cursor: pointer;
  transition:0.3s;
  box-shadow: 5px 5px lightblue;
  margin-bottom: 20px;
}

.enhancements-button:hover{
  background-color:#4CAF50;
  color:white;
}

.enhancebtn-cell {
  display: inline; 
  margin: 0px 5px;
  text-align: center;
}


/*Acitivty page */
.activity_titles{
  text-align: left;
  margin-left: 120px;
  font-size: 40px;
}

#ff_title{
  font-size: 35px;
  text-align: center;
}

.eventtable, .eventtable td, .eventtable th{
  border: 2px dotted purple;
  border-collapse: collapse;
  padding: 5px 10px;
  margin: 50px auto;
}

.past_activities{
  margin: auto;
  padding: 25px 0px;
  width: 90%;
  display: flex;
}


.events{
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 25px 0px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 15px;
  background-color: #e8dac3;
  padding: 50px;
  width: 85%;
  min-height: 100px;
  position: relative;
}

.events section{
  margin: 10px;
  justify-content: center;
}

.echarity img{
  height: 250px; 
  width: 350px;
  object-fit: fill;
  margin: 5px;
}

.echarity dt{
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  margin:20px 0;
}

.echarity dd{
  text-align: left;
  margin: 0;
  padding: 0;
}

.hidden_text{
  visibility: hidden; 
  opacity: 0;
  margin-top: 10px;
}

.hidden_text button{
  border-radius: 20px;
  padding: 8px 25px;
  border: 1px solid black;
  background-color: #e8dac3;
}

.hidden_text button:hover{
    font-weight: bold;
}

.echarity img:hover{
    transform: scale(1.1);
}

.echarity{
  width: 30%;
  text-align: left;
  margin: 0 10px;
}

.echarity:hover .hidden_text{
    visibility: visible; 
    opacity: 1; 
    margin-bottom: 30px;
}

#otherevents img{
  height: 250px; 
  width: 350px;
}

#otherevents button{
  border-radius: 20px;
  padding: 6px 20px;
  border: 1px solid black;
  background-color: white;
  color: maroon;
}

#otherevents button:hover{
  font-weight: bold;
}

.side_text{
  width: 30%;
}

.events *{
    transition: 0.3s ease all;
}

.events aside{
  width: 30%;
  padding:0px 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 5px;
  font-style: italic;
  float: right;
  border: 1px solid blue;
  background-color: white;
  text-align: center;
  max-height: 80px;
}

.reco_book aside{
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  font-style: italic;
  float: right;
  border: 1.5px solid blue;
  text-align: center;
  background-color: white;
}


/* sparkle animation start */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.sparkle1 {
  animation-name: sparkle1;
  top: 33%;
  left: 42%;
  background-color: #f27979;
}

.sparkle2 {
  animation-name: sparkle2;
  top: 28%;
  left: 49%;
  background-color: #f27979;
}

.sparkle3 {
  animation-name: sparkle3;
  top: 28%;
  left: 55%;
  background-color: #f27979;
}

.sparkle4 {
  animation-name: sparkle4;
  top: 60%;
  left: 49%;
  background-color: #fd9748;
}

.sparkle5 {
  animation-name: sparkle5;
  top: 58%;
  left: 55%;
  background-color: #f27979;
}

.sparkle6 {
  animation-name: sparkle6;
  top: 48%;
  left: 58%;
  background-color: #fd9748;
}

.sparkle7 {
  animation-name: sparkle7;
  top: 35%;
  left: 57%;
  background-color: #fd9748;
}

.sparkle8 {
  animation-name: sparkle8;
  top: 43%;
  left: 42%;
  background-color: #fd9748;
}

.sparkle9 {
  animation-name: sparkle9;
  top: 54%;
  left: 43%;
  background-color: #f27979;
}

@keyframes sparkle1 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) translateX(-50px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle2 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(-30px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle3 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) translateX(40px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle4 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(10px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle5 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(70px) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle6 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(20px) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle7 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) translateX(90px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle8 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(50px) translateX(-60px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes sparkle9 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(-30px) rotate(360deg);
    opacity: 0;
  }
}

/*Deaf awareness*/
.awareness{
  text-align: center;
}

.awareness figure{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  display: inline-block;
}

.awareness figcaption{
  padding-top: 10px;
  text-align: center;
}

.awareness figure:hover {
  transform: scale(1.1);
}

.awareness_h2{
  margin-top: 50px;
  font-size: 37px;
  text-align: center;
}

.container333 {
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  padding: 20px; 
}

.player {
  display: inline-block;
  background-color:#F0F0F0;
  border-radius: 25px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom:60px;
  max-width: 800px;
  padding: 1rem;
  box-sizing: border-box;
}

.info222{
  text-align:center;
  font-size:17px;
}

.imgbox img {
  width: 300px;
  height: 400px;
  max-width: 100%;
  height: auto;
  border-radius: 25px;
  transition: transform 0.5s;
}
  
.artists{
  width:100px;
}

.audioo{
  color:red;
  height:40px;
}