/* Box sizing rules */
*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Remove default padding and margin */
* {
   padding: 0;
   margin: 0;
}

/* Default anchor tag styling */
a {
   text-decoration: none;
   color: black;
}

a:hover {
   cursor: pointer;
}

/* Default image styling */
img {
   padding: 1rem;
   height: auto;
}

/* Body styling */
html,
body {
 position: relative;
 height: 100%;
}

body {
   font-size: 1rem;
   text-align:justify;
   font-family: 'Inter', sans-serif;
}

.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 1rem;
}

.container > div {
   top: 25vh;
   height: 50vh;
}

div.project_content {
   padding-top: 25vh;
   justify-items: center;
   align-items: center;
}

.project_content h1,h2, p {
   padding: 0.2rem 1rem;
}

.project_container img {
   height: 75%;
}

/* Swiper container stylng */
.swiper {
   right: 1rem;
   width: 100%;
   height: 100%;
}

.swiper-slide {
   background-color:white;
   width:100%;
    /* Center slide text vertically */
   /* display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center; */
}
 .swiper-slide img {
   display: block;
   width: 100%;
   /* height: 100%; */
   object-fit: cover;
 }
 .contents{
   text-align: left;
   padding:10px;
 }
 .swiper-slide h2{
   text-align:center;
   text-transform:uppercase;
   margin-top:30px;
 }

.swiper-button-next,
.swiper-button-prev {
   outline: none;
}

div.swiper-button-next, div.swiper-button-prev {
  top: 40%;
  color:gray;
  margin: 0 10px 0 10px;
}
div.swiper-button-next:after, div.swiper-button-prev:after {
  font-size: 1.2em !important;
}

.swiper-pagination-progressbar-fill{
   --swiper-theme-color: black;
}
.slider{
    width:100%;
}
/*the iframe for lessons is now 500px wide so 100vw fits for mobile*/
@media handheld and (max-width:480px),
      screen and (max-device-width: 480px),
      screen and (max-width: 600px) {
          .slider {
              width: 100vw;
          }
      }