body {
    width: 100%;
    height: 100%;
	margin:0;
	padding: 0;
    display: block;
    justify-content: center;
    align-items: center;
     background-image: url('images/backgr.jpg');
background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
	 
}



#wrapper{
     margin: 0;
     min-height: 100vh;
     max-width:100%;
     display:block;
	 position: relative;
}

h1 {
    font-family: delius swash caps, sans-serif;
    color: #e9827b;
}



h2 {
    font-family: delius swash caps, sans-serif;
    color: #525872;
}

nav {
    width: 94%;

    display: block;
    margin: 0 auto;
      
    font-family: delius swash caps, sans-serif;
    font-weight: 400;
    font-style: normal;
    border-width: .05em;
    font-size: 1.5em;
    padding: 8px 0;
    
    
}

nav ul li a {
	text-decoration: none;
	color: #fee5ad;
}

nav ul {
	  padding: 60px 0 0 0;
	  margin: 0 auto;
	  width: 100%;
	  display: flex;
	  gap: 40px;
	  list-style: none;
	  text-align: none;
	  justify-content: center;
	  align-items: center;
}


nav ul li {
    list-style: none;
     margin-top: 8px;
     display:inline;
  
}

.active {
	color: #e9827b;
}

.hero-image{
text-align: center;
	margin-top:10%;
}

.hero-image img{
	margin-top: 20px;
	border-radius: 1rem;
}


.page-title {
    text-align: center;
    font-size: 6rem;
    margin-top: 120px;
}


/* title on thr main page floating */

.page-title::before,
.page-title::after {
    content: attr(aria-label);
    position: absolute;
    top: 200;
    left: 20;
    transform: translate(-50%, -50%);
    text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3);
}

h1::before {
    animation: floatAbove 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

h1::after {
    opacity: 0.65;
    filter: blur(0.02em);
    transform: translate(-50%, -50%) rotateX(21deg);
    animation: floatBelow 3.5s ease-in-out infinite;
    -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

@keyframes floatAbove {
    50% {
        transform: translate(-50%, -60%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
                clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
    }
}

@keyframes floatBelow {
    50% {
        transform: translate(-50%, -60%) rotateX(10deg);
        -webkit-clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
    }
}




.page-subtitle {
    text-align: center;
    font-size: 1.8rem;
    margin: 30px 0 60px;
}

/* clouds for nav bar */

.cloudleft {
	opacity: 0;
	width: 50px;
	transition: opacity 0.3s ease;
}

.cloudright {
	opacity: 0;
	width: 50px;
	transition: opacity 0.3s ease;
}

#mainpage:hover .cloudleft {
	opacity: 1;
}

#mainpage:hover .cloudright {
	opacity: 1;
}

#mainpage {
	display: inline-block;
}

#types:hover .cloudleft {
	opacity: 1;
}

#types:hover .cloudright {
	opacity: 1;
}

#types {
	display: inline-block;
}

#science:hover .cloudleft {
	opacity: 1;
}

#science:hover .cloudright {
	opacity: 1;
}

#science {
	display: inline-block;
}

#symbols:hover .cloudleft {
	opacity: 1;
}

#symbols:hover .cloudright {
	opacity: 1;
}

#symbols {
	display: inline-block;
}



/* stars on the background */

#particle-container {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}

.particle {
	 position: absolute;
	 border-radius: 10%;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-1 {
	 100% {
		 transform: translate3d(88vw, 77vh, 24px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(1) {
	 animation: particle-animation-1 60s infinite;
	 opacity: 0.86;
	 height: 30px;
	 width: 30px;
	 animation-delay: -0.2s;
	 transform: translate3d(63vw, 24vh, 28px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-2 {
	 100% {
		 transform: translate3d(60vw, 60vh, 70px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(2) {
	 animation: particle-animation-2 60s infinite;
	 opacity: 0.73;
	 height: 40px;
	 width: 40px;
	 animation-delay: -0.4s;
	 transform: translate3d(50vw, 90vh, 23px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-3 {
	 100% {
		 transform: translate3d(42vw, 9vh, 42px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(3) {
	 animation: particle-animation-3 60s infinite;
	 opacity: 0.86;
	 height: 40px;
	 width: 50px;
	 animation-delay: -0.6s;
	 transform: translate3d(10vw, 25vh, 36px);
	
	 background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-4 {
	 100% {
		 transform: translate3d(27vw, 9vh, 25px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(4) {
	 animation: particle-animation-4 60s infinite;
	 opacity: 0.66;
	 height: 10px;
	 width: 10px;
	 animation-delay: -0.8s;
	 transform: translate3d(7vw, 35vh, 71px);
 background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-5 {
	 100% {
		 transform: translate3d(61vw, 77vh, 94px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(5) {
	 animation: particle-animation-5 60s infinite;
	 opacity: 0.7;
	 height: 50px;
	 width: 50px;
	 animation-delay: -1s;
	 transform: translate3d(26vw, 85vh, 73px);
	 background-image: url('images/star.png');
	 background-size: cover;
	filter: blur(0.02em);
}
 @keyframes particle-animation-6 {
	 100% {
		 transform: translate3d(81vw, 62vh, 40px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(6) {
	 animation: particle-animation-6 60s infinite;
	 opacity: 0.56;
	 height: 60px;
	 width: 60px;
	 animation-delay: -1.2s;
	 transform: translate3d(51vw, 14vh, 60px);
	 background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-7 {
	 100% {
		 transform: translate3d(71vw, 26vh, 1px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(7) {
	 animation: particle-animation-7 60s infinite;
	 opacity: 0.05;
	 height: 50px;
	 width: 50px;
	 animation-delay: -1.4s;
	 transform: translate3d(45vw, 67vh, 25px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-8 {
	 100% {
		 transform: translate3d(62vw, 20vh, 1px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(8) {
	 animation: particle-animation-8 60s infinite;
	 opacity: 0.21;
	 height: 70px;
	 width: 70px;
	 animation-delay: -1.6s;
	 transform: translate3d(47vw, 17vh, 10px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
 @keyframes particle-animation-9 {
	 100% {
		 transform: translate3d(12vw, 50vh, 15px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(9) {
	 animation: particle-animation-9 60s infinite;
	 opacity: 0.41;
	 height: 60px;
	 width: 60px;
	 animation-delay: -1.6s;
	 transform: translate3d(57vw, 87vh, 40px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
@keyframes particle-animation-10 {
	 100% {
		 transform: translate3d(42vw, 10vh, 11px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(10) {
	 animation: particle-animation-10 60s infinite;
	 opacity: 0.21;
	 height: 30px;
	 width: 30px;
	 animation-delay: -1.6s;
	 transform: translate3d(97vw, 27vh, 30px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
@keyframes particle-animation-11 {
	 100% {
		 transform: translate3d(22vw, 30vh, 10px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(11) {
	 animation: particle-animation-11 60s infinite;
	 opacity: 0.31;
	 height: 20px;
	 width: 20px;
	 animation-delay: -1.6s;
	 transform: translate3d(40vw, 37vh, 1px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}
@keyframes particle-animation-12 {
	 100% {
		 transform: translate3d(32vw, 10vh, 10px);
		 filter: blur(0.02em);
	}
}
 .particle:nth-child(12) {
	 animation: particle-animation-12 60s infinite;
	 opacity: 0.51;
	 height: 10px;
	 width: 10px;
	 animation-delay: -1.6s;
	 transform: translate3d(57vw, 37vh, 1px);
	  background-image: url('images/star.png');
	 background-size: cover;
	  filter: blur(0.02em);
}





/* flip cards */


.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 1200px;
margin: 80px auto;
padding: 0 40px;
	animation: slide 1s ease-in;
}

@-webkit-keyframes identifier {
	from {  }
	to {  }
}
@-o-keyframes identifier {
	from {  }
	to {  }
}
@-moz-keyframes identifier {
	from {  }
	to {  }
}
@keyframes slide {
	from {transform: translateX(15px);}
	to { transform: translateX(0);}
}

.flip-card {
  background-color: transparent;
  width: 500px;
  height: 500px;
  perspective: 1000px;
	
}

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

}

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


.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
	
}

.flip-card-front {
  background-color: #82849d;
  color: black;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 40px;
}

.flip-card-front img {
width: 100%;
height: 90%;
object-fit: cover;
	
}

.flip-card-front h3 {
margin: 10px;
margin-bottom: 20px; 
font-family: delius swash caps, sans-serif;
color: #fee5ad;
	font-size: 2.2em;
}

.flip-card-back p {
margin: 12px 0;
font-family: delius swash caps, sans-serif;
color: #525872;
	font-size: 2.2em;
}

.flip-card-back {
  background-color: #fee5ad;
  color: white;
  transform: rotateY(180deg);
  padding: 24px;
text-align: center;
font-size: 1rem;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 40px;
	
}


/* accordion menu */

.container {
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
    width: 100%;
}

.accordion {
  max-width: 700px;
  margin: 0 auto;
}

.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 30%;
  padding: 1rem 3rem 1rem 1rem;
  color: #f9a580;
  font-family: delius swash caps, sans-serif;
  font-size: 1.5em;
  border-bottom: 2px solid #82849d;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #262933;
}

.accordion a.active {
  color: #262933;
  border-bottom: 1px solid #262933;
}

.accordion a::after {
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #262933;
  text-align: center;
}

.accordion a.active::after {
  color: #262933;
  border: 1px solid #262933;
}

.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  font-family: delius swash caps, sans-serif;
  max-height: 0;
  border-bottom: 1px solid #262933;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}

.accordion .content p {
  font-size: 1.5em;
}

.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 200px;
  overflow-y: auto;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}

.science-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr; 
  gap: 60px;
  max-width: 1000px;
  margin: 35px auto;
  padding: 0 40px;
  align-items: start;
	animation: slide 1s ease-in;
}

.science-visual img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  border-radius: 16px;
}

.science-visual p {
font-family: delius swash caps, sans-serif;
font-size: 30px;
color: #E9827B;
}

.footer {
  margin-top: 100px;
  padding: 2px 0;
  text-align: center;
  font-family: delius swash caps, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}