@charset "UTF-8";

@font-face {
            font-family: 'Deco-Style';
            src: url("/font/deco-style-jnl-regular.woff"), format('woff');
        }
/*BOX HEADER*/ 

/*box-sizing: border-box;*/

body { 
  margin: 0;
  background-color: rgb(51,0,102)
}

.header {
  overflow: hidden;
  background-color: rgb(51,0,102);
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 30px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: rgb(51,0,102);
  color: black;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px)


{
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}


/*body {color: rgb(242,235,184);
}
*/
h1 {
  text-align: center;
  font-family: 'Deco-Style', sans-serif;
font-size: 60px;  
}
h2 {text-align: center; font-family: 'Deco-Style', sans-serif;
  font-size: 40px;  
}

body {
  background-color: rgb(51,0,102);
    color: rgb(242,200,125);
}


/*for responsive layout design*/
*{
  box-sizing: border-box;
}

body {
  font-family: Arial;
  margin: 10px;
}

/* Header */
/*header {
  padding: 60px;
  text-align: center;
  backgr`ound: RGB(51,0,102);
  color: white;
}

*//* Top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.container {  
  display: flex;
  flex-wrap: wrap;
}

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: RGB(191,191,191);
    color: RGB(51,0,102);
  padding: 20px;
}

/* Main column */
.main {
  flex: 60%;
  padding: 20px;
    background-color: RGB(179,179,255);
    color: rgb(51,0,102);
}

.main2 {
  flex: 60%;
  padding: 20px;
    background-color: RGB(102,102,255);
    color: floralwhite;
}

/* Fake image, just for this example */
img {
  /*background-color: #aaa*/;
  /*width: 100%;*/
  padding: 10px;
    
}


/*iframe*/


.iframe-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Changes the biggest size */
  padding-bottom: 56.25%; /* Math formula for 16:9 ratio:  \frac{9}{16} = 0.5625 */
  height: 0;
  margin: 0 auto; /* This centers the box on your page */
}

/*.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
*/

.responsive-iframe {
  width: 100%;             /* Fills the width of the parent container */
  max-width: 800px;        /* Optional: Restricts maximum width on large screens */
  aspect-ratio: 16 / 9;    /* Maintains standard video proportions */
  height: auto;            /* Lets the aspect ratio control the height */
  border: 0;               /* Removes default border styling */
}




/* Footer */
footer {
  padding: 20px;
  text-align: center;
  background: rgb(51,0,102);
}

a {color: blue}

.privacy{background: rgb(242,235,184);}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .container, .navbar {   
    flex-direction: column;
  }
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}